11.8 万 Star。 把 73 家大厂的界面设计全拆成了文档，AI 读完直接照着出页面。
不用 Figma，不用手写 CSS，前端写页面的活儿，正在被一个 Markdown 文件接管。
▲ 73 家大厂的设计系统，全部整理成 AI 能读的 DESIGN.md。
01 它是什么
核心是一个叫 DESIGN.md 的东西。
这是 Google Stitch 提出的一种新玩法。DESIGN.md 就一个 Markdown 文件，里面写着某个网站的设计系统。
配色是什么、字号多大、组件怎么排、间距按什么刻度，全写在这个文件里。
AI 读一遍，就知道这个站该长什么样。
它跟你熟悉的 AGENTS.md 是配套的两个文件：
文件谁读定义什么AGENTS.md编码 agent项目怎么搭DESIGN.md设计 agent界面该长什么样
AGENTS.md 告诉 AI 怎么把项目跑起来，DESIGN.md 负责界面长啥样。
一个管行为，一个管长相，两份都是纯文本，是 LLM 读得最顺的格式，不用解析也不用配置。
1.1 一个文件装下整个设计系统
每个 DESIGN.md 不是空壳，是拆得很细的九段式结构。
我翻了仓库里的几个文件，每个都覆盖这些内容：
• 1. 视觉主题与氛围（调性、密度、设计哲学）
• 2. 配色与角色（每个颜色的语义名 + hex + 用途）
• 3. 字体规则（字族 + 完整字号层级表）
• 4. 组件样式（按钮、卡片、输入框、导航，含各种状态）
• 5. 布局原则（间距刻度、栅格、留白哲学）
• 6. 深度与层级（阴影系统、表面分层）
• 7. 该做和不该做（设计护栏和反例）
• 8. 响应式行为（断点、触控目标、折叠策略）
• 9. agent 提示词指南（快速配色参考 + 现成 prompt）
我拉了 Claude 那个 DESIGN.md，它把 Anthropic 的配色拆得极细。主色是 #cc785c 珊瑚棕，画布 #faf9f5 奶白色，暗面 #181715，文档里还特意写了一句：大部分 AI 品牌用冷蓝配灰，我们故意用暖色显人文感。字体也钉死了，标题用 slab serif 的 Copernicus，正文走人文无衬线。
1.2 跟 AI 出图工具的区别
普通 AI 生图是抽卡，每次结果不一样。DESIGN.md 走的是另一条路——它把设计决策全部量化成 token，AI 生成时照着写，同一套系统反复用，风格稳定不漂移。这跟咱们之前聊的 Easel 卡片系统一个思路：确定性优先，不让模型自由发挥。
02 73 家大厂覆盖到谁
仓库按类目把 73 个品牌分好了。我列几个你熟的：
AI 平台：Claude、Cohere、ElevenLabs、Minimax、Mistral、Ollama、OpenCode、Replicate、Runway、Together AI、xAI
开发者工具：Cursor、Vercel、Warp、Raycast、Expo、Lovable、Superhuman
数据库与运维：ClickHouse、MongoDB、Supabase、Sentry、PostHog、HashiCorp
SaaS 效率工具：Notion、Linear、Intercom、Zapier、Mintlify、Resend、Cal.com
金融科技：Stripe、Coinbase、Revolut、Mastercard、Wise、Binance、Kraken
电商与消费：Airbnb、Nike、Shopify、Starbucks、Meta、Apple、Spotify、Uber、SpaceX
汽车：BMW、Tesla、Ferrari、Lamborghini、Bugatti、Renault
最离谱的是它还整了个 Retro Web 怀旧系列，把 90 年代的网站也扒了出来。1996 年的 Dell、2001 年的 Nintendo.com，丢给 AI 能复现那种复古的老网页质感。
▲ 每个品牌一份 DESIGN.md + 一份 README，点进去就能看完整设计系统。
03 怎么用
把某个品牌的 DESIGN.md 拷到你项目根目录，再跟你的 AI 编码 agent 说一句："照着这个 DESIGN.md 给我做一页。"
它读完配色、字号、组件、布局规则，直接生成符合这套设计语言的 HTML/CSS。每个品牌目录下还带了 preview.html（配色样本、字号标尺、按钮卡片预览），你可以先看长啥样再让 AI 动手。
3.1 挑哪个品牌
我实测过里面几个，给你个直观参考：
• • Claude：奶白底 + 珊瑚色 CTA + 衬线大标题，走温暖人文风，做产品发布页很高级
• • Stripe：深蓝 + 靛蓝渐变，金融感拉满，做支付后台很对味
• • Nike：纯黑白 + 96px 的 Futura 大写标题，做电商落地页冲击力最强
• • Vercel：黑白极简 + Geist 字体，做技术产品页干净利落
3.2 它的边界
得说清楚一件事。DESIGN.md 是描述文档，不是品牌的设计源文件。它把网站公开可见的 CSS 值提炼出来，方便 AI 出"长得像"的页面。License 也写明：不 claim 任何品牌的视觉版权，文档"按现状"提供，没有担保。
所以你想拿 Nike 的全套设计资产去商用，那是另一回事。但用 AI 照着出一张风格一致的 demo 页，这条路径是通的。
写在最后
前端要写页面的时代，正在被"写文档"取代。
过去设计系统住在 Figma 里，得靠人搬。
现在 AI 不再需要你手把手教了——你把"标准答案"丢给它就行。
GitHub：https://github.com/VoltAgent/awesome-design-md
