sanhuang520-ship-it 中式 DESIGN.md
DESIGN.md 是给 AI 编程工具读的设计系统文档。 放到项目根目录， AI 生成界面时就照着里面的颜色、字体、组件规则来，不用你每次描述一遍。
这个技能提供 8 套中式设计系统，格式与社区通行的 DESIGN.md 一致。
什么时候用
要做中国风网页 / 国风 H5 / 中式品牌页；或者你只是不想让 AI 又生成一个 「紫色渐变 + 圆角卡片」的通用界面。
怎么用
# 1. 挑一套，复制到项目根目录
cp skills/chinese-design-md/design-md/ink/DESIGN.md ./DESIGN.md
# 2. 告诉你的 AI 编程工具
按照项目根目录 DESIGN.md 里的设计规范，实现这个页面
就这两步。Claude Code、Codex、Cursor 都能读。
8 套怎么选
| 主题 | 气质 | 适合 |
|---|---|---|
水墨 ink |
宣纸、墨色层次、大留白 | 长文阅读、文化内容、需要安静的界面 |
青绿 azurite |
石青石绿矿物色、装饰性强 | 文旅、展览、需要贵气的场景 |
宋韵 song |
素雅克制、青瓷灰绿 | 茶饮、书店、高端服务 |
敦煌 dunhuang |
土红石青、斑驳壁画质感 | 文化 IP、叙事型页面 |
朱砂 vermilion |
雅红、暖白底 | 节日、活动页、转化页 |
新中式 neo |
木色暖灰、低饱和 | 家居、生活方式、品牌官网。最百搭 |
竹韵 bamboo |
竹青素白、清爽 | 健康、教育、环保 |
夜宴 night |
深色底 + 暖金。唯一深色 | 影音、夜间模式、高端活动 |
拿不准就用 新中式。
每份 DESIGN.md 里有什么
YAML frontmatter（语义化 color token，AI 直接读）+ 这些章节：
Overview（含出处）· Colors（含逐项对比度实测）· Typography（中文排版规则） · Layout · Elevation · Shapes · Components · Do's and Don'ts · Responsive · Iteration Guide · Known Gaps
⭐ 关键差异：中文排版
这是多数设计系统缺的一块。西文 DESIGN.md 的 Typography 章节讲的是字重、 字距、x-height —— 搬到中文页面上基本不适用。
每份文件里写死了这些：
| 规则 | 值 | 为什么 |
|---|---|---|
| 行高 | 1.75 | 中文字面率高，1.5 会挤 |
| 行宽 | 38em | 中文每行 30–40 字最舒服 |
| 对齐 | left，不用 justify | 中文没有词间空格，两端对齐会拉出难看的字距 |
| 断行 | line-break: strict |
CJK 避头尾：。，、）」 不能出现在行首 |
| 强调 | text-emphasis: dot |
中文不用斜体 —— 系统中文字体没有真正的意大利体 |
| 中英间距 | 加空格 | 「使用 AI 工具」比「使用AI工具」易读 |
而且不依赖任何商业字体，全部用系统自带中文字体——不会出现「设计稿好看、上线糊掉」。
对比度是实测的，不是声称的
每份文件里有一张实测表（用 WCAG 相对亮度公式算的），并且标出了不达标的项：
- 8 套的正文与标题对比度全部通过 AA（9.40:1 – 17.10:1）
song的辅助文字色 4.23:1、主色 2.83:1 未达 AA —— 文件里写明了只能用于色块和大字neo的主色 4.46:1 略低于 AA —— 同样标注了
标出自己不达标的地方，比笼统说一句「全部通过」有用。
这个技能不做的事
- 不做西文设计系统 —— 要 Stripe、Linear 那种风格，去用社区里现成的 74 份
- 不保证「像某个具体品牌」 —— 这 8 套是美学传统的提炼，不是对任何公司视觉的复刻
- 不提供商业字体 —— 只用系统字体，这是刻意的
- 色值不代表传统色的权威标准 —— 传统色在不同文献里本就有出入，这是本设计系统自己的实现
配套
- 8 套主题的真实渲染截图 —— headless Chrome 实跑生成
- 在线切换预览
- 同源的 CSS 实现：
skills/chinese-web-themes/themes.css - 更细的中文排版规则：
skills/chinese-typography/SKILL.md