68.4k Star的DESIGN.md仓库：AI写前端，终于不靠"感觉"了

原文链接：https://mp.weixin.qq.com/s/GL3srkhMjTogn5GjarjPQg 来源：代码边界 | 2026-05-01

摘要

awesome-design-md — 68.4k Star，收集了 Claude/Cohere/Vercel/Linear/Stripe/Apple/Tesla 等大量真实品牌设计系统的 DESIGN.md 文件。核心逻辑：AGENTS.md 告诉 AI"项目怎么做"，DESIGN.md 告诉 AI"项目长什么样"。把模糊的"高级感"、"SaaS 官网风"拆成 AI 能读懂的 Markdown 规则，让 AI 写 UI 从"凭感觉生成"进入"遵守设计约束"。

核心痛点

AI 写前端的真实困境：结构能跑、组件齐全，但视觉总是差口气——颜色不统一、间距不稳定、圆角随意、字体层级混乱、组件状态不完整。AI 会写页面，但不一定懂设计系统。

DESIGN.md 是什么

一份给 AI Agent 看的"设计系统说明书"——不是 Figma 文件，不是 JSON Schema，就是普通 Markdown。

每份文件包含 8 个核心维度：

• Visual Theme — 视觉氛围
• Color Palette — 颜色体系
• Typography — 字体层级
• Component Stylings — 组件样式
• Layout Principles — 布局原则
• Do's and Don'ts — 设计禁忌
• Responsive Behavior — 响应式行为
• Agent Prompt Guide — AI 提示指南

覆盖的品牌/产品

类别	代表品牌
AI/LLM 平台	Claude、Cohere、ElevenLabs、Mistral、Ollama、Replicate、xAI
开发者工具/IDE	Cursor、Expo、Lovable、Raycast、Vercel、Warp
后端/数据库/DevOps	ClickHouse、MongoDB、PostHog、Sentry、Supabase
SaaS/效率工具	Linear、Notion、Resend、Zapier、Cal.com
设计/创意	Figma、Framer、Miro、Webflow、Airtable
金融科技	Stripe、Coinbase、Binance、Wise、Revolut
消费品牌	Airbnb、Nike、Shopify、Meta、Spotify
硬件/汽车	Apple、NVIDIA、Tesla、BMW、Ferrari、Lamborghini

使用方式

1. 选一个喜欢的品牌风格
2. 把对应的 DESIGN.md 复制到项目根目录
3. 告诉 Claude Code/Cursor：按这个 DESIGN.md 生成页面

不再每次重新解释"什么叫高级感"，规则已写在文件里，AI 持续基于规则生成、修改、迭代。

背后趋势：Vibe Design

从 Vibe Coding（自然语言写代码）进入 Vibe Design（告诉 AI 呈现什么样的视觉语言）。

• 前端：减少"反复调样式"时间
• 独立开发者：快速提升产品页面专业感
• 团队：DESIGN.md 成为 AI 协作中的设计边界，不同人/不同 Agent 生成的页面保持一致

核心观点

AI 写前端的下一步，可能不是"生成更多代码"，而是"生成更像产品的界面"。awesome-design-md 把设计风格从模糊感觉变成了 AI 能读取、能执行的 Markdown 规则。