Appearance
awesome-design-md
是什么
一个收录了 60+ 知名网站完整设计系统的工具包。每个网站提供一份 DESIGN.md 文件，包含配色方案、字体规范、间距系统、组件样式等全套设计规范，格式统一为 Google Stitch 标准，任何 AI 都能直接理解和执行。
- 收录数量： 60+ 网站
- 格式： Google Stitch DESIGN.md
- 用途： 让 AI 一键复刻顶级网站的视觉风格
解决啥
想做类似 Linear / Stripe / Vercel 的设计风格，但：
- 设计师不在 / 设计稿不开放
- 手动抄颜色和间距费时间
- 口头描述 AI 理解不一致，生成结果风格漂移
awesome-design-md 把这些大厂的设计系统整理成机器可读的规范文档，扔给 AI 就能复刻出风格一致的页面。
怎么跑
Step 1：查看所有可用设计系统
bash
ls ~/.openclaw/workspace/skills/awesome-design-md/design-md/
Step 2：查看某个网站的设计规范
bash
cat ~/.openclaw/workspace/skills/awesome-design-md/design-md/linear.app/DESIGN.md
Step 3：复制到项目根目录
bash
cp ~/.openclaw/workspace/skills/awesome-design-md/design-md/linear.app/DESIGN.md ./
好在哪
| 维度 | 优势 |
|---|---|
| 覆盖广 | 60+ 网站，包括 AI、开发者工具、金融科技、汽车等 |
| 格式统一 | Google Stitch 标准，AI 理解一致 |
| 内容完整 | 配色 + 字体 + 间距 + 圆角 + 阴影 + 组件样式 |
| 开箱即用 | 已整理成 DESIGN.md，复制即用 |
| 免费 | Clawhub 上的 Skill，完全免费 |
收录代表网站：
| 类型 | 网站 |
|---|---|
| AI / 科技 | Claude, Cohere, ElevenLabs, MiniMax, Mistral |
| 开发者工具 | Vercel, Supabase, Sentry, Raycast, ExPO |
| 设计工具 | Figma, Framer, Webflow, Notion, Miro |
| 金融科技 | Stripe, Coinbase, Revolut, Wise |
| 汽车 | Tesla, BMW, Ferrari, Lamborghini |
| 品牌 | Apple, Airbnb, Spotify, Uber, SpaceX |
怎么用
场景 1：参考风格做新页面
把 linear.app/DESIGN.md 复制到项目根目录，然后：
"请根据 DESIGN.md 中的设计系统，创建一个类似 Linear 风格的页面"
场景 2：统一项目视觉风格
把 stripe/DESIGN.md 里的配色变量导入项目，整个站风格就变了。
场景 3：AI 生成后对照规范微调
AI 生成的结果对照 DESIGN.md 逐项修正，确保符合原设计系统。