← 回中文 AI Skills 库

8 套中式 DESIGN.md

DESIGN.md 是给 AI 编程工具读的设计系统文档。丢进项目根目录, AI 生成界面时就照着里面的规则来,不用你每次描述一遍。

为什么要专门做中式的?
社区通行的 DESIGN.md 生态里,几十份大厂设计系统, 没有一份处理中文排版——它们的 Typography 章节讲的是字重、字距、x-height, 搬到中文页面上基本不适用。而且很多依赖商业字体(比如 Stripe 用的 Sohne),你本机没有就废了。
✅ 这 8 套不依赖任何商业字体,全用系统自带中文字体; 每套的对比度都是用 WCAG 公式实算的,包括标出不达标的项——下面卡片里能看到。
怎么用
  1. 下面挑一套,点「复制这份 DESIGN.md」
  2. 在项目根目录新建 DESIGN.md,粘贴进去
  3. 告诉你的 AI 编程工具(Claude Code / Codex / Cursor 都行):
按照项目根目录 DESIGN.md 里的设计规范,实现这个页面
水墨

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
水墨ink

长文阅读、文化内容、需要安静的界面

正文 / 底10.86:1
标题 / 底15.94:1
辅助 / 底5.06:1
主色 / 底13.06:1
新中式

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
新中式neo

家居、生活方式、品牌官网 · 最百搭

正文 / 底10.44:1
标题 / 底15.63:1
辅助 / 底4.87:1
主色 / 底4.46:1⚠️

⚠️ 主色 4.46:1 未达 AA —— 只用于色块、边框、24px 以上大字,不要写正文

宋韵

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
宋韵song

茶饮、书店、高端服务

正文 / 底9.61:1
标题 / 底14.63:1
辅助 / 底4.23:1⚠️
主色 / 底2.83:1⚠️

⚠️ 辅助文字 4.23:1 · 主色 2.83:1 未达 AA —— 只用于色块、边框、24px 以上大字,不要写正文

青绿

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
青绿azurite

文旅、展览、需要贵气的场景

正文 / 底10.32:1
标题 / 底14.69:1
辅助 / 底4.96:1
主色 / 底5.65:1
竹韵

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
竹韵bamboo

健康、教育、环保

正文 / 底10.89:1
标题 / 底15.45:1
辅助 / 底4.88:1
主色 / 底4.54:1
朱砂

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
朱砂vermilion

节日、活动页、转化页

正文 / 底12.11:1
标题 / 底17.10:1
辅助 / 底5.73:1
主色 / 底5.57:1
敦煌

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
敦煌dunhuang

文化 IP、叙事型页面

正文 / 底9.40:1
标题 / 底14.06:1
辅助 / 底4.72:1
主色 / 底4.76:1
夜宴

中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。

辅助文字 · 时间戳
主按钮 次按钮
夜宴night

影音、夜间模式 · 唯一深色

正文 / 底12.24:1
标题 / 底15.47:1
辅助 / 底5.51:1
主色 / 底7.59:1

中文排版规则

这一节是 8 套共用的,也是和西文设计系统差别最大的地方。

规则为什么
行高line-height: 1.75 中文字面率高、没有 x-height 起伏,行高比西文需要更大。1.5 会挤
行宽max-width: 38em 中文每行 30–40 字最舒服。西文常用的 65ch 换算成中文太长
对齐text-align: left 不要用 justify。中文没有词间空格,两端对齐会拉出难看的字距
断行line-break: strict CJK 避头尾:。,、)」不出现在行首,(「不出现在行尾
强调text-emphasis: dot 中文不用斜体。宋体黑体没有真正的意大利体,浏览器做机械倾斜很丑,用着重号
中英间距加一个空格 「使用 AI 工具」比「使用AI工具」易读——这叫盘古之白
字体栈PingFang SCMicrosoft YaHeiNoto Sans CJK SC 分别覆盖 macOS/iOS、Windows、Linux/Android。缺一个就有一批人看到系统默认字体

老实说几句

色值取自本项目自己的 CSS 实现,不代表任何传统色的权威标准——传统色在不同文献里本就有出入。
这 8 套是美学传统的提炼,不是对任何公司视觉的复刻
没有覆盖数据可视化配色和繁体中文场景(台标/港标字形与断行规则略有不同)。
深色只有「夜宴」一套,其余 7 套是浅色系统。