Phase 4：前端设计工作流

前端不只是"好看"。前端是用户理解系统、完成任务的路径。

设计阶段偷懒，后面写代码时会加倍还回来。

---

一、这个阶段要做什么

定义用户界面和交互流程。产出：

• 用户流程
• 信息架构
• 设计系统
• 组件清单

---

二、设计流程

第一步：梳理用户流程

把用户完成核心任务的每一步写下来：

打开首页 → 看到概览 → 点击功能 → 输入信息 → 看到结果 → 执行操作

第二步：定义信息架构

• 有哪些页面？
• 每个页面放什么？
• 页面之间怎么跳转？

不要一开始就追求完美设计。先把骨架搭对。

第三步：建立视觉设计系统

即使不自己画图，也要定义：

hljs css
:root {
  --primary: #...;   /* 品牌主色 */
  --accent: #...;    /* 强调色 */
  --bg: #...;        /* 背景 */
  --text: #...;      /* 文字 */
  --muted: #...;     /* 次要文字 */
}

再加上字体、间距、圆角、阴影。没有这些，AI 会按默认审美来，结果通常很 AI。

第四步：用 AI 辅助设计

但记住：AI 生成的是起点。品牌一致性、可用性、可访问性，必须你人工把关。

第五步：拆分组件

原则：同类结构出现 ≥2 次，就封装成组件。

常见组件：Button、Card、Input、Modal、列表项、导航栏、表单。

---

三、给 AI 的输入

hljs markdown
## 项目背景
[粘贴 PRD.md]

## 需要设计的页面
1. 首页
2. ...

## 设计风格
- 参考网站：
- 主色调：
- 字体偏好：
- 风格关键词：

## 输出要求
1. 每个页面的线框描述
2. 信息架构
3. 设计系统草案
4. 组件清单

---

四、AI 应该产出什么

DESIGN.md

包含：

• 设计原则
• 颜色/字体/间距规范
• 页面结构
• 组件清单
• 关键交互说明

页面清单

组件清单

---

五、和 AI 协作的技巧

给参考图

"我不喜欢默认设计。参考这个网站 [链接]，重新设计首页。"

分页面迭代

"先只做首页，不要动其他页面。确认后再做详情页。"

明确状态

"这个按钮要有默认、hover、loading 三种状态。"

要求可访问性

"所有图标按钮加 aria-label，颜色对比度符合 WCAG AA。"

---

六、什么时候算做完了

• 核心页面已设计
• 用户流程能走通
• 设计系统已定义
• 组件清单已列出
• 已考虑响应式
• 已考虑可访问性

---

七、几个常见错误

直接让 AI 生成完整 UI

• 后果：风格杂乱，像拼凑的
• 修正：先给设计系统

不做组件拆分

• 后果：大量重复代码
• 修正：按复用次数拆分

忽略空状态和错误状态

• 后果：体验不完整
• 修正：每个界面考虑异常

不考虑移动端

• 后果：手机上看不了
• 修正：从设计初期就考虑响应式

---

八、输出文件

text
/docs/
├── DESIGN.md
├── page-structure.md
└── component-list.md

/src/
├── app/
└── components/

---

九、下一步

前端设计确定后，进入后端实现。

→ Phase 5 后端分层与代码实现