Impeccable 设计工作流

Impeccable 工作流是一种人机协作的流程，用于产出高质量的 UI。它确保 AI 生成的设计受到设计系统的约束，经过质量审查，并适配所有设备。

核心原则：AI 提供分析和执行；人类做出最终审美判断。这是人类设计师不可替代的价值。

第一步：初始化（/impeccable init）

目的：为每个项目建立设计上下文。

执行内容：

• AI 收集品牌上下文（颜色、字体、调性）
• 生成包含设计决策和反模式的 DESIGN.md
• 生成包含产品定位的 PRODUCT.md
• 配置 Live Mode 以获取实时反馈

人类判断点：批准或修改生成的 DESIGN.md。这是你的设计宪法——在继续之前把它做好。

第二步：生成（/impeccable craft 或 /impeccable shape）

目的：基于 DESIGN.md 约束生成初始设计稿。

执行内容：

• AI 读取 DESIGN.md 以理解设计系统
• 使用语义化 Token 生成组件（而非任意值）
• 产出具有合适间距、颜色和字体的初稿

人类判断点：审查初稿是否符合品牌调性。迭代 2-3 轮以确立视觉风格。这是你设定标准的地方。

关键约束：AI 必须使用 bg-surface、text-muted-foreground 等 Token，而非 bg-gray-100 或 text-gray-500。

第三步：审查（/impeccable critique）

目的：从多个维度进行专业设计审查。

执行内容：

• AI 作为设计评论家，从以下维度对 UI 进行评分：
  • 排版（层级、可读性、字体选择）
  • 颜色（一致性、对比度、品牌契合度）
  • 间距（节奏、邻近性、留白）
  • 对比度（无障碍、清晰度）
  • 一致性（跨组件、跨页面）
  • 无障碍（WCAG 合规）

人类判断点：审查 critique 报告。决定采纳哪些建议、拒绝哪些。并非所有 AI 建议都是好的——相信你的眼睛。

第四步：打磨与适配（/impeccable polish + /impeccable adapt）

目的：修复不一致性并确保响应式行为。

Polish 修复：

• 间距不一致（例如，相似组件中 14px vs 16px 的内边距）
• 字体大小不匹配
• 颜色值漂移
• 圆角不一致

Adapt 在以下尺寸检查响应式行为：

• 375px（移动端）：无水平溢出，触摸目标 >= 44px
• 768px（平板）：布局适当变化
• 1280px（桌面端）：内容不会拉伸过宽

人类判断点：审查最终输出。如有可能，在真实设备上进行手动测试。

总结表

何时使用此工作流

在以下场景使用此工作流：

• 新页面设计
• 重大 UI 改版
• 添加新的设计系统组件
• 新团队成员接入设计系统