awesome-design-setup

DESIGN.md 是专为 AI coding agent 设计的纯 Markdown 设计系统规格文件。awesome-design-md 仓库收录了 58 个知名品牌的预制 DESIGN.md，放入项目根目录后，AI agent 即可在构建 UI 组件时直接参考。

工作流程

第一步 — 询问风格方向

先问用户想要哪种感觉，提供以下选项：

你想要哪种设计风格？
(A) 极简 / 技术感 — 深色背景、等宽字体、高密度信息（如 Linear、Vercel、Warp）
(B) 温暖 / 编辑感 — 暖色调、阅读优先、舒适留白（如 Claude、Notion、Superhuman）
(C) 专业 / 金融感 — 可信赖、俐落、严肃（如 Stripe、Coinbase、IBM）
(D) 奢华 / 高端感 — 暗色系、强对比、精致细节（如 Ferrari、Apple、Tesla）
(E) 缤纷 / 产品感 — 高饱和色彩、活泼、强品牌色（如 Figma、Miro、Spotify）
(F) 设计师感 — 精致排版、动态感、创意优先（如 Framer、Clay、Airbnb）
(G) 开发者工具感 — 功能导向、数据密集、深色 IDE 风（如 Supabase、Sentry、PostHog）
(H) 让我自己浏览全部品牌

用户选择后：

• 选 A–G：读取 references/brands.md，筛选出该风格标签对应的所有品牌列出，供用户选择
• 选 H：读取 references/brands.md，按原始分类列出全部 58 个品牌

第二步 — 确认保存目录

询问文件保存位置，默认为当前项目根目录（.）。用户说"就这里"或未指定时，使用 .。

第三步 — 下载 DESIGN.md

使用下载脚本：

bash /Users/wenjia/.claude/skills/awesome-design-setup/scripts/fetch_design.sh <path-key> <output-dir>

<path-key> 从 references/brands.md 的「路径键」列获取。

或直接使用 curl：

curl -fsSL -o <output-dir>/DESIGN.md \
  https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<path-key>/DESIGN.md

第四步 — 确认完成并告知使用方式

下载成功后确认文件位置，并告知用户：

"DESIGN.md 已就绪。构建 UI 组件时，告诉我：「参考 DESIGN.md 构建 [组件名称]」，我会自动套用该设计系统。"

注意事项

• 每个项目使用一个 DESIGN.md 是标准用法。
• 需要对比两种风格时，下载到临时文件（如 DESIGN.linear.md、DESIGN.stripe.md）供用户比较后再确定。
• 所有文件遵循 MIT 协议，可提交到仓库。
• 该仓库不会随品牌更新设计系统而自动同步，视为稳定快照使用。