claude code从需求到低保真线框图，再到高保真UI原型，全流程

用AI工具从需求到低保真线框图，再到高保真UI原型，全流程！

先来看下效果：

[图示已省略]

本文将包含所有步骤和反复验证过的高效提示词。

第一步：生成全面的设计系统文档

任何高质量的应用都始于一个统一、严谨的设计系统。它为整个产品的视觉和交互制定了标准，是后续所有开发工作的“单一事实来源”

# 角色与目标
你是一位顶级的UI/UX设计系统架构师AI。你的核心任务是基于下方用户提供的极简信息，生成一份全面、结构化且对AI编程极其友好的设计系统文档。这份文档将作为唯一的“真理之源”，指导AI程序员以完美的一致性和高质量构建应用的前端界面。你必须能够自行推理和扩展，展现出高级的设计思维，生成绝大部分设计规范。

# 用户输入
这是我提供的核心信息：

1.产品需求：

*   显化APP:
    `"一款名为‘星愿 (Stella)’的正念与愿望显化APP，目标用户是年轻职场人（25-35岁）。核心功能包括每日誓言、感恩日记和一个用于可视化目标的‘愿望清单’。UI需要简洁、现代，并营造出一种私密、神圣的个人空间感。"`

2.核心色系：
       --primary-100:#FF7F50;
    --primary-200:#dd6236;
    --primary-300:#8f1e00;
    --accent-100:#8B4513;
    --accent-200:#ffd299;
    --text-100:#000000;
    --text-200:#2c2c2c;
    --bg-100:#F7EEDD;

# 你的任务：生成流程
请严格按照以下步骤，有条不紊地构建设计系统文档：

1.分析与推理： 深入分析“产品需求”，理解产品的气质、基调、目标用户和功能需求。你的所有设计决策都将以此为基础。
2.生成设计令牌 (Design Tokens)： 这是整个系统的基石。基于你的分析和用户提供的“核心色系”，生成一整套完整的设计令牌。
    *   颜色 (Colors)： 将用户提供的核心色扩展为一个完整的色板。必须包含：
        *   一个主色阶（例如从100到900），用于交互状态（如悬停、按下）。
        *   一个完整的中性色（灰色）色阶，用于文本、背景和边框。
        *   用于成功、错误、警告、信息状态的语义化颜色。
    *   **字体 (Typography)：** 建立一个和谐且易于访问的字体系统（如：大标题、一级标题、正文、辅助文字）。为每个样式定义`fontFamily`（字体族）、`fontWeight`（字重）、`fontSize`（字号）和`lineHeight`（行高）。请选择与产品气质相匹配的、免费可商用的字体（如：思源黑体、阿里巴巴普惠体、Inter等）。
    *   **间距 (Spacing)：** 基于标准的8px网格系统，定义一套间距单位（例如：4px, 8px, 16px, 24px, 32px, 48px）。
    *   **效果 (Effects)：** 定义标准的`borderRadius`（圆角）、`boxShadow`（阴影）以及其他可能需要的视觉效果（如`blur`模糊）。
3.**识别并生成核心组件：** 根据产品需求，主动识别并定义一套必要、可复用的UI组件。对于每个组件，你**必须**：
    *   给它一个清晰、符合惯例的名称（如`Button`按钮、`Input`输入框、`Card`卡片）。
    *   定义其可配置的`Props`（属性），如`type`（类型）、`size`（尺寸）、`state`（状态）。这对可复用性至关重要。
    *   描述其样式是如何根据Props从设计令牌中派生出来的。
    *   **不要等我命名组件。请主动识别出按钮、输入框、卡片、模态框、导航栏等常见模式，并自己创建它们。**
4.**用示例页面蓝图进行演示：** 为了展示系统的实际应用，请为产品的一个关键页面（例如主看板或登录页）创建一个基于组件的布局蓝图。

