SUPER-DESIGN：给AI编程Agent装上设计质量门卫，禁止硬编码颜色魔法数字

每次让 AI 帮你写前端代码，结果出来的界面颜色全靠蒙、间距随手写、无障碍更是不存在的？

这个问题不只是你的——它是所有 AI 写 UI 时的通病。

SUPER-DESIGN 就是来解决这个的。

这是一个专门给 AI 编程 Agent 装上的”设计质量门卫”，核心理念很简单：让 AI 永远从你的 DESIGN.md 设计规范出发写代码，禁止硬编码颜色、禁止魔法数字、禁止无状态组件。

它是怎么工作的？

第一步，SUPER-DESIGN 会读取你项目里的 DESIGN.md——这是一个包含颜色 token、字体、排版、间距、组件状态的完整设计系统文件。如果你的项目里还没有，它可以从 54 个真实品牌（Linear、Vercel、Stripe、Cursor……）的设计规范里直接引用一个作为起点，或者上传一张截图让它自动提取设计系统。

第二步，AI 写的每一行 UI 代码都会被 PostToolUse Hook 扫描：颜色必须是 token（--color-primary），不能是 #hex；间距必须是设计系统里的刻度，不能随手写 padding: 17px；按钮必须覆盖 hover、focus-visible、active、disabled、loading 所有状态；任何组件超过 300 行代码直接报错。

第三步，内置的 14 个自动化脚本负责更专业的质量检查：WCAG 2.2 AA 对比度验证、组件状态矩阵覆盖检测、截图转代码的多轮提取流程、可视化回归测试……

用 SUPER-DESIGN 之后的工作流是这样的：

你的品牌规范 → DESIGN.md → SUPER-DESIGN 技能 → AI 输出符合规范的 UI 代码

听起来复杂，实际装起来一行命令搞定：

/plugin marketplace add Eldergenix/SUPER-DESIGN
/plugin install super-design@super-design

或者用 npx：

npx super-design --project

支持 Claude Code、Cursor、Codex、Copilot、Gemini、Windsurf 等主流 AI 编程工具。

GitHub 上有 54 个真实品牌的 DESIGN.md 提取文件可以直接用，Linear.app 的 Dashboard 重建就是用这个 Skill 从零完成的，Live Demo 可以直接看效果。

说实话，这个 Skill 把”AI 生成 UI”这件事从”能跑就行”拉到了”可以上生产”的级别——对于设计师和前端开发者来说，是个值得试试的工具。

GitHub：https://github.com/Eldergenix/SUPER-DESIGN

GitHub: https://github.com/Eldergenix/SUPER-DESIGN