让AI照着设计规范生成页面！Google Stitch的DESIGN.md到底是什么神仙操作

做过 AI 生成网页的朋友，有没有遇到过这种崩溃——AI 照着你说的做出来了，但颜色不对、字体别扭、按钮丑得离谱，怎么调都不对味？

问题不在 AI 不够聪明，而是它根本”看不见”你想要的风格。传统方式你要么给 Figma 截图，要么大段文字描述视觉感受，累死。

但现在有个超聪明的思路——让 AI 直接读「设计规范文档」。

Google Stitch 出的新概念：DESIGN.md

Google Stitch 提出了一个叫 DESIGN.md 的概念，本质就是一个 Markdown 文件，里面用纯文本记录一套设计系统的所有关键信息：

• 视觉主题——氛围、调性、密度
• 色彩体系——语义化颜色名 + hex 值 + 功能角色
• 字体规范——家族、层级、字重完整表
• 组件样式——按钮、卡片、输入框、导航，含各种状态
• 布局原则——间距、网格、留白哲学
• 深度与层级——阴影系统、表层层级

AI 读了这个文件，就等于看了完整的设计规范，再让它生成页面，效果完全不一样。

这个 Skill 收录了什么？

Yanx2u/design-skill 收录了一套基于 Stitch 格式的设计规范库，目前包含几十个主流 AI 产品和开发工具的真实 DESIGN.md 文件：

Claude、Cohere、ElevenLabs、Minimax、Mistral AI、Ollama、Cursor、Linear、Expo、Supabase、Vercel、Warp……几乎覆盖了 AI 开发者最常用到的工具。

每个网站目录下都有两个文件：

• DESIGN.md——AI 读的设计规范
• preview.html——人类看的视觉预览（含暗色版）

怎么用？

超级简单，两步搞定：

第一步：从库里复制一个你喜欢的 DESIGN.md 到项目根目录
第二步：告诉 AI agent——「按照这个 DESIGN.md 的风格来构建页面」

然后你就能得到像素级还原设计稿的 AI 生成结果，不再需要反复调样式。

为什么这对设计师和开发者都有价值？

对于设计师：把自己的设计系统写成 DESIGN.md，丢给开发或 AI 使用，告别「实现走偏」的沟通噩梦。

对于开发者：快速拿到一套经过验证的设计规范，不用自己琢磨配色和字体，省大量时间。

对于AI 工程师：让 AI 生成的前端真正达到「可用」级别，而不是还需要大量人工修正。

一个 md 文件，打通设计师→AI→开发者的协作闭环，这个思路真的很妙。

GitHub 链接收好，直接 fork 就能用：https://github.com/Yanx2u/design-skill

GitHub: https://github.com/Yanx2u/design-skill