【免费下载链接】awesome-design-md-jp日本語UIをAIエージェントに正しくつくらせるためのDESIGN.md集。Japanese DESIGN.md collection for AI agents — extending Google Stitch format with CJK typography.项目地址https://gitcode.com/gh_mirrors/aw/awesome-design-md-jp点击查看免费下载你有没有发现日本网站行距都特别宽awesome-design-md-jp 是一个专为日语网页打造的DESIGN.md设计规范集合收录了 583 个日本品牌的排版参数让 AI 智能体能正确生成符合日语排版习惯的 UI。这篇文章就借这个项目带你彻底搞懂日语排版与欧美排版的 6 大核心差异 先说结论为什么日语行距天生要更宽一句话汉字是方块字笔画密度高标点占满整格。同一个 16px英文字母高低错落、留白充足而日本語のタイポグラフィ每个字都占满一个方形字位上下笔画几乎顶满。句号。和逗号、各自占满一整格如果行距只有 1.3相邻两行文字会贴在一起阅读时视线频繁打架。所以日语正文的舒适区间是line-height: 1.52.0而欧美正文通常1.41.5就够了。这不是设计师的审美偏好而是字符形态决定的物理规律。这个开源项目能帮你做什么DESIGN.md是 Google Stitch 提出的格式一份纯 Markdown 设计说明书供 AI 智能体读取后生成风格一致的界面。问题在于已有的欧美版 DESIGN.md 集合完全缺失日语排版规范。没有这些参数AI 生成的日语页面会出现字体回退错乱、行距过挤、句点换行被折断。awesome-design-md-jp 正是补上这块空白的 覆盖583 个日本网站Apple、MUJI、Rakuten、LINE、Nintendo、無印良品等 每个站点一份DESIGN.md包含实测 CSS 值颜色、字号、行距、字距、阴影️ 每份规范附带preview.html可视化展示页方便对照效果 提供标准模板9 大章节结构专门扩展了 CJK 排版规则差异一和文フォントフォールバックチェーン字体回退链欧美写法font-family: Helvetica Neue, Arial, sans-serif;日语必须写成一条和文 → 欧文 → generic的完整回退链。以 design-md/muji/DESIGN.md 中的 MUJI 为例font-family: Helvetica Neue, Arial, Noto Sans JP, Noto Sans JP Fallback, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;要点不能只写一个和文字体——不同操作系统装的和文字体完全不同macOS 是ヒラギノ角ゴWindows 是 Meiryo单写必翻车想优先展示品牌英文字标时把欧文字体放在链首反之和文优先结尾必须落到sans-serif/serif兜底Apple 日本站甚至自研了SF Pro JP放在整条链的第一位见 design-md/apple/DESIGN.md可见和文回退链是日语 UI 的第一优先级。差异二広い行間正文 line-height 1.52.0 vs 1.41.5场景欧美正文日语正文常用区间1.41.51.52.0舒适上限1.7 左右2.0红线低于 1.2 难读低于 1.5 就不合格模板中的官方指南写得很直白日本語本文はline-height: 1.5以上を推奨1.7〜2.0が読みやすい—— 日语正文推荐 1.5 以上1.72.0 最佳禁止使用 1.2 以下的行距。实际案例对比均为仓库中的实测值MUJI全站统一line-height: 1.6连标题和正文都保持同一节奏营造安静的秩序感Apple 日本站正文约×1.351.47但大标题压到×1.05配超大字号走的是杂志式路线 小规律字号越大行距倍数越小但日语的底线始终比欧美高半档。差异三字間letter-spacing 0.040.1em欧美正文的letter-spacing通常是0标题甚至会故意收紧负值。日语则相反正文推荐0.04em0.1em全角方块字之间加一点缝隙可读性显著提升标题可用00.05em宽字距是日系品牌的经典气质⚠️ 注意letter-spacing会同时作用于混排里的英文过大的字距会让英文单词散架MUJI 的 H3 标题就用了letter-spacing: 2.4px的宽追踪与全站 1.6 的统一行距呼应是典型的日式节奏感设计。差异四禁則処理句读的换行规则这是欧美排版完全没有的概念。英文换行只认单词边界日语的、。、括号等标点有严格的行首/行末禁令/* 模板推荐的禁则配置 */ word-break: break-all; overflow-wrap: break-word; line-break: strict; /* 严格禁则处理 */行首禁止 」 』 】 〕 〉 》 、 。 ・ 行末禁止 「 『 【 〔 〈 《不做禁则处理的日语页面标点会飞到下一行行首读者一眼就能看出这网站不懂日语 差异五OpenType機能palt 与 kern功能作用适用场景kern西文字偶距和文与英文混排时生效palt和文比例字距把标点压缩成半角宽导航、标题等空间紧张处font-feature-settings: palt 1, kern 1;日系网站的常见套路正文保持全角标点视觉舒展导航栏开启palt节省横向空间。而欧美站点几乎从不碰palt因为它本质是 CJK 专属特性。差异六混植和文与欧文的组合规则同一句话里日本語与Typography并肩出现时两种字体如何搭配模板给出三条军规字高对齐英文 x 高度与汉字视觉重心对齐别让英文显得矮半头间距留白和文与英文之间通常加一个半角空格字重统一避免英文用 700 而汉字用 400 的打架组合Apple 日本站的实测数据design-md/apple/DESIGN.md里正文 17px / 行高 ×1.47 / 字距 -0.357px 这类细节都按角色逐一列出——混植规则就藏在这种逐角色的实测数据里。6 大差异速查表#维度欧美标准日语标准1font-family西文字体优先和文优先完整回退链 generic 兜底2line-height1.41.51.52.03letter-spacing0 或负值正文 0.040.1em4换行单词边界禁则处理标点行首/行末禁令5OpenType基本只用 kernpaltkern组合6混植很少涉及必须定义和欧混排规则3 步上手让 AI 学会日语排版git clone https://gitcode.com/gh_mirrors/aw/awesome-design-md-jp复制模板从 template/DESIGN.md 拷出DESIGN.md放进你的项目根目录与AGENTS.md并列填入实测值把 9 大章节用目标网站真实的 CSS 值填完重点打磨第 3 章 Typography Rules交给 AI让智能体读取DESIGN.md再生成界面字体、行距、句点处理都会对味想直接参考成品挑一个你熟悉的站点读它的规范即可例如 design-md/muji/DESIGN.mdMUJI 的统一行距设计也可以打开 gallery.html 在浏览器里浏览全部 583 个站点的预览效果。写在最后行距宽只是表象背后是一整套为方块字设计的排版工程回退链管字体、行距管呼吸、字距管节奏、禁则管标点、palt 管密度、混植管中西合璧。下次再让 AI 生成日语界面记得先丢给它一份DESIGN.md——这 6 条差异就是日语 UI 和看起来像日语之间的差距 ✍️想贡献新站点的设计规范参考仓库中的 CONTRIBUTING.md 即可参与。赞分享【免费下载链接】awesome-design-md-jp日本語UIをAIエージェントに正しくつくらせるためのDESIGN.md集。Japanese DESIGN.md collection for AI agents — extending Google Stitch format with CJK typography.项目地址https://gitcode.com/gh_mirrors/aw/awesome-design-md-jp点击查看免费下载相关推荐awesome-design-md-jp完整指南DESIGN.md是什么AI Agent如何生成正确的日本语UI附583个站点全览awesome design md jp完整指南DESIGN.md是什么AI Agent如何生成正确的日本语UI附583个站点全览 awesome degh_mirrors/git15/git与SVN核心差异为什么分布式版本控制更高效gh_mirrors/git15/git与SVN核心差异为什么分布式版本控制更高效 你是否还在为SVN的集中式架构导致的单点故障而烦恼是否经历过网络中断时无版本控制CLI开发工具为什么你的中文网站需要赫蹏揭秘专业中文排版的5大优势为什么你的中文网站需要赫蹏揭秘专业中文排版的5大优势 赫蹏hètí是专为中文内容展示设计的排版样式增强工具它基于通行的中文排版规范而来能为网站读者带来前端上一篇猫抓突破资源获取瓶颈的网页媒体解析解决方案含5个实战技巧下一篇NCMDump突破网易云音乐格式限制的音频转换工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考