Built 26/04/17 09:31commit 4c9ce40
Agent 可读设计系统
中文 | English
摘要
Agent 可读设计系统意味着：把前端品味和 UI 约束写进版本化 markdown，让模型依据明确视觉规则去生成、修改和审查界面，而不是靠模糊形容词猜测。
核心模式
DESIGN.md对“外观与体验”的作用，类似AGENTS.md对“实现行为”的作用：两者都是自主工作可依赖的持久控制面。- 优秀的设计控制文档应编码可复用的具体规则，而不只是 mood board 式描述。
- Markdown 之所以适合作为这种控制面，是因为它本来就是 coding agent 的原生阅读格式，不需要额外解析基础设施。
契约应包含什么
- 主题与氛围：界面应带来的感觉、信息密度，以及明确要避开的设计取向。
- 语义化颜色角色：颜色名称、功能用途、对比度预期，以及点缀色可出现的位置。
- 排版与间距系统：字体栈、层级、节奏、留白和网格逻辑。
- 组件级规则：按钮、卡片、输入框、导航、表面、动效和响应式行为。
- Prompt 交接指南：让 agent 清楚哪些视觉约束是硬要求，哪些示例只是灵感参考。
为什么这对 Agent 重要
- 当设计意图保存在仓库里，而不是藏在设计师个人品味或先前聊天记录里时，前端质量会更可复现。
- 一个具名风格参考库能让用户通过示例选风格，这通常比从零写抽象设计 brief 更容易。
- 即便只是轻量的本地品牌 stub，只要保留了具名先例和简短视觉指纹，也已经具有操作价值，因为 agent 仍可在不离开仓库的情况下切换 Claude、Vercel、Linear、Notion、Stripe 或 Figma 这类具体风格。
- 持久设计契约降低了重复 prompt 成本，其作用方式和持久 repo 文档降低重复实现说明的作用相似。
- 文字驱动的可视化工件把同样的模式从 UI 风格延伸到了系统表达层：当架构图可以从版本化文本描述生成时，系统结构理解也会变成 agent 可读的控制面，而不再只是仓库外的幻灯片产物。
取舍
- 如果产品 UI 已经演进而文档没人维护，设计控制文档就会和真实产品发生漂移。
- 当大多数品牌细节都位于外部 URL 时，模式目录的价值会高于“完整本地档案”的价值。
- Design token 和文字约束有助于视觉对齐，但仍不能完全替代浏览器 review、截图检查和人类对交互质量的判断。