awesome-design-md-cn
中文 DESIGN.md 导航站
Guide

别先模仿品牌。先判断这套设计语言适不适合你的页面。

`DESIGN.md` 的作用,是把颜色、字体、组件和留白节奏变成 AI 能稳定执行的约束。用得对,它能帮你快速对齐风格;用得不对,只会做出一堆“像某品牌但不好用”的页面。

先选页面类型 再看预览 最后组织提示词
这页回答三个问题

什么是 DESIGN.md、应该怎么选风格、怎么把它变成适合中文产品的提示词。

1

先按页面类型选

官网、后台、文档站、营销页分开判断。

2

先看预览再使用

先确认标题密度、按钮气质和组件节奏。

3

把中文约束写清楚

明确标题长度、信息密度和文案语气。

DESIGN.md 是什么

它是给 AI 理解设计系统的一份文本协议,不是组件库,也不是视觉稿。它的重点是把视觉规则和界面气质说清楚。

它不是什么

它不能替代业务判断、交互流程设计和信息架构设计。如果这些没想清楚,再好的设计系统也救不了页面。

推荐流程

按这个顺序走,输出会稳定很多。

1

先选风格范围

开发工具优先看 Vercel、Cursor、Warp。金融科技优先看 Stripe、Wise、Revolut。协作工具优先看 Notion、Linear、Miro。

2

再看是否适合中文

重点看长标题是否能承受、模块是否太碎、正文行高是否足够、按钮文案会不会溢出。

3

最后组织提示词

写清楚页面类型、目标用户、中文文案密度和希望保留的视觉特征,不要只说“做成某品牌风格”。

可直接使用的提示词框架

把里面的品牌和页面类型替换掉就能直接用。

参考 DESIGN.md 中定义的设计语言,为我生成一个中文产品页面。保留这套风格的配色角色、字重层级、按钮和卡片样式、留白节奏,同时把标题长度、正文排版、信息密度和表单尺寸调整为适合中文阅读的形式。页面类型是:________。目标用户是:________。重点强调:________。

中文落地时常见问题

  • 中文标题更长,原设计里的首屏留白可能不够。
  • 正文信息更密,行高和卡片间距需要重算。
  • 表格、表单、弹窗里的字段名称通常更长。
  • 金额、时间、手机号、地址格式需要按中国用户习惯处理。

最常见的误用

  • 只学颜色,不学排版和节奏。
  • 只说“像某品牌”,不说页面目标。
  • 不先看预览,直接把 DESIGN.md 扔给 AI。
  • 把营销页风格直接套到后台和数据台。