中式 DESIGN.md 设计系统。当用户要"中国风网页""国风页面""中式设计系统""给项目定个中式风格""DESIGN.md""让 AI 按设计规范生成界面""中文网页排版规范"时使用。提供 8 套可直接丢进项目根目录的 DESIGN.md，AI 读了就按这套规范生成界面。
含西文设计系统普遍缺失的中文排版规则。
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
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 都能读。
| 主题 | 气质 | 适合 |
|---|---|---|
水墨 ink | 宣纸、墨色层次、大留白 | 长文阅读、文化内容、需要安静的界面 |
青绿 azurite | 石青石绿矿物色、装饰性强 | 文旅、展览、需要贵气的场景 |
宋韵 song | 素雅克制、青瓷灰绿 | 茶饮、书店、高端服务 |
敦煌 dunhuang | 土红石青、斑驳壁画质感 | 文化 IP、叙事型页面 |
朱砂 vermilion | 雅红、暖白底 | 节日、活动页、转化页 |
新中式 neo | 木色暖灰、低饱和 | 家居、生活方式、品牌官网。最百搭 |
竹韵 bamboo | 竹青素白、清爽 | 健康、教育、环保 |
夜宴 night | 深色底 + 暖金。唯一深色 | 影音、夜间模式、高端活动 |
拿不准就用 新中式。
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 相对亮度公式算的），并且标出了不达标的项：
song 的辅助文字色 4.23:1、主色 2.83:1 未达 AA —— 文件里写明了只能用于色块和大字neo 的主色 4.46:1 略低于 AA —— 同样标注了标出自己不达标的地方，比笼统说一句「全部通过」有用。
skills/chinese-web-themes/themes.cssskills/chinese-typography/SKILL.mdNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
用 AI 系统学习任何东西的教练。当用户要"学 XX""怎么入门""帮我制定学习计划""我想搞懂 XX""考证/备考""复习"时使用。不是直接讲答案，而是带着走完整的学习循环：定目标→输入→主动回忆→输出→纠错→间隔复习→项目交付。
The English summary is being prepared. Showing the original description.
中文拆书与读书笔记助手。当用户要"拆书""读书笔记""这本书讲什么""帮我读这本书""做读书卡片""写书评""整理一本书的框架"时使用。重点是把书变成能用的东西，不是复述目录。
The English summary is being prepared. Showing the original description.
中文记账与账目整理助手。当用户要"记账""整理流水""做收支表""对账""分类消费""做预算""看看钱花哪了"时使用。只做数据整理与呈现，不提供税务筹划或投资建议。
The English summary is being prepared. Showing the original description.
生成中国中小学教案与配套材料。当用户要"备课""写教案""设计一节课""做课件大纲""出分层作业""写说课稿""评课"时使用。覆盖语文/数学/英语/科学等学科，小学到高中；先确认学段、教材版本与适用课程标准，再按学科核心素养、可观察任务和评价证据组织目标。
The English summary is being prepared. Showing the original description.
中文排版规范助手。当用户要"排版""中文网页样式""文章排版""公众号排版""PDF/Word 排版""字体怎么选""中英混排""为什么我的中文网页很丑"时使用。处理中英间距、标点、行高、字体栈、CJK 断行等中文特有问题，输出可直接用的 CSS 或排版建议。
The English summary is being prepared. Showing the original description.
中式网页主题库。当用户要"中国风网页""国风网站样式""古风博客主题""中式配色 CSS""水墨风页面""新中式网页""给网站换个中国风皮肤"时使用。提供 8 套可直接引入的 CSS 主题，内置中文排版规范。
The English summary is being prepared. Showing the original description.