【大模型应用】全流程-AI快速实现产品UI设计

📅 2026/7/2 6:22:18
【大模型应用】全流程-AI快速实现产品UI设计
目录一、目的二、AI进行产品设计的优缺点三、AI辅助UI设计的实际应用3.1 设计“视觉气质”生成UI氛围图3.1.1 与DeepSeek交互确定生成UI氛围图提示词3.1.2 使用精准提示词获取设计元素3.1.3 根据设计原子和核心情绪词让deepseek给出生成UI氛围图的提示词内容3.1.4 生成的UI氛围图​编辑3.2、UI线框图-明确页面功能和布局3.2.1 让AI生成“线框图生成的提示词”3.2.2 使用文生图大模型获取线框图3.3 核心图高保真视觉稿生成3.3.1 让AI生成“高保真视觉稿生成的提示词”3.3.2 使用文生图获取组件高保真图3.4 精细化资产精修与设计系统植入3.4.1 视觉稿转为可开发组件四、文章总结一、目的本篇文章主要是记录一下在公司企业中使用AI进行产品UI设计的过程。文章内容的描述主要针对互联网软件产品的视觉设计受众群体主要是中小型公司设计人、全栈开发工程师、独立开发者、一人公司创业者。实际操作人员需要懂一点技术概念了解AI的提示词工程会更利于设计理想的效果。主要用于辅助UI产品设计帮助公司人员与管理者或客户确认产品原型确保交互的产品UI风格和结构与实际需求保持一致。二、AI进行产品设计的优缺点首先我们需要了解使用AI进行产品设计的优缺点通过认识其优劣势可以更好的帮助我们如何去发挥其优势解决其不足。人工智能的莫拉维克悖论对人类而言简单的感知与运动技能对机器极难实现而对人类困难的逻辑推理对机器反而容易。因此如何让AI与人结合如何在设计工程上赋予AI设计视觉灵魂又加快人们对于产品需求的理解和设计是人们在当前人工智能水平下的主要关注点。使用AI进行产品UI设计优势极大提升设计效率与迭代速度AI可以快速生成大量设计草图、组件变体和布局方案。设计师能从繁琐的重复性工作中解放出来将更多精力投入到核心创意和用户体验策略上。保持设计系统的一致性与规范性AI能严格遵守既定的设计系统如颜色、字体、间距等自动生成符合规范的元素。这可以有效避免人工操作时可能出现的偏差确保整个产品UI的统一和规范。实现数据驱动的个性化设计AI能够分析用户行为数据为不同用户群体或个体动态生成和调整界面。这有助于实现真正的“千人千面”提升用户体验和产品的转化率。降低设计门槛赋能非专业设计师借助AI工具产品经理、开发者等非设计背景的人员也能快速生成可用的界面原型。这能加速产品从概念到原型的验证过程促进团队协作。辅助进行可用性与可访问性测试AI可以模拟用户行为对设计稿进行自动化测试提前发现布局、对比度、点击区域等可用性问题。这有助于在设计早期就优化产品降低后期修改成本。使用AI进行产品UI设计缺点缺乏真正的创造力与情感共鸣AI的“创作”本质是基于已有数据的模式识别和重组。它难以像人类设计师一样从文化、情感和复杂的生活经验中汲取灵感创造出真正具有颠覆性和情感共鸣的设计。对上下文和业务目标理解不足AI可能生成视觉上美观但不符合产品核心业务目标、品牌调性或特定使用场景的设计。最终的决策和判断仍需依赖人类设计师的全局视野。产出结果可能同质化缺乏独特性由于AI的训练数据多来自网络上的现有设计其生成的结果容易趋于平均水平导致不同产品的UI风格“千篇一律”。这不利于品牌建立独特的视觉识别。高度依赖训练数据的质量与偏见AI模型的表现完全取决于其学习的数据集。如果数据存在偏见或质量不高生成的设计也会带有这些缺陷可能无意中排斥某些用户群体。工具局限性与“最后一公里”问题目前的AI设计工具在精细调整、复杂交互逻辑和动效设计方面仍有局限。AI生成的通常只是初稿或半成品距离一个完美、可交付的开发稿还需要设计师投入大量精力进行打磨和完善。三、AI辅助UI设计的实际应用3.1设计“视觉气质”生成UI氛围图UI氛围图是指界面中用于营造特定情感基调、视觉风格或场景感知的‌非功能性视觉元素‌通常为背景、头图或装饰层其核心目的不是传递具体操作信息而是通过色彩、光影、质感等手法激发用户的情绪共鸣与品牌联想。目标不要直接画界面先定义“视觉气质”。UI氛围图的核心特征‌情绪导向‌侧重传达“感觉”而非“功能”如节日的喜庆、科技的冷峻、社交的松弛感 。‌视觉从属‌通常作为背景或局部装饰存在需确保不干扰核心内容的可读性与操作效率 。‌动态趋势‌现代设计中常结合微动效、渐变、毛玻璃模糊或3D元素增强沉浸感简言之UI氛围图是界面的“情绪皮肤”用视觉语言告诉用户“这里是什么地方”以及“该有什么样的感受”。3.1.1 与DeepSeek交互确定生成UI氛围图提示词以下是提示词用于让DeepSeek输出精准的提示词内容来确定“视觉气质”。这里是对于不知道如何编写“UI氛围图”提示词的示例可以让AI辅助这也是提示词工程里当前“Loop Engineering”,这里我们自己手动与AI交互让它来编写合适的提示词。请扮演一位提示词工程师我想要获取UI设计中的【设计原子】和3各核心情绪词 用来定义产品的“视觉气质”我应该如何跟大语言模型提问才能获得最佳答案呢3.1.2 使用精准提示词获取设计元素a.deepseek生成提示词如下这里用医疗类的产品做示例# Role: 资深UI设计系统分析师 品牌语义学专家 # Context: 我正在设计一款名为“辅助诊断系统”的[产品类型如AI辅助诊断]核心目标用户是[25-50岁超声科医生]。 # Task: 请为我定义该产品的“视觉气质系统”。你需要严格基于“原子设计方法论”和“设计心理学”完成以下两个维度的输出 ## 维度一提取 5 大核心设计原子Design Atoms 请从以下维度给出具体的、可落地的数值/方案并解释其**为何能支撑**后续的情绪词 1. **色彩体系**主色/辅助色/中性色的色相、饱和度和明度区间 2. **字体排印**中英文字体家族选择、字重层级、行高比例 3. **圆角渗透**大、中、小、微圆角的特定数值逻辑 4. **空间韵律**基于8px网格的间距倍数关系如紧凑/宽松比例 5. **质感细节**阴影深度、渐变方向、噪点/玻璃拟态的使用倾向 ## 维度二萃取 3 个核心情绪词Core Mood Keywords 请从“温暖-冷感”、“克制-张扬”、“有机-机械”、“信赖-新奇”这四组二元对立轴中精炼出 **仅且只有3个** 形容词如静谧、俏皮、精密。 **关键要求** - 这3个词必须构成“**核心词 两个修饰轴**”的关系一个定义基调两个定义边界。 - 针对每个情绪词请反向映射回“维度一”中最相关的1个原子例如“精密”这个词主要靠“极小的圆角硬朗的阴影”实现。 # Output Format: 请以表格 简短论述的形式输出先给结论原子数值3个词再给设计依据Why。b、返回结果如下基于您提供的背景**辅助诊断系统**目标用户为**25-50岁超声科医生**我将严格遵循**原子设计方法论**与**设计心理学**为您定义这套视觉气质系统。 在诊断场景中医生面临**高强度用眼疲劳**、**对微小病灶如微钙化、结节边界的极致专注**以及**对AI判读结果的信任审视**三重压力。因此视觉系统必须首先服务于 **“诊断安全”** 其次才是 **“科技美学”**。 --- ### 维度一5 大核心设计原子Design Atoms定义表 | 原子类别 | 具体数值/方案可落地 | 设计心理学依据为何支撑情绪词 | | :--- | :--- | :--- | | **1. 色彩体系** | **主色**深岩蓝灰 #2C3E50 (H210 S40 L25) br**辅助色**冷静青蓝 #4A90E2 (H210 S70 L60) br**中性色**暖白灰 #F4F5F7 与 石板灰 #7F8C8D br**功能色****琥珀金** #F5A623非危险警告用于高亮可疑区域 | **支撑「温润」**用暖白灰基底替代纯白降低屏幕眩光如同纸质病历的柔和反射给予眼部温润呵护。br**支撑「笃定」**深岩蓝灰极具专业下沉感传递出设备“重且稳”的可靠心理暗示。 | | **2. 字体排印** | **中文字族**思源黑体 (Noto Sans SC) / 苹方 (PingFang SC) br**西文字族**Inter / Roboto br**字重层级**Regular 400正文→ Medium 500可读性强调→ SemiBold 600数据/标题br**行高比例**1.5倍诊断报告/长文本**1.2倍**关键测量数值/标签 | **支撑「精微」**采用高可读性的无衬线体并严格控制字重层级确保在昏暗阅片室环境中**0.1mm级别的测量数值**依然能通过字重对比被瞬间捕获不产生视觉歧义。 | | **3. 圆角渗透** | **微圆角2px**光标、测量锚点、微小标签br**小圆角4px**次要按钮、图像缩略图br**中圆角8px**卡片容器、侧边栏br**大圆角16px**主模态框、AI判读结果浮层 | **支撑「笃定」「精微」**采用**硬朗几何逻辑**2px/4px为主拒绝过度圆润如20px带来的“消费电子玩具感”。极小的微圆角保证了设备外观的**精密仪器属性**而16px大圆角仅用于最高层级的AI结论浮窗象征“柔性包裹的危险信息”。 | | **4. 空间韵律** | **基础网格**8px 原子网格br**紧凑间距**4px同组参数、8px图标与文字br**宽松间距**24px区块呼吸间隙、**40px**关键诊断区域与操作栏的强制隔离带br**页面边距**统一的 20px 安全边距 | **支撑「笃定」**严格的8px数学韵律对应超声诊断中对**纵横比A/T** 的精确测量习惯。**40px的强制隔离带**确保操作栏永不干扰超声影像图的读图视野建立清晰、沉着、不慌乱的页面秩序。 | | **5. 质感细节** | **阴影层级**采用**极淡的柔光阴影**Y轴偏移 4px模糊 12px透明度 0.06 的黑无彩色投影。br**渐变方向****水平微渐变**左深右浅模拟超声探头声束的物理方向感。br**拟态倾向****绝对摒弃噪点与重玻璃拟态**。仅在AI判读区使用**半透明毛玻璃Blur: 20px, Opacity: 0.85**。 | **支撑「精微」**极淡阴影防止“脏脏”的视觉干扰确保医生视线焦点始终停留在**高分辨率的超声原始图像**上。水平渐变呼应超声探头的扫查动作形成无意识的心理共鸣而非张扬的视觉特效。 | --- ### 维度二3 个核心情绪词Core Mood Keywords 基于四组二元对立轴温暖-冷感 / 克制-张扬 / 有机-机械 / 信赖-新奇精炼出的 **1个核心词 2个修饰轴** 如下 #### **核心词基调笃定Assured** **锚定“信赖-新奇”轴偏向极致信赖** * **定义**不闪烁、不轻浮、不讨好的专业权威感。用户打开系统时感受到的是如同老搭档般的可靠而不是对AI“黑盒”的不安。 * **反向映射对应的核心原子****空间韵律**严格的8px网格和宽阔的读图隔离带。正如心电图网格纸一样无懈可击的秩序感是建立医疗信赖的物理基础。 #### **修饰轴 ①边界精微Micro-precision** **锚定“克制-张扬”轴偏向极致克制** * **定义**所有视觉细节都是**功能性**的而非装饰性。它体现在对1px分割线的使用对字体字重的精准拿捏以及对AI标记框边缘锐利度的控制。 * **反向映射对应的核心原子****圆角渗透**采用2px微圆角处理所有可交互的测量锚点。在甲状腺结节测量中2px的直角微曲能最大限度保证测量线对齐的**视觉锐度**避免因过度圆角导致目标勾选误差。 #### **修饰轴 ②边界温润Tepid/Earthy** **锚定“温暖-冷感”与“有机-机械”交叉轴偏向有机温暖** * **定义**用以中和“精微”带来的机械冷感。通过引入大面积的**低饱和暖白灰基底**和**琥珀金高亮色**将冷冰冰的金属机箱转化为带有“体温”的听诊器质感。 * **反向映射对应的核心原子****色彩体系**中的中性色暖白灰 #F4F5F7。这一底色模拟了医用打印纸或胶片的物理质感在长达数小时的阅片过程中暖调底色比纯蓝/纯白背景能有效降低视疲劳这是对医生最大的温柔。 --- ### 设计依据论述Why 1. **为“疲劳”而设计温润笃定**超声科医生每日操作探头数小时视觉极易疲劳。纯黑背景太压抑与纯白背景太刺眼均不可取。本系统选择的**高亮度、低饱和度的暖白灰中性色**结合**柔光阴影**重构了“诊断台”的物理光照环境让视觉系统具备 **“吸光性”** 使医生的瞳孔在屏幕前保持最舒适的舒张状态。 2. **为“可信”而设计笃定精微**AI辅助诊断最怕“过于神奇”。如果界面使用大量霓虹蓝紫渐变或极深的重玻璃效果虽新潮但易引发医生的**警惕与不信任**。本系统采用**硬朗的几何逻辑小圆角、严格网格**将AI呈现为一把“刻度精准的游标卡尺”而非“全自动魔法黑盒”。视觉上的“严谨感”是AI获取医生信任的第一步。 3. **为“行动”而设计精微**在紧急或高负荷情况下误触是致命伤。本系统通过**极小的2px微圆角**与**明确的字重对比**确保按钮的**热区边界**极其清晰视觉重心完全落在测量数据和超声影像上消灭所有“无效装饰像素”确保每一次点击都源于医生清醒的临床决策。 **总结视觉气质公式** **笃定空间秩序 × 精微几何锐度 温润暖灰底色 一名沉稳老练、手拿精密探头、注视患者的超声专家。**3.1.3 根据设计原子和核心情绪词让deepseek给出生成UI氛围图的提示词内容如果是UI设计人员这里获取到核心情绪词自己也可以动手去绘制UI氛围图了同时也可以让AI生成后自己进行参考和微调需要的效果。角色设定你是一位精通UI/UX的视觉提示词工程师擅长将抽象的设计规范转化为高保真的视觉描述。 输入原子 色彩心理学[主色深岩蓝灰 #2C3E50 (H210 S40 L25) 辅助色冷静青蓝 #4A90E2 (H210 S70 L60) 中性色暖白灰 #F4F5F7 与 石板灰 #7F8C8D 功能色琥珀金 #F5A623非危险警告用于高亮可疑区域] 字体性格[中文字族思源黑体 (Noto Sans SC) / 苹方 (PingFang SC) 西文字族Inter / Roboto 字重层级Regular 400正文→ Medium 500可读性强调→ SemiBold 600数据/标题 行高比例1.5倍诊断报告/长文本1.2倍关键测量数值/标签] 圆角曲率[微圆角2px光标、测量锚点、微小标签 小圆角4px次要按钮、图像缩略图 中圆角8px卡片容器、侧边栏 大圆角16px主模态框、AI判读结果浮层] 空间韵律【基础网格8px 原子网格 紧凑间距4px同组参数、8px图标与文字 宽松间距24px区块呼吸间隙、40px关键诊断区域与操作栏的强制隔离带 页面边距统一的 20px 安全边距】 质感细节【阴影层级采用极淡的柔光阴影Y轴偏移 4px模糊 12px透明度 0.06 的黑无彩色投影。 渐变方向水平微渐变左深右浅模拟超声探头声束的物理方向感。 拟态倾向绝对摒弃噪点与重玻璃拟态。仅在AI判读区使用半透明毛玻璃Blur: 20px, Opacity: 0.85。】 核心情绪词 笃定Assured不闪烁、不轻浮、不讨好的专业权威感。用户打开系统时感受到的是如同老搭档般的可靠而不是对AI“黑盒”的不安。 精微Micro-precision所有视觉细节都是功能性的而非装饰性。它体现在对1px分割线的使用对字体字重的精准拿捏以及对AI标记框边缘锐利度的控制 温润Tepid/Earthy 用以中和“精微”带来的机械冷感。通过引入大面积的低饱和暖白灰基底和琥珀金高亮色将冷冰冰的金属机箱转化为带有“体温”的听诊器质感。 任务指令 请基于上述原子为我生成一套用于“UI氛围图”的完整交付物。请按以下3个模块输出 模块1图像生成提示词Prompt 注意不要只给一句话请拆解为[主体/UI容器]、[环境/光影]、[色彩构成]、[材质/细节]、[相机角度]并优化权重 要求适合国内即梦AI墨刀AI等包含宽高比如--ar 16:9且必须包含ui design, app interface, mockup等词根以确保不跑偏成纯艺术画。 模块2视觉层级与布局描述 将情绪词转化为具体的排版节奏例如大量留白代表“静谧”元素悬浮感代表“未来” 要求描述卡片、导航栏、内容区的空间关系以及圆角如何具体应用在边缘和交互热区上。 模块3设计系统微文案 提供5个符合字体性格的UI假文标题/按钮文案并附带中英文对照方便我放进Figma里看氛围3.1.4 生成的UI氛围图UI氛围图主要是为了告诉用户你要设计的产品大概使用感觉是什么样。设计工具这里的我是使用即梦AI进行文生图如果你可以科学上网也可以使用使用Krea AI或Midjourney (V7).但目前国内相关文生图大模型同样不错。3.2、UI线框图-明确页面功能和布局网站线框图是网站框架的草图是网站设计师根据网页设计标准将客户需求图形化的一种展现形式.如下示例就是常用线框图。目标用快速产出10个不同的布局变体打破思维定势。这里可以用AI生成也可以使用公司内部的设计资产或使用一些线上的线框图设计示例。(主打一个怎么方便怎么来)PS这个步骤优先建议人工根据业务需求确定好相关主界面明确各界面需要表达的内容。(如“一个带有底部Tab、顶部卡片流、右上角个人头像的首页”)3.2.1 让AI生成“线框图生成的提示词”这里使用DeepSeek让它生成提示词。该步骤适用于在公司内需要和领导或客户对齐界面布局内容时需要。一般的中小型公司或个人开发者(可跳过)可以考虑查看线上各种线框图库。例如墨刀、即时设计等在线设计平台。角色提示词工程师Prompt Engineer。 目标设计UI线框图UI wireframes。 方法使用AI根据产品业务需求快速生成不同的界面线框图。 核心问题我应该如何向大语言模型LLM提问/构建提示词以获得最佳答案根据返回的内容获取提示词模板然后套到自己业务需求中例如角色设定你是一位顶级UI/UX专家擅长信息架构和低保真原型设计。 任务请根据以下业务需求生成 [数字] 个核心界面的 纯HTML/CSS线框图代码。 业务背景[例如一款针对Z世代的冥想APP核心功能是沉浸式呼吸引导和情绪打卡] 具体界面清单 [界面A如首页/今日冥想] [界面B如情绪记录弹窗] [界面C如个人数据看板] 设计要求 风格低保真、灰度模式仅用黑白灰、无彩色、无图片用占位块代替。 标注关键交互按钮旁请用 [] 或 [?] 注释说明点击后的跳转逻辑。 布局采用Flexbox或Grid栅格系统确保视觉对齐。 尺寸模拟移动端视图宽度 375px居中显示。 内容使用贴近真实业务的模拟文案非乱码Lorem ipsum。 额外要求请将三个界面放在同一个HTML文件中用Tab或分隔线清晰区分以便我一次预览全部。3.2.2 使用文生图大模型获取线框图以下是通过DeepSeek生成的html网页返回的线框图。3.3 核心图高保真视觉稿生成高保真视觉稿High-Fidelity Visual Design是产品设计中接近最终上线效果的静态设计文件它完整呈现了产品的‌色彩、字体、图标、间距、图片及UI组件样式‌如同产品的“精装修效果图”。主要用途就是供产品方、客户直观判断最终效果减少理解偏差作为定稿依据。对开发就是让工程师据此进行界面编码确保线上效果与设计一致。一句话总结就是你实际软件产品最终给客户看到的样子。目标生成高保真视觉稿但不建议直接生成整屏“界面幻觉”拆解生成。3.3.1让AI生成“高保真视觉稿生成的提示词”根据AI提供的提示词模板这里我根据前面的设计原子和视觉气质微调了内容。如果有需要还可以在提示词中增加项目背景(如AI诊断系统、微商城)、受众人群(20-45岁医生/想要购物的人)等# 角色 你是一位顶尖的 UI/UX 设计系统专家精通原子设计方法论和高保真原型还原。你输出的代码HTML/CSS/Tailwind可直接用于设计评审。 # 任务目标 基于给定的【视觉气质】和【设计原子】严格遵循“原子 → 分子 → 有机体”的顺序生成高保真组件。本次仅生成 [导航栏] 模块。 # 视觉气质 (Visual Vibe) - 核心情绪[笃定Assured、精微Micro-precision、温润Tepid/Earthy] - 物理隐喻[1、不闪烁、不轻浮、不讨好的专业权威感。用户打开系统时感受到的是如同老搭档般的可靠而不是对AI“黑盒”的不安。2、所有视觉细节都是功能性的而非装饰性。它体现在对1px分割线的使用对字体字重的精准拿捏以及对AI标记框边缘锐利度的控制3、用以中和“精微”带来的机械冷感。] - 色彩氛围[引入大面积的低饱和暖白灰基底和琥珀金高亮色将冷冰冰的金属机箱转化为带有“体温”的听诊器质感。] - 动态感觉[精准、权威] # 设计原子 (Design Atoms) - 必须严格执行 -色彩心理学[主色深岩蓝灰 #2C3E50 (H210 S40 L25) -辅助色冷静青蓝 #4A90E2 (H210 S70 L60) -中性色暖白灰 #F4F5F7 与 石板灰 #7F8C8D -功能色琥珀金 #F5A623非危险警告用于高亮可疑区域] -字体性格[中文字族思源黑体 (Noto Sans SC) / 苹方 (PingFang SC) -西文字族Inter / Roboto -字重层级Regular 400正文→ Medium 500可读性强调→ SemiBold 600数据/标题 -行高比例1.5倍诊断报告/长文本1.2倍关键测量数值/标签] -圆角曲率[微圆角2px光标、测量锚点、微小标签 -小圆角4px次要按钮、图像缩略图 -中圆角8px卡片容器、侧边栏 -大圆角16px主模态框、AI判读结果浮层] -空间韵律【基础网格8px 原子网格 -紧凑间距4px同组参数、8px图标与文字 -宽松间距24px区块呼吸间隙、40px关键诊断区域与操作栏的强制隔离带 -页面边距统一的 20px 安全边距】 # 输出工作流 (CoT) 请按以下步骤思考并输出分步展示 **Step 1: 原子定义复述**校验你是否理解了我的变量。 **Step 2: 生成单个分子组件**例如一个带左图标的 Primary 按钮展示 Default, Hover, Active 三种状态。 **Step 3: 生成有机体组件**例如由 3 个该按钮组成的表单操作栏展示其内部间距和对齐逻辑。 **Step 4: 设计标注**在代码注释中说明为什么这个间距用了 16px 而不是 8px以体现‘呼吸感’的气质。 # 格式约束 - 使用纯 HTML Tailwind CSS 或 纯 CSS需附带CSS Variables。 - 确保符合 WCAG 2.1 AA 级对比度标准。3.3.2 使用文生图获取组件高保真图这里是DeepSeek生成的高保真内容包括对设计内容的详细说明。到这里我们完成了高保真模型的一小步。在这里肯定会有人觉得很繁琐还不如直接找现成的内容或则自己做了。但是大家可以尝试把这跑通的一小步放到例如coze或则dify智能体中让它循环运行生成多个组件然后你来进行拼接。甚至再进一步也许可以尝试设计一个拼接组件的智能体出来还原出整个页面模型呢这里介绍了这种方案的可行性感兴趣可以更进一步去研究。3.4 精细化资产精修与设计系统植入资产精修通过AI我们已经生成了高保真的组件并可以按照线框图组合组件成一个具体的界面。已经有了很明确的效果了。但是AI在细节方面的打磨是一个耗Token又耗时的过程可能个人3分钟微调的内容AI需要十多分钟去分析和给出结果因此这里就是体现个人价值的地方。资产精修就是通过人类的感性和对需求系统性的认知注入效果图人类的智慧。设计系统植入为了保证后期需求变动需要调整设计图把AI生成的高保证图片或则Html代码转化为可开发的组件过程这里推荐Vectorizer.AI、Figma插件“Stark”、墨刀(国内不翻墙)目标将上一阶段最满意的一张图/代码(高保真视觉稿)拖入Figma/墨刀。3.4.1 视觉稿转为可开发组件使用相关工具这里通过墨刀把图片转换为原型界面(更推荐导入Html页面)图片会存在失真且收费。大致效果如下PS:到这里所有界面生成完成就可以进行精细化微调结束后就可以进行演示了。四、文章总结本文结合个人实际通过使用AI完成UI设计希望能够帮助到有需要的人。该文档是按照标准化的视觉设计完成对于个人开发者可以参考过程经验省略其中一部分步骤。分享一下AI心得AI永远无法替代专业的设计人员AI是一个可以提高个人横向能力和纵向效率的工具。可以提升专业领域的效率也可以让一个快速去学习和上手一个非专业的内容但这样的结果只有80分。剩余的20分需要个人专业和系统性的洞察力。消除恐惧的最好办法就是面对它与君共勉~