设计风格不用猜，DESIGN.md 直接把答案喂给 AI

做设计最烦的是什么？不是画不出好页面，是你辛辛苦苦调了一套视觉系统，AI 生成的界面跑偏到外婆家。颜色对不上、字体不统一、间距乱飞——你越看越怀疑自己是不是在做两份设计。

Google Stitch 最近推出了 DESIGN.md，一种纯 Markdown 的设计规范文件，直接把「网站应该长什么样」写成 LLM 能读懂的文本。有了它，Claude Code、Cursor、Copilot、甚至 Kimi 都能在你的项目里保持一致的视觉风格。

这个 Skill 干了什么？

Yanx2u/design-skill 收集了全球热门网站的 DESIGN.md，包括 Claude、Cohere、ElevenLabs、Mistral、Minimax 等品牌的视觉系统。每个文件都遵循 Google Stitch 的规范，包含 9 大模块：

• 色彩系统：主色、功能色、语义化命名
• 字体层级：完整字体家族 + 字号表
• 组件样式：按钮、卡片、输入框的状态设计
• 布局原则：间距 scale、网格、留白哲学
• 深度与阴影：surface 层级体系
• 响应式行为：断点、触控目标、折叠策略

怎么用？

三步走，零学习成本：

1. 把对应品牌的 DESIGN.md 复制到你的项目根目录
2. 告诉 AI 编码助手：「用这个 DESIGN.md 的风格帮我建页面」
3. 等待输出——你会发现颜色、字体、间距基本都对得上

这个 Skill 不需要 Figma、不需要 JSON 配置、不需要安装任何插件。它就是个 Markdown 文件，扔进项目里就能被任何 AI 编码工具直接读取。

谁适合用？

• 设计师 + 开发者协作：确保设计意图 100% 传达给代码
• 多项目风格统一：同一个 DESIGN.md 复用所有项目
• 品牌风格迁移：把一个网站的视觉系统快速复用到另一个项目

最香的是，这个 Skill 还自带 preview 页面——你不需要启动项目就能看到完整的设计系统预览，包括亮色和暗色两套。

我的看法

AI 生成 UI 的最大问题从来不是能力，而是「一致性」。这个 Skill 用最轻的方式解决了最痛的问题。GitHub 上已经有 58+ 个 DESIGN.md 实例，覆盖了从 AI 公司到 SaaS 平台的各种风格。如果你是设计师或前端，强烈建议把这个 Skill 纳入你的工具链。

GitHub 地址：https://github.com/Yanx2u/design-skill

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