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

目录

一、目的

二、AI进行产品设计的优缺点

三、AI辅助UI设计的实际应用

[3.1 设计"视觉气质"，生成UI氛围图](#3.1 设计“视觉气质”，生成UI氛围图)

[3.1.1 与DeepSeek交互，确定生成UI氛围图提示词](#3.1.1 与DeepSeek交互，确定生成UI氛围图提示词)

[3.1.2 使用精准提示词获取设计元素](#3.1.2 使用精准提示词获取设计元素)

[3.1.3 根据设计原子和核心情绪词，让deepseek给出生成UI氛围图的提示词内容](#3.1.3 根据设计原子和核心情绪词，让deepseek给出生成UI氛围图的提示词内容)

[3.1.4 生成的UI氛围图](#3.1.4 生成的UI氛围图)

​编辑

3.2、UI线框图-明确页面功能和布局

[3.2.1 让AI生成"线框图生成的提示词"](#3.2.1 让AI生成“线框图生成的提示词”)

[3.2.2 使用文生图大模型，获取线框图](#3.2.2 使用文生图大模型，获取线框图)

[3.3 核心图，高保真视觉稿生成](#3.3 核心图，高保真视觉稿生成)

[3.3.1 让AI生成"高保真视觉稿生成的提示词"](#3.3.1 让AI生成“高保真视觉稿生成的提示词”)

[3.3.2 使用文生图获取组件高保真图](#3.3.2 使用文生图获取组件高保真图)

[3.4 精细化：资产精修与设计系统植入](#3.4 精细化：资产精修与设计系统植入)

[3.4.1 视觉稿转为可开发组件](#3.4.1 视觉稿转为可开发组件)

四、文章总结

---

一、目的

本篇文章主要是记录一下在公司企业中，使用AI进行产品UI设计的过程。文章内容的描述主要针对互联网软件产品的视觉设计，受众群体主要是：中小型公司设计人、全栈开发工程师、独立开发者、一人公司创业者。实际操作人员需要懂一点技术概念，了解AI的提示词工程会更利于设计理想的效果。主要用于辅助UI产品设计，帮助公司人员与管理者或客户确认产品原型，确保交互的产品UI风格和结构与实际需求保持一致。

二、AI进行产品设计的优缺点

首先我们需要了解使用AI进行产品设计的优缺点，通过认识其优劣势可以更好的帮助我们如何去发挥其优势，解决其不足。人工智能的 莫拉维克悖论，对人类而言简单的感知与运动技能，对机器极难实现；而对人类困难的逻辑推理，对机器反而容易。
因此如何让AI与人结合，如何在设计工程上，赋予AI设计视觉灵魂，又加快人们对于产品需求的理解和设计，是人们在当前人工智能水平下的主要关注点。
使用AI进行产品UI设计，优势：

1. **极大提升设计效率与迭代速度；**AI可以快速生成大量设计草图、组件变体和布局方案。设计师能从繁琐的重复性工作中解放出来，将更多精力投入到核心创意和用户体验策略上。
2. **保持设计系统的一致性与规范性；**AI能严格遵守既定的设计系统（如颜色、字体、间距等），自动生成符合规范的元素。这可以有效避免人工操作时可能出现的偏差，确保整个产品UI的统一和规范。
3. **实现数据驱动的个性化设计；**AI能够分析用户行为数据，为不同用户群体或个体动态生成和调整界面。这有助于实现真正的"千人千面"，提升用户体验和产品的转化率。
4. **降低设计门槛，赋能非专业设计师；**借助AI工具，产品经理、开发者等非设计背景的人员也能快速生成可用的界面原型。这能加速产品从概念到原型的验证过程，促进团队协作。
5. **辅助进行可用性与可访问性测试；**AI可以模拟用户行为，对设计稿进行自动化测试，提前发现布局、对比度、点击区域等可用性问题。这有助于在设计早期就优化产品，降低后期修改成本。
   使用AI进行产品UI设计，缺点：
6. **缺乏真正的创造力与情感共鸣；**AI的"创作"本质是基于已有数据的模式识别和重组。它难以像人类设计师一样，从文化、情感和复杂的生活经验中汲取灵感，创造出真正具有颠覆性和情感共鸣的设计。
7. **对上下文和业务目标理解不足；**AI可能生成视觉上美观但不符合产品核心业务目标、品牌调性或特定使用场景的设计。最终的决策和判断仍需依赖人类设计师的全局视野。
8. **产出结果可能同质化，缺乏独特性；**由于AI的训练数据多来自网络上的现有设计，其生成的结果容易趋于平均水平，导致不同产品的UI风格"千篇一律"。这不利于品牌建立独特的视觉识别。
9. **高度依赖训练数据的质量与偏见；**AI模型的表现完全取决于其学习的数据集。如果数据存在偏见或质量不高，生成的设计也会带有这些缺陷，可能无意中排斥某些用户群体。
10. **工具局限性与"最后一公里"问题；**目前的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分需要个人专业和系统性的洞察力。消除恐惧的最好办法就是面对它，与君共勉~