简诗 AI 扁平设计系统

当设计规范只停留在视觉稿时

团队里的设计规范往往只有一张 Figma 文件。工程师在写按钮时不知道该用 4px 还是 8px 间距，深色模式下主色是否需要调整也没有依据。等到验收阶段，才发现对比度不足、焦点状态丢失、空状态缺失——这些问题在设计稿里根本看不见。

这份技能的目标是把扁平风格的规范转化为可执行的工程指引：不是告诉你「页面应该看起来简洁」，而是给出具体的 token、状态矩阵和验收条件，让设计评审可以在代码 review 里完成。

技能如何工作

它以设计系统指南作者的身份运行，遵循一套固定流程：

• 先重申设计意图：用一句话概括当前界面要解决的问题，后续所有规则都围绕它展开
• 再定义 token 与基础约束：色彩、字体尺度、间距统一以 semantic token 形式给出，例如主色 #F2673C、正文文字 #111827、间距基准 4/8/12/16/24/32，不允许直接写死原始值
• 然后展开组件级规则：明确每个组件的解剖结构、变体、状态（default、hover、focus-visible、active、disabled、loading、error）以及键盘、指针、触摸下的交互行为
• 最后给出 QA 清单：每条规则都能在 code review 中被勾选验证

写作语气要求简洁、自信、专业；措辞上用 must 标记不可协商的规则，用 should 表达建议，每条「该做」都配一个具体的「不该做」示例。

适用边界

它解决的是界面规范一致性问题，不负责生成实际视觉资产。当设计决策与无障碍要求冲突时（例如为了视觉冲击力牺牲对比度），规则明确要求优先无障碍。涉及发送、发布、删除等外部写入操作时，技能会先展示目标与影响，等待明确确认，不会自行执行。