# 输出格式
最终的输出**必须**是一个结构清晰的Markdown文档。请使用标题（`#`, `##`, `###`）来明确划分章节。所有的技术规范（令牌、组件属性）**必须**用YAML格式的代码块包裹，以确保最佳的可读性和机器可解析性。

---
[文档开始]

# 设计系统：[AI，请根据产品需求生成一个合适的项目名称]

## 1. 设计令牌 (Design Tokens)

### 1.1. 颜色 (Colors)
```yaml
- [AI，请在此处生成完整的色板]
### 1.2. 字体 (Typography)
- [AI，请在此处生成完整的字体系统]
### 1.3. 间距 (Spacing)
- [AI，请在此处生成间距系统]
### 1.4. 效果 (Effects)
- [AI，请在此处生成圆角、阴影等效果]
## 2. 组件库 (Component Library)
### 2.1. 组件：按钮 (Button)
codeYaml
# [AI，请在此处定义按钮组件及其Props和样式规则]
## 2.2. 组件：输入框 (Input)
codeYaml
 [AI，请在此处定义输入框组件及其Props和样式规则]
## 2.3. 组件：卡片 (Card)
codeYaml
 [AI，请在此处定义卡片组件及其Props和样式规则]
(AI，请继续根据产品需求，主动识别并添加其他必要组件，如模态框(Modal)、头像(Avatar)、标签页(Tabs)等)
### 3. 示例页面蓝图：[AI，请命名此页面，例如：“登录页”]
此蓝图使用上述定义的组件，描述了页面的结构。
codeYaml
 [AI，请在此处生成示例页面的组件树]

这个提示词的核心在于为AI设定了一个高级专业角色，并提供了明确的目标（产品需求）和基础输入（核心色系）。关键指令是要求AI基于这些有限信息，自行推理和扩展，生成一份完整的、包含所有必要规范的设计文档。

生成的结果非常符合专业要求： 字体系统、间距单位、视觉效果（圆角、阴影）、完整的色板，甚至根据产品需求推断出的核心UI组件（按钮、输入框、卡片）都被清晰地定义了。

[图示已省略]

第二步：根据设计系统文档生成低保真线框图

有了设计系统文档，下一步是将其转化为结构化的、可视化的低保真线框图。

我们继续利用AI，这次的角色是“前端架构师”，其任务是严格遵循第一步生成的设计文档，直接编写出HTML原型代码。

# 角色与目标
你是一位顶级的、能够将设计系统无缝转化为代码的前端架构师AI。你的核心任务是基于我提供的 **[设计规则文档]** 和 **[产品功能需求]**，直接生成一个**低保真黑白线框图**的多界面HTML原型。

你不再需要自己进行创意设计，你的所有视觉决策（颜色、字体、间距、组件样式等）**必须严格且唯一地**来源于我提供的 **[设计规则文档]**。你的角色是将这份“设计蓝图”转化为“HTML代码”。

## 1. [设计规则文档]
同目录下的design-system.md文件（放上第一步生成的设计规则文档路径）
## 2. 产品功能需求
见设计规则文档（放上你的产品需求）

# 任务指令与技术规格
你需要严格遵守以下所有要求来完成代码生成任务：
## 绝对遵循设计规则：
- 设计令牌应用：代码中所有的颜色、字体、间距、圆角、阴影等CSS属性，必须使用 CSS自定义变量 (CSS Custom Properties) 来实现。你需要在<style>标签的:root选择器中，将 [设计规则文档] 中的所有Design Tokens定义为CSS变量（例如 --color-primary: #FF8C42;），然后在Tailwind CSS的类名或自定义CSS中通过var(--color-primary)来调用它们。这是强制要求，以确保代码与设计系统联动。
- 组件化实现：[设计规则文档] 中定义的每一个组件（如Button, Card, Input），在HTML中都应该有清晰、可复用的结构。
## 代码实现要求：
- 技术栈: HTML + Tailwind CSS + FontAwesome Icons。
- 最终交付物: 一个包含所有功能页面的单一HTML文件。
- 布局: 页面预览以网格布局横向排列，每行最多展示3-4个界面预览，可有多行。使用CSS Grid或Flexbox实现。
## 画板与环境模拟:
- 每个APP界面预览的容器尺寸为 375x812px，并带有一个1px solid #ccc的描边来模拟手机边框。
- 每个界面顶部必须包含一个模拟的iOS状态栏（时间9:41、信号、电池）。
- 每个界面必须能够独立进行内部垂直滚动，滚动时底部标签栏需固定在每个手机画板底部，内容区域可以独立滚动，不会影响导航栏；
## 通用组件:
- 底部标签栏 (Tab Bar): 除了引导页/登录流程，所有核心页面都必须包含一个统一的、固定的底部标签栏，用于应用内主要导航。当前激活的标签页应有明显的视觉区分。
## 高级视觉效果与占位:
- 图标系统: 使用内联SVG图标，或者FontAwesome的类名。
- 图片占位: 使用Unsplash的API (e.g., https://source.unsplash.com/random/400x300?nature,calm) 来填充所有需要图片的地方。确保图片主题与产品调性一致。
- 高设计感SVG: 在关键页面（如欢迎页、空状态页）适当加入一些符合产品气质的、抽象或具象的SVG背景或插图，以提升设计感。
- 交互与动效: 为按钮、卡片等可交互元素添加微妙的hover和active效果（如轻微缩放、亮度变化），使用Tailwind的过渡工具类实现平滑动画。
## 代码结构：
代码必须结构清晰、注释良好。
在<head>标签中引入Tailwind CSS的CDN链接和FontAwesome的CDN链接。
将所有CSS自定义变量、通用样式和布局样式放在<style>标签内。
HTML的<body>部分用于组织所有APP界面的容器。
现在，请开始你的工作。分析设计规则，理解功能需求，然后生成最终的、可直接在浏览器中打开并预览的低保真黑白线框感的HTML原型以及完整代码。

这个提示词的关键在于**“绝对遵循”**。我们通过指令，强制AI的所有CSS实现（颜色、字体、间距等）都必须通过调用第一步生成的CSS自定义变量来完成。这确保了最终代码与设计系统的100%一致性。

最终生成的效果，在还原度上表现出色。 它不仅构建了所有核心页面，还处理了诸如iOS状态栏模拟、内容区域独立滚动、底部导航栏固定等交互细节。

[图示已省略]

第三步：结合视觉参考，生成高保真UI原型

有了结构化的线框图，最后一步是应用具体的视觉风格，完成高保真UI原型。

在这一步，我们的角色转变为提供视觉方向的“艺术总监”。我们需要为AI提供明确的视觉参考，引导它完成最终的设计。

具体操作流程如下：

在这些网站上找到符合你产品调性的设计风格，截图后，将其作为视觉参考提供给AI，并下达指令：“更换所有页面UI设计，都严格参考这张图的视觉风格进行设计。”

一个重要的实战经验： AI可能无法一次性生成完美的结果。这很正常。将其视为一个需要沟通的初级设计师，通过多轮对话进行迭代优化，例如“将主按钮的颜色调整为--primary-100”、“减弱卡片阴影的强度”。经过几轮微调，通常都能达到满意的效果。

[图示已省略]

这里AI很可能一次性改的不理想，但多进行几次对话就能生成满意的效果。

下图是我提供了一张参考图后，最终生成的页面。可以看到，AI成功地将参考图的设计风格与我在第一步设定的配色方案进行了融合。

[图示已省略]

从一个抽象的产品概念，到一份专业的设计系统文档，再到一个结构化的低保真原型，最终到一套完整的高保真UI。

过去，这个流程需要产品经理、UI/UX设计师和前端工程师等多角色协作数天才能完成。现在，借助AI和一套严谨的工作流，单人即可在数小时内完成核心原型的构建。