【免费下载链接】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 是一个面向 AI 代理的日语 UI 设计规格集DESIGN.md 集合其中 MUJI无印良品的规格文件堪称极简主义的教科书全站行高统一锁定 line-height: 1.6间距只允许从 4px 到 96px 的 12 个档位。本文带你拆解这份规格背后的排版哲学。一、DESIGN.md 是什么写给 AI 的设计说明书普通项目里AGENTS.md 告诉 AI「代码怎么构建」而DESIGN.md告诉 AI「界面长什么样」——颜色、字体、行高、间距全部量化成可读的规格值。日语 UI 与欧美 UI 有本质差异缺了这些规格AI 生成的页面往往是字体乱套、行高过紧、标点破版。该项目的模板在标准格式基础上专门扩展了日语排版章节结构定义见 template/DESIGN.mdVisual Theme Atmosphere— 视觉氛围Typography Rules— 字体规则含和文 fallback、禁则处理、OpenType 功能Layout Principles— 布局原则Spacing Scale、容器、栅格Dos and Donts— 设计护栏Agent Prompt Guide— 可直接投喂给 AI 的提示词模板仓库收录了 580 个日本站点的规格每个站点目录下都有DESIGN.md和可交互的preview.html预览页。想动手补充新站点参考 CONTRIBUTING.md 即可。二、MUJI 极简哲学的底色素朴与余白MUJI 规格文件 design-md/muji/DESIGN.md 开篇只有两句方针デザイン方針设计方针ミニマリズムの極致。装飾を完全に排し、余白で語るデザイン 极简主义的极致。彻底排除装饰用余白说话的设计关键词是五个词素朴、静寂、无装饰、自然、余白。翻译过来就是——少即是多且「少」也要有纪律。下面两条纪律正是这份文件的精华。三、line-height 1.6 统一律全站同一个心跳打开 design-md/muji/DESIGN.md 的字体层级表你会发现一个罕见的特征角色字号字重行高Heading 126px70041.6px×1.6Heading 232px70051.2px×1.6Body 正文16px40025.6px×1.6Paragraph 商品说明12px40019.2px×1.6Caption 页脚辅助14px40022.4px×1.6Heading 3唯一例外26px70029.9px×1.15全文只有一个倍率1.6。标题、正文、说明文字呼吸节奏完全一致——这就是「line-height 1.6 统一律」。为什么是 1.6汉字是方块。每个 CJK 字符都占满整行高度行高太紧比如欧文的 1.4时上下笔画会视觉上「打架」日语正文行高普遍在 1.5〜2.0 之间。统一本身就是秩序。整站共用一个行高倍率读者在任何区块扫读时视觉节奏都不会被打断。唯一的例外是 h3。line-height: 1.15letter-spacing: 2.4px宽字距把 h3 从正文的均匀律动中轻轻「提起」形成强调却不破坏整体安静感。配套细节同样克制字体 fallback 链Helvetica Neue→Arial→Noto Sans JP→Hiragino Kaku Gothic ProN→Meiryo。先用欧文字体保证拉丁字符品质再交给和文字体兜底。禁则处理句号、括号等标点禁止出现在行首line-break: strict保证换行不破版design-md/muji/DESIGN.md。不开 palt显式声明font-feature-settings: normal拒绝比例字距压缩。MUJI 要的是「素朴的组版」而不是把一行字硬塞得更满。四、12级 Spacing Scale余白的节奏表MUJI 的余白不是随手留的而是一套严格的刻度系统定义在 design-md/muji/DESIGN.mdToken值Token值XXXXS4pxL48pxXXXS8pxXL56pxXXS12pxXXL64pxXS16pxXXXL80pxS20pxXXXXL96pxSM24pxM32pxML40px共 12 档对应 CSS 变量--space-v-xxxxs4px到--space-v-xxxxl96px。这套「只许从刻度表里取数」的规则正是极简主义工程化的核心4px 起步最小间距留给图标与文字这类贴身关系48px/64px 大档留给区块之间的呼吸感商品图与文字得以「各退一步」杜绝 13px、45px 这类野值所有间距同源页面自然对齐、天然一致。配合 1120px 的容器最大宽度与 16〜24px 的栅格间隙MUJI 的商品网格就是「图片 大量留白」的平静画面而非促销感的信息堆叠。五、配色的克制MUJI Red 与きなり色极简不等于无色彩而是给每种颜色分配严格的角色design-md/muji/DESIGN.md颜色色值角色MUJI Red#7f0019品牌色仅用于 Logo 与局部点缀禁止大面积使用きなり色生麻色#f4eedeMUJI 的象征Hero 区与区块背景Beige#e0ceaa有温度的辅助面正文文本#3c3c43不是纯黑深灰降低视觉刺激背景#fff页面基底一个耐人寻味的细节正文颜色选了#3c3c43深灰而非#000纯黑——纯黑对白纸的对比太「硬」深灰让整页更柔和。灰阶同样做了 12 级刻度Gray 800 → White与 Spacing Scale 的「12」遥相呼应一切皆可枚举一切皆有节制。六、Dos and Donts设计护栏的极简版规格文件最后用两组清单把哲学落成纪律design-md/muji/DESIGN.md✅ Do推荐文本色用#3c3c43避开纯黑line-height 全页统一 1.6充分留白让元素之间有呼吸按钮圆角只留 4pxきなり色#f4eede制造温度间距只走 12 级刻度❌ Dont禁止不用渐变、不用多层阴影、少动画MUJI Red 不大面积铺陈不启用 palt 比例字距圆角不超过 4px8px 以上「不像 MUJI」输入框、卡片圆角直接为0px配平直边框与零阴影——扁平到近乎「图纸」七、实战让 AI 照着 MUJI 规格生成页面规格文件末尾内置了 Agent 提示词模板design-md/muji/DESIGN.md核心就是把关键数值喂给 AI遵循无印良品的设计系统创建商品列表页文本色#3c3c43不用纯黑行高统一line-height: 1.6Hero 区背景用きなり色#f4eede按钮背景#3c3c43圆角 4px字号 12px/700间距使用 4px〜96px 的 12 级刻度不使用阴影与渐变MUJI Red#7f0019仅限 Logo 与点缀把这段提示词连同DESIGN.md交给 AI 代理产出的页面就会带着「MUJI 味」——同样的 1.6 呼吸、同样的 12 档留白。每个站点目录下的 preview.html 则是这些设计令牌的可视化展示页方便人眼直观验收。结语极简是一种纪律回看这份 MUJI 规格极简主义落地的秘诀并不玄妙一个行高倍率1.6统一全站节奏一张 12 级间距刻度表4px〜96px约束所有留白一组角色分明的色彩深灰文本、生麻底色、克制红一份明确的 Do / Dont 护栏把「不做的事」写进规格。与其说这是无印良品的设计语言不如说这是一套可被 AI 执行的秩序。想要更多真实案例仓库中 580 个站点的DESIGN.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点击查看免费下载相关推荐RxLifecycle源码剖析AndroidLifecycle类背后的设计哲学RxLifecycle源码剖析AndroidLifecycle类背后的设计哲学 在Android开发中内存泄漏Memory Leak是最常见的性能问题之移动开发深度解析如何用Musicpy实现音乐理论编程化的三大创新方案深度解析如何用Musicpy实现音乐理论编程化的三大创新方案 你是否曾想过用代码写出优美的音乐传统的音乐创作需要深厚的乐理知识和演奏技巧而Musicpy开发工具Vue-Design终极Vue可视化构建器5分钟打造专业网页界面Vue Design终极Vue可视化构建器5分钟打造专业网页界面 想要快速创建专业级Vue.js网页界面吗Vue Design是您的终极解决方案这款基于上一篇零延迟字幕革命HLS.js集成实时语音识别的完整解决方案下一篇CodeIsland安全特性分析保护你的AI编程环境不被滥用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考