设计参考索引：给 AI 读的 DESIGN.md，和老牌灵感画廊
这是一份留给我自己的索引，不是评测。改博客样式的时候我把这块摸了一遍，发现能分成清清楚楚的两类：一类是把某个品牌的设计系统抽成一份「给 AI coding agent 读的 Markdown」，另一类是存在很多年的人肉设计灵感画廊。前者是新包装，后者是源头。下面按类别记下来，每条写清楚定位和什么时候用，末尾是我最后给这个博客选的那两个。
先分清两类东西
它们解决的是相邻但不同的问题，别混着找：
- DESIGN.md 目录：产出的是一份规范文件（色彩、字体、间距、组件、以及背后的取舍），直接丢给 Claude Code / Cursor / Codex 这类 agent，让它照着写。回答的是「该照什么风格走」。
- 灵感画廊：产出的是眼睛看的参考，你自己挑，再让人或 AI 去实现。回答的是「有哪些风格可选」。
一句话：前者给菜谱，后者给菜的照片。
一、DESIGN.md 目录（给 AI 读的设计规范）
2025 下半年冒出来的一批，玩法基本一致，差别在体量和是否支持现场生成。
- getdesign.md —— 550+ 个品牌设计系统分析，从 Stripe、Notion、Linear 到 Ferrari、WIRED 都有，还附 Website / Mobile App Starter Kit。取材偏各家对外门面（官网/落地页），所以不少条目带营销站的味道。
- designmd.app —— 562 份 DESIGN.md，用 Markdown + YAML tokens 描述色彩/字体/间距/组件，偏开源库性质。体量比 getdesign 还大。
- DesignMD（designmd.co） —— 又一个品牌 DESIGN.md 目录，定位和 getdesign 高度重合，可以当交叉查证用。
- design.dev 的 DESIGN.md Generator —— ⭐ 不是现成目录，而是给任意网站现场生成一份 DESIGN.md。看到喜欢的站直接喂 URL，比在别人的目录里翻更实用。
- Refero Styles —— 老牌设计参考站 Refero 加的 DESIGN.md 功能，提供真实范例，能看到这类文件到底长什么样。
这些都强调能被 Claude Code / Cursor / Codex / Aider 直接读（通过 AGENTS.md 交叉引用）。它们真正的价值不是「有现成规范可抄」，而是「先定一份规范、再让所有页面遵守」这个习惯。
二、设计灵感画廊（自己挑风格）
DESIGN.md 那批本质是把这类画廊「AI 化」了。想自己挑，源头在这儿。
- Mobbin —— 最大的真实 App / 网页 UI 截图库，按流程和组件归档，找具体交互怎么做时最好用。
- Refero —— 按组件/流程分类的参考库，比纯画廊更结构化。
- Awwwards / siteInspire / Godly / Httpster —— 获奖 / 精选网站画廊，视觉冲击力强，但偏营销站，个人博客直接照抄容易用力过猛。
- Land-book / SaaS Landing Page / Lapa Ninja —— 专收 landing page，做产品页时才用得上。
三、编辑 / 媒体类（最贴合个人博客）
这一类不在任何画廊里，直接看官网本身就行。它们解决的是「大段文字怎么好读、怎么有性格」，而不是「怎么把人转化掉」。
- WIRED —— 报纸大开张的密度、有性格的衬线大标题、mono 眉题、墨蓝链接。
- The Verge —— 酸薄荷 + 紫外光配色、rave 传单式的故事卡片，更躁。
- NYT —— 长文排版的教科书。
- Notion —— 暖色极简、衬线标题、柔和表面。
我最后选了什么
给这个博客做选择时，判断标准是「能顺着现有底子进化，而不是推翻重来」。结论是两个，各管一层：
- WIRED 管气质 —— 只借它的排版与层级（有性格的衬线大标题 + mono 眉题），配色一个字不动。中文博客要做出这个效果，关键不是换英文字体，而是给标题引入一款衬线 CJK（宋体），否则中文只会从一个黑体换成另一个黑体。
- Mintlify 管读长文 —— 绿色强调 + 为阅读优化，字阶和 callout 的思路可以直接用在文章页。
明确避开的：Claude（陶土色），因为这个站当初就是为了摆脱「AI 味」才换成松绿的；以及所有暗色/霓虹/产品风（Linear、Cursor、Vercel、Stripe 紫），跟温暖的编辑气质冲突。
还有一条现实判断：我一个人 + 用 Claude Code 迭代一个博客，其实是最不需要 DESIGN.md 目录的情况——「看参考、然后应用」这一步本来就能一次做完。真正值得从它们那儿借的是习惯，不是工具。