【免费下载链接】qiaomu-design偏执型设计顾问反 AI 味设计 风格试衣间 58 站设计系统库的 Claude Code Skill | Opinionated design advisor for Claude Code: anti-generic UI, style fitting room, 58 real-site design systems.项目地址https://gitcode.com/gh_mirrors/qi/qiaomu-design点击查看免费下载qiaomu-design是一个面向 Claude Code 的偏执型设计顾问 Skill反 AI 味设计、四方向风格试衣间、58 站设计系统库。其中最能被新手直接复用的就是它内置的中文排版规范——把盘古之白、系统字体栈、装饰字体子集化、全角标点纪律这些老设计师凭手感掌握的细节全部写成了可执行的检查规则。本文用一份完整指南带你一次看懂中文界面排版的所有业余感来源。为什么中文界面一眼显得业余英文排版规则直接搬到中文界面上几乎是所有业余感的源头。最常见的 5 个信号症状真正原因中文挤在英文和数字里缺少盘古之白中西文间距正文读起来喘不过气行高沿用了英文的 1.4–1.6标题加粗后发虚、发毛中文字体只有 400/700bold触发伪合成中文被拉成斜体中文字体没有斜体字形强制倾斜笔画变形首屏加载 5–20MB 的 CJK 字体没有对装饰中文字体做子集化qiaomu-design 生成的中文落地页案例就是这套规范的直接产物大标题用系统字体栈的粗重对比而不是硬塞一个几 MB 的中文 webfont字体加载纪律系统字体栈是第一硬规则qiaomu-design 的第一条硬规则中文正文/UI 一律用系统字体栈。中文字体单文件 5–20MB用户机器上大概率没有 ZCOOL 系列字体走 CDN 会严重拖慢首屏。默认写法chinese-typography.md#L12-L17font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC, sans-serif;零体积、渲染最佳。中文界面的个性不靠堆字体而是靠西文/数字展示字体体积小可随意换、中文字重与字号对比、排版结构、色彩。盘古之白看不见的专业感分割线盘古之白指中文与西文、数字之间加空格的规范来源见 chinese-typography.md#L58-L63中文与英文之间在 Lumina 上使用 SDK中文与数字之间共 500 条记录数字与单位之间20 TB但90°、15%这种不加空格全角标点前后不加空格下面这张电商详情页就是数字排版的示范价格¥1,280、折扣-24%、评分4.9 分 (127 条评价)数字用半角、折扣不加空格、与中文之间留白自然——没有任何一处拥挤行高、字距、每行字数给密集笔画留呼吸中文笔画密度远高于英文排版参数必须整体放宽chinese-typography.md#L48-L57项推荐值说明行高1.5–1.75比英文的 1.4–1.6 更大正文字号Web ≥ 14px高密度阅读用 16px来自 Ant Design / Apple HIG字距正文letter-spacing: 0大标题可 0.05em禁负字距中文挤压会糊每行字数桌面 30–40 字移动 18–25 字max-width约36em移动端尤其容易犯每行挤 30 字的错误这张冥想助眠 App 案例保持了短行距、宽行高的移动端节奏字重陷阱700 可能是假粗体多数中文字体只有 400 / 700 两个字重中间字重是渲染引擎伪合成效果发虚苹方甚至有 Ultralight–Semibold 却没有 Bold写font-weight: 700实际落到 600chinese-typography.md#L41-L45。规范做法中文正文 400标题/强调用 500 或 600不写bold层级主要靠字号颜色拉开字重只做辅助。装饰中文字体子集化唯一被允许的例外只有两种场景可以用装饰中文字体创意展示页活动页/品牌 Hero/海报式页面的标题短语或用户明确要求的书法/复古/手写气质。且必须同时满足四个条件chinese-typography.md#L21-L29只用于标题——正文/UI 永远系统栈用 Google Fonts 的text参数子集化只加载标题用到的字符font-display: swap系统栈 fallbacklink hrefhttps://fonts.googleapis.com/css2?familyMaShanZhengtext每场会议都值得铭记displayswap relstylesheet注意思源黑体/宋体Noto Sans/Serif SC全量引入也算违规——同样是几 MB 级别标题需要时同样走子集化。可选的装饰字体清单Noto Serif SC典雅书卷、ZCOOL XiaoWei轻盈时尚、ZCOOL QingKe HuangYou圆润温暖、ZCOOL KuaiLe活泼跳动、Ma Shan Zheng毛笔楷书、Long Cang随性手写、Zhi Mang Xing洒脱行书。这个数据叙事页的衬线大标题速溶之外就是典型的创意场景 子集化装饰字体用法——字体只服务标题短语正文全部回到系统栈标点与斜体没人注意、但人人能感知的纪律中文句子用全角标点。不夹半角破折号——占两字宽不拆行省略号……同理标点不叠用禁止「」中文禁斜体——强调只用字重/颜色/字号下划线只留给链接暗色页中文正文的对比度标准更高亮色页中性文字用透明度写法rgba(0,0,0,.88)主文 /.65次文 /.25禁用暗色页正文不用纯白用rgba(255,255,255,.85)降低眩光中文笔画在低对比暗底上损失更大暗色正文对比度按7:1AAA设防而不是英文页常用的 4.5:1qiaomu-design 如何自动守住这些细节以上规则不是建议而是交付门禁。每次涉及中文页面qiaomu-design 都会读取 chinese-typography.md并在交付前强制执行 preflight.md 的 D2 中文页追加项中文正文/UI 是系统字体栈装饰中文字体只出现在标题且已text子集化中文行高 ≥ 1.5正文 ≥ 14px无负字距中西文之间、中文与数字之间有空格数字与单位间有空格°、% 除外全角标点、无斜体、无叠用标点中文字重只用 400/500/600无伪 bold 发虚暗色页正文rgba(255,255,255,.85)对比度 ≥ 7:1路由表里还明确写着中文界面中文排版优先于通用字体偏好SKILL.md也就是说即使你在其他配置里写了英文字体偏好只要页面含中文这套规范自动优先。结语专业感 一条一条执行的小规则中文排版的业余感从来不是单一错误而是字体栈、行高、盘古之白、字重、标点、暗色对比度这些细节的集体失守。把这些规则交给 qiaomu-design 的规范库与 preflight 门禁去兜底你只需要专注内容本身。赞分享【免费下载链接】qiaomu-design偏执型设计顾问反 AI 味设计 风格试衣间 58 站设计系统库的 Claude Code Skill | Opinionated design advisor for Claude Code: anti-generic UI, style fitting room, 58 real-site design systems.项目地址https://gitcode.com/gh_mirrors/qi/qiaomu-design点击查看免费下载相关推荐为什么你的网站需要 pangu.js盘古之白让排版更专业为什么你的网站需要 pangu.js盘古之白让排版更专业 还在为网站中文排版不美观而烦恼吗pangu.js 是一个专业的 JavaScript 文本排版优化前端CLI为什么霞鹜文楷成为中文排版的首选字体为什么霞鹜文楷成为中文排版的首选字体 在数字化阅读时代一款优秀的中文字体能够显著提升阅读体验。霞鹜文楷LXGW WenKai作为完全免费的开源字体将传设计系统为什么这款开源中文字体能重新定义中文排版美学为什么这款开源中文字体能重新定义中文排版美学 霞鹜文楷LXGW WenKai 是一款基于日本FONTWORKS公司开源字体Klee One衍生的非专业开源设计系统上一篇GetQzonehistory扫码一次QQ 空间全部历史说说导出到本地 Excel下一篇高效实用的开源视频增强完全指南AI智能提升画质与帧率创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/5 3:35:16 · 阅读 1.2k 中文界面为什么总显得排版很业余？qiaomu-design中文排版完全指南：从盘古之白到装饰字体子集化
【免费下载链接】qiaomu-design偏执型设计顾问反 AI 味设计 风格试衣间 58 站设计系统库的 Claude Code Skill | Opinionated design advisor for Claude Code: anti-generic UI, style fitting room, 58 real-site design systems.项目地址https://gitcode.com/gh_mirrors/qi/qiaomu-design点击查看免费下载qiaomu-design是一个面向 Claude Code 的偏执型设计顾问 Skill反 AI 味设计、四方向风格试衣间、58 站设计系统库。其中最能被新手直接复用的就是它内置的中文排版规范——把盘古之白、系统字体栈、装饰字体子集化、全角标点纪律这些老设计师凭手感掌握的细节全部写成了可执行的检查规则。本文用一份完整指南带你一次看懂中文界面排版的所有业余感来源。为什么中文界面一眼显得业余英文排版规则直接搬到中文界面上几乎是所有业余感的源头。最常见的 5 个信号症状真正原因中文挤在英文和数字里缺少盘古之白中西文间距正文读起来喘不过气行高沿用了英文的 1.4–1.6标题加粗后发虚、发毛中文字体只有 400/700bold触发伪合成中文被拉成斜体中文字体没有斜体字形强制倾斜笔画变形首屏加载 5–20MB 的 CJK 字体没有对装饰中文字体做子集化qiaomu-design 生成的中文落地页案例就是这套规范的直接产物大标题用系统字体栈的粗重对比而不是硬塞一个几 MB 的中文 webfont字体加载纪律系统字体栈是第一硬规则qiaomu-design 的第一条硬规则中文正文/UI 一律用系统字体栈。中文字体单文件 5–20MB用户机器上大概率没有 ZCOOL 系列字体走 CDN 会严重拖慢首屏。默认写法chinese-typography.md#L12-L17font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC, sans-serif;零体积、渲染最佳。中文界面的个性不靠堆字体而是靠西文/数字展示字体体积小可随意换、中文字重与字号对比、排版结构、色彩。盘古之白看不见的专业感分割线盘古之白指中文与西文、数字之间加空格的规范来源见 chinese-typography.md#L58-L63中文与英文之间在 Lumina 上使用 SDK中文与数字之间共 500 条记录数字与单位之间20 TB但90°、15%这种不加空格全角标点前后不加空格下面这张电商详情页就是数字排版的示范价格¥1,280、折扣-24%、评分4.9 分 (127 条评价)数字用半角、折扣不加空格、与中文之间留白自然——没有任何一处拥挤行高、字距、每行字数给密集笔画留呼吸中文笔画密度远高于英文排版参数必须整体放宽chinese-typography.md#L48-L57项推荐值说明行高1.5–1.75比英文的 1.4–1.6 更大正文字号Web ≥ 14px高密度阅读用 16px来自 Ant Design / Apple HIG字距正文letter-spacing: 0大标题可 0.05em禁负字距中文挤压会糊每行字数桌面 30–40 字移动 18–25 字max-width约36em移动端尤其容易犯每行挤 30 字的错误这张冥想助眠 App 案例保持了短行距、宽行高的移动端节奏字重陷阱700 可能是假粗体多数中文字体只有 400 / 700 两个字重中间字重是渲染引擎伪合成效果发虚苹方甚至有 Ultralight–Semibold 却没有 Bold写font-weight: 700实际落到 600chinese-typography.md#L41-L45。规范做法中文正文 400标题/强调用 500 或 600不写bold层级主要靠字号颜色拉开字重只做辅助。装饰中文字体子集化唯一被允许的例外只有两种场景可以用装饰中文字体创意展示页活动页/品牌 Hero/海报式页面的标题短语或用户明确要求的书法/复古/手写气质。且必须同时满足四个条件chinese-typography.md#L21-L29只用于标题——正文/UI 永远系统栈用 Google Fonts 的text参数子集化只加载标题用到的字符font-display: swap系统栈 fallbacklink hrefhttps://fonts.googleapis.com/css2?familyMaShanZhengtext每场会议都值得铭记displayswap relstylesheet注意思源黑体/宋体Noto Sans/Serif SC全量引入也算违规——同样是几 MB 级别标题需要时同样走子集化。可选的装饰字体清单Noto Serif SC典雅书卷、ZCOOL XiaoWei轻盈时尚、ZCOOL QingKe HuangYou圆润温暖、ZCOOL KuaiLe活泼跳动、Ma Shan Zheng毛笔楷书、Long Cang随性手写、Zhi Mang Xing洒脱行书。这个数据叙事页的衬线大标题速溶之外就是典型的创意场景 子集化装饰字体用法——字体只服务标题短语正文全部回到系统栈标点与斜体没人注意、但人人能感知的纪律中文句子用全角标点。不夹半角破折号——占两字宽不拆行省略号……同理标点不叠用禁止「」中文禁斜体——强调只用字重/颜色/字号下划线只留给链接暗色页中文正文的对比度标准更高亮色页中性文字用透明度写法rgba(0,0,0,.88)主文 /.65次文 /.25禁用暗色页正文不用纯白用rgba(255,255,255,.85)降低眩光中文笔画在低对比暗底上损失更大暗色正文对比度按7:1AAA设防而不是英文页常用的 4.5:1qiaomu-design 如何自动守住这些细节以上规则不是建议而是交付门禁。每次涉及中文页面qiaomu-design 都会读取 chinese-typography.md并在交付前强制执行 preflight.md 的 D2 中文页追加项中文正文/UI 是系统字体栈装饰中文字体只出现在标题且已text子集化中文行高 ≥ 1.5正文 ≥ 14px无负字距中西文之间、中文与数字之间有空格数字与单位间有空格°、% 除外全角标点、无斜体、无叠用标点中文字重只用 400/500/600无伪 bold 发虚暗色页正文rgba(255,255,255,.85)对比度 ≥ 7:1路由表里还明确写着中文界面中文排版优先于通用字体偏好SKILL.md也就是说即使你在其他配置里写了英文字体偏好只要页面含中文这套规范自动优先。结语专业感 一条一条执行的小规则中文排版的业余感从来不是单一错误而是字体栈、行高、盘古之白、字重、标点、暗色对比度这些细节的集体失守。把这些规则交给 qiaomu-design 的规范库与 preflight 门禁去兜底你只需要专注内容本身。赞分享【免费下载链接】qiaomu-design偏执型设计顾问反 AI 味设计 风格试衣间 58 站设计系统库的 Claude Code Skill | Opinionated design advisor for Claude Code: anti-generic UI, style fitting room, 58 real-site design systems.项目地址https://gitcode.com/gh_mirrors/qi/qiaomu-design点击查看免费下载相关推荐为什么你的网站需要 pangu.js盘古之白让排版更专业为什么你的网站需要 pangu.js盘古之白让排版更专业 还在为网站中文排版不美观而烦恼吗pangu.js 是一个专业的 JavaScript 文本排版优化前端CLI为什么霞鹜文楷成为中文排版的首选字体为什么霞鹜文楷成为中文排版的首选字体 在数字化阅读时代一款优秀的中文字体能够显著提升阅读体验。霞鹜文楷LXGW WenKai作为完全免费的开源字体将传设计系统为什么这款开源中文字体能重新定义中文排版美学为什么这款开源中文字体能重新定义中文排版美学 霞鹜文楷LXGW WenKai 是一款基于日本FONTWORKS公司开源字体Klee One衍生的非专业开源设计系统上一篇GetQzonehistory扫码一次QQ 空间全部历史说说导出到本地 Excel下一篇高效实用的开源视频增强完全指南AI智能提升画质与帧率创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考