什么是 DESIGN.md、应该怎么选风格、怎么把它变成适合中文产品的提示词。
awesome-design-md-cn
中文 DESIGN.md 导航站
Guide
别先模仿品牌。先判断这套设计语言适不适合你的页面。
`DESIGN.md` 的作用,是把颜色、字体、组件和留白节奏变成 AI 能稳定执行的约束。用得对,它能帮你快速对齐风格;用得不对,只会做出一堆“像某品牌但不好用”的页面。
先选页面类型
再看预览
最后组织提示词
先按页面类型选
官网、后台、文档站、营销页分开判断。
先看预览再使用
先确认标题密度、按钮气质和组件节奏。
把中文约束写清楚
明确标题长度、信息密度和文案语气。
DESIGN.md 是什么
它是给 AI 理解设计系统的一份文本协议,不是组件库,也不是视觉稿。它的重点是把视觉规则和界面气质说清楚。
它不是什么
它不能替代业务判断、交互流程设计和信息架构设计。如果这些没想清楚,再好的设计系统也救不了页面。
推荐流程
按这个顺序走,输出会稳定很多。
先选风格范围
开发工具优先看 Vercel、Cursor、Warp。金融科技优先看 Stripe、Wise、Revolut。协作工具优先看 Notion、Linear、Miro。
再看是否适合中文
重点看长标题是否能承受、模块是否太碎、正文行高是否足够、按钮文案会不会溢出。
最后组织提示词
写清楚页面类型、目标用户、中文文案密度和希望保留的视觉特征,不要只说“做成某品牌风格”。
可直接使用的提示词框架
把里面的品牌和页面类型替换掉就能直接用。
参考 DESIGN.md 中定义的设计语言,为我生成一个中文产品页面。保留这套风格的配色角色、字重层级、按钮和卡片样式、留白节奏,同时把标题长度、正文排版、信息密度和表单尺寸调整为适合中文阅读的形式。页面类型是:________。目标用户是:________。重点强调:________。
中文落地时常见问题
- 中文标题更长,原设计里的首屏留白可能不够。
- 正文信息更密,行高和卡片间距需要重算。
- 表格、表单、弹窗里的字段名称通常更长。
- 金额、时间、手机号、地址格式需要按中国用户习惯处理。
最常见的误用
- 只学颜色,不学排版和节奏。
- 只说“像某品牌”,不说页面目标。
- 不先看预览,直接把 DESIGN.md 扔给 AI。
- 把营销页风格直接套到后台和数据台。