design-workflow

设计工作流技能

打造不显得像 AI 生成的 UI 设计指南。这些规则适用于任何设计工作——原型、设计文档或 UI 代码。

此技能的作用

1. 教你如何避免“千篇一律的 AI”设计模式
2. 提供设计质量检查清单
3. 指导你逐个组件进行设计
4. 设定原型质量标准

规则 1：使用现有设计系统

**切勿自行编造颜色、字体或间距。**始终使用项目中定义的样式。

优先阅读的内容

1. .planning/design-config.md——项目的颜色、字体、间距和品牌标识
2. design-config 中列出的主题文件——实际的 CSS 设计令牌
3. 代码库中的现有组件——遵循其模式

要点

• 使用项目调色板中的确切十六进制值（不要使用 bg-blue-500 这类 Tailwind 默认值）
• 使用项目的字体——不要换成 Inter、Poppins 或 Space Grotesk
• 使用项目的边框圆角和阴影值
• 引用 CSS 变量或设计令牌——不要硬编码

---

规则 2：避免千篇一律的 AI 设计模式

以下模式一看就像“AI 做的”——全部避免：

颜色

• 不要使用项目调色板之外的颜色
• 不要使用随意的紫色／紫罗兰色渐变（最常见的 AI 老套设计）
• 不要使用霓虹色或彩虹渐变
• 不要只用灰色，缺少强调色
• 使用项目的强调色——它能彰显独特性

布局

• 不要让每个区域都采用居中布局并限制最大宽度
• 不要在标题文本后面放一个巨大的渐变色团
• 不要使用三个图标看起来都一样的三列功能卡片
• 不要每个区域都采用右侧放图、左侧放文字的 50/50 分栏
• 偶尔打破网格——非对称布局更有趣

排版

• 不要所有内容都用同一种字号
• 建立清晰的层级：大号标题、中号副标题、小号正文
• 利用字重形成对比
• 不要让长文本块居中对齐

组件

• 不要让所有圆角矩形看起来都一样
• 让卡片在视觉上有所变化——大小不同，区分重点卡片和普通卡片
• 按钮应清晰区分主要、次要和幽灵层级
• 不要所有内容都使用图标——有时文本更合适

文案

• 不要使用空泛的营销套话（如“释放你的潜能”“更上一层楼”）
• 内容要具体——使用真实的功能名称和数字
• 文案语气要符合 design-config 中的 Design Personality

---

规则 3：逐个组件进行设计

不要一次性设计整个页面。先构建各个部分，再组合起来。

工作顺序

1. 设计令牌——确认现有主题文件中的颜色、字体和间距
2. 基础组件——Button、Card、Badge、Input（小型、独立）
3. 复合组件——导航栏、侧边栏、首屏区域、功能卡片
4. 完整页面——将组件组合成页面
5. 状态——为每个组件添加加载、空、错误状态
6. 响应式——针对移动端、平板和桌面端调整各个页面

---

规则 4：使用视觉参考

提供了参考时：

1. 研究其视觉效果出色的原因（布局、颜色、排版、留白）
2. 借鉴灵感，不要照搬——匹配其质量，而非精确复刻布局
3. 应用于项目的设计系统

未提供参考时：

• 查看 design-config 中的参考应用
• 注重留白——空间越充足，越显高级
• 少量使用强调色——最多占屏幕的 10-15%
• 每个区域都要有一个醒目突出的重点（层级）

---

规则 5：原型质量标准

必须具备

• 使用项目主题文件中的确切颜色
• 加载真实字体
• 间距设置合理（不要到处随意设置内边距）
• 使用真实内容（不要用“Lorem ipsum”）
• 显示所有状态（加载、空、错误、成功）
• 支持响应式：在 375px、768px、1440px 宽度下均可正常使用

绝对不能有

• 占位图片或图库照片 URL
• Tailwind 默认颜色
• 缺少悬停／焦点状态
• 在任何视口下布局错乱
• 难以阅读的文本（检查对比度）

---

审查与检查清单

有关自检、审查者检查清单以及设计与实现不一致问题的排查，请参阅 checklists.md。