想让 Claude Code 写出像 Apple 的 UI？给它一份 DESIGN.md

入门进行中

这篇教程做什么

教你把 73 份现成的品牌设计模板（DESIGN.md）喂给 Claude Code，让它写出「看起来不像 demo」的 UI。读完你会知道 DESIGN.md 是什么、为什么对 vibe coding 来说比 Figma 导出更顺手、踩过哪些坑。

你大概为什么需要它

我自己写 vibe coding 项目最痛的是：功能跑通，UI 一看就是 ChatGPT 默认审美——蓝紫色按钮、渐变背景、圆角 12px、emoji 散落各处。干净，但毫无个性。换个 prompt 让它「做得像 Apple 一点」，AI 给你一堆 system-ui 字体配 macOS 灰色窗口，离 apple.com 还差十万八千里。

根因很简单。AI 没真的看过 apple.com。它只读到「Apple 风格」这四个字，剩下全靠脑补。

DESIGN.md 是什么

Google Stitch 提出的格式，一份纯 markdown 文件，描述某个产品的设计系统：颜色 token、字体阶、间距、组件样式、页面节奏。

类比你已经熟悉的 AGENTS.md：

文件给谁读写什么
AGENTS.md编程代理项目怎么 build
DESIGN.md设计代理项目长什么样

把 DESIGN.md 丢进项目根目录，Claude Code 或 Cursor 读到的就是「Action Blue 是 #0066cc、hero-display 是 SF Pro Display 56px / 600 weight / -0.28px tracking、canvas 在 #ffffff 和 #f5f5f7 之间切换」这种能直接落地的参数。

跟 Figma 导出有什么不一样

Figma Token Studio / Variables 导出能给你 JSON、CSS variables、Style Dictionary 那一套。理论上更工程化，实际拿给 AI 用很难顶。

  • 大模型读 markdown 比读嵌套 JSON 顺手很多，token 也省
  • Figma 导出基本只有「是什么」（某个变量等于某个色号）。DESIGN.md 多了一层「为什么」，比如 Action Blue 只用在交互元素，不能当装饰色撒
  • 复制成本几乎是 0：clone 仓库、cp 一个文件、commit，结束

上手：让 Claude Code 复刻 Apple 风格

VoltAgent 维护的 awesome-design-md 仓库里有 73 份现成的，覆盖 Apple、Linear、Stripe、Vercel、Notion、Figma、Cursor、Raycast 这些。

1. 拿一份样板

bash
git clone https://github.com/VoltAgent/awesome-design-md.git
cp awesome-design-md/design-md/apple/DESIGN.md ./your-project/

2. 让 Claude Code 按它生成

在 Claude Code 里发这样一段：

text
基于项目根的 DESIGN.md，给我生成一个产品落地页。
顶部 hero、中部三栏 feature、底部 CTA。
所有颜色、字体、间距严格按 DESIGN.md 走，不要自己想。

3. 看效果，迭代

第一版大约能拿到 70% 的 Apple 感。差的那 30% 通常是这几类：

  • 没做明暗 tile 交替（apple.com 的标志做法是黑白卡片按节奏切，DESIGN.md 里写在 description 段，AI 经常漏读）
  • SF Pro Display 没用足负 tracking（hero 是 -0.28px，AI 经常默认 0，字立刻散开变普通）
  • Action Blue 撒成装饰色了。DESIGN.md 明确「single interactive color」，按钮和链接以外的地方都不该出现，AI 经常拿它点缀图标和分隔线

把这几条贴回去让它修就行。

什么时候不要用

  • 你做的是该品牌的官方产品：这个仓库是参考性质的复刻，商用要看清版权
  • 你已经有自己的设计系统：把现有 token 自己整理成 markdown，效果一样，没必要换
  • 目标 UI 极简到不需要风格定调：纯黑白文档站，丢 DESIGN.md 反而把 AI 带偏

收藏理由

下次你写 vibe coding 项目、UI 不知道怎么定调的时候，回来这一篇就够：选个像的品牌、cp DESIGN.md、按上面那段 prompt 起手。

想让 Claude Code 写出像 Apple 的 UI？给它一份 DESIGN.md | 资讯狗 | Zixungou