十万颗星,不到四个月。这是开源项目 awesome-design-md 交出的成绩单。它不是框架,不是工具,只是把73个知名品牌的网站风格,写成AI看得懂的说明书。
过去一年Vibe coding全面爆发,AI已能写出代码满足功能需求,但在视觉设计上,生成的按钮、卡片、配色常像同一模板换皮。这种“能跑但廉价”的落差,正是DESIGN.md想填补的位置。
一份说明书,取代整套设计系统
DESIGN.md是Google Stitch提出的概念:一份用Markdown写成的设计系统文件,AI代理读了就能生成风格一致的界面。传统设计交付需要Figma文件、设计代币(定义颜色、字体、间距的变量系统)、切图、JSON schema,而DESIGN.md主张一个markdown文件就够了。
每份DESIGN.md依Stitch规格固定包含九个区块:视觉主题���氛围、色彩调色盘与语义角色、字体排版规则、组件样式、版面原则、深度与层次、设计护栏与反例、响应式行为,以及给AI代理的提示指南。每个条目附带preview.html与preview-dark.html,一浅一深,像把品牌视觉基因做成即插即用的芯片。
从Stripe紫到任天堂1996
awesome-design-md收录的73份DESIGN.md涵盖广泛品牌光谱:AI阵营有Claude、Mistral、Ollama、xAI、VoltAgent;开发者工具有Cursor、Vercel、Linear、Warp、Raycast;金融与加密圈收了Stripe招牌紫色渐变、Coinbase、币安黄、Kraken、Wise;消费品牌则包括苹果的极简、Nike巨大的Futura全大写字体、Spotify、特斯拉的全屏电影感以及法拉利。
使用方法很简单:把某个网站的DESIGN.md复制到自己项目的根目录,告诉AI代理照着做一个页面,即可生成风格贴合、视觉一致的界面。不过官方强调,这些DESIGN.md是从各家公开网站CSS样式中萃取的公开设计代币,不拥有任何品牌的视觉识别权,仅供AI生成参考。要设计专属品牌视觉意象,仍需更多心力打磨。

