AI 终于能“读懂”设计稿了！这个 Skill 把 150+ 品牌规范装进 Markdown

你有没有过这种体验：让 AI 做个页面，功能写对了，但 UI 就是不像那么回事？

配色怪怪的，间距时紧时松，字体该粗不粗、该细不细。你说“我要极简风”，它给你做个朴素到简陋的页面；你说“像 Stripe 那样”，它抽象出一个四不像。

核心问题从来不是 AI 不会写代码，而是它不知道你的设计规范长什么样。

直到我看到这个叫 Open Design Skill 的开源项目——它的思路干净利落：把设计系统写成 AI 能直接读懂的 Markdown，扔进项目根目录，Agent 立刻照着做。

它解决了什么问题？

设计师和开发者之间的鸿沟，翻译成本极高。Figma 文件 Agent 读不了，JSON token 太啰嗦，口头描述更是一写就跑偏。

Open Design Skill 的做法是：用 Google Stitch 提出的 DESIGN.md 格式，把品牌视觉规范写成纯文本 Markdown——颜色、字体、间距、组件、甚至设计哲学，全写进一个文件。

Agent 读一遍，就知道这个项目“长什么样”。

150+ 品牌 DESIGN.md，开箱即用

这个 Skill 背后接的是 nexu-io/open-design 的内容库，已经积累了：

• 150+ 品牌 DESIGN.md：Airbnb、Apple、BMW、Claude、Cursor、Figma、Framer、Stripe、Vercel、Linear……覆盖 AI、开发工具、汽车、电商等十多个领域
• 110+ 渲染模板：PPT、落地页、仪表盘、原型、海报
• 130+ 功能 Skill：设计简报、品牌审计、文案、Critique
• 11 条设计元规则：排版、色彩、防 AI 味、无障碍、动画……

光看这个清单就觉得，设计师终于不用反复跟 AI 解释“我们品牌的绿色不是随便绿”。

怎么用？

三步搞定，比写 Dockerfile 还简单：

1. 安装 Skill

npx skills add sugarforever/open-design-skill

支持 Claude Code、Cursor、Codex、Gemini CLI、OpenCode 等主流 Agent 工具。

2. 绑定设计系统
在你的项目根目录创建 .open-design.json，指定要用的品牌风格：

{
  "designSystem": { "slug": "stripe" },
  "skill": { "slug": "html-landing-page" }
}

3. 让 Agent 干活
直接说：“用 Stripe 风格给我写个 SaaS 落地页”，Agent 会自动读取 DESIGN.md，照着规范生成一致的 UI。

不用改任何代码，不用装额外依赖，Agent 自己就能执行完整工作流。

谁适合用？

• 前端开发者：想让 AI 生成的页面跟设计系统一致
• 设计师：把设计语言标准化，让 AI 成为你的“执行助手”
• 独立开发者 / 创业者：快速出高质量原型，不用从头搭设计系统
• 任何被 AI 生成的“AI 味 UI”折磨过的人

我的感受

这个 Skill 最聪明的点，是把“设计规范”这个 traditionally 设计师垄断的知识，翻译成了 LLM 最容易理解的格式——Markdown。

你不需要训练模型，不需要 API key，不需要插件。就是一个 .md 文件，加上一个 Skill 工作流，Agent 立刻从“瞎画界面”变成“按规范出图”。

如果 2026 年你还在跟 AI 生成的随机 UI 较劲，这个 Skill 值得立刻装上。

GitHub: sugarforever/open-design-skill
上游内容库: nexu-io/open-design ⭐ 68k+

GitHub: https://github.com/sugarforever/open-design-skill