【免费下载链接】awesome-design-md-jp
日本語UIをAIエージェントに正しくつくらせるためのDESIGN.md集。Japanese DESIGN.md collection for AI agents — extending Google Stitch format with CJK typography.
awesome-design-md-jp 是一个面向日语 UI 的设计规格文件集：它收录了数百个日本品牌的 DESIGN.md 设计规格，与项目中的 AGENTS.md 搭配使用，让 AI Agent 生成排版、颜色、布局都忠于真实品牌的日语界面。如果你在用 AI 写网页，这个项目就是现成的"设计参考书"。
DESIGN.md 是什么：AI 生成 UI 的"外观与感觉"规格
DESIGN.md是 Google Stitch 提出的一个格式：用纯文本 Markdown 描述产品"应该长什么样"，AI Agent 读取后就能生成风格一致的 UI。
在 awesome-design-md-jp 中：
- 每个品牌一个目录，内含三份文件：
DESIGN.md规格、preview.html可视化展示页、preview-screenshot.png页面截图 - 已覆盖583 个日语站点，横跨电商、SaaS、时尚、美术馆、食品饮料等类目，可在线浏览 gallery.html
- 示例：design-md/muji/DESIGN.md 精确记录了无印良品的品牌红
#7f0019、标志性"黄白色（きなり色）"背景#f4eede，以及全站统一line-height: 1.6的排版节奏（详见 design-md/muji/DESIGN.md 与 design-md/muji/DESIGN.md）
DESIGN.md 与 AGENTS.md 的区别：两个文件如何分工 📐
这是理解本项目的关键：AGENTS.md管"怎么做"，DESIGN.md管"长什么样"。两者并排放置在代码库中，AI Agent 才能既写对代码，又做对界面。
| 文件 | 角色 | 类比 | 典型内容 |
|---|---|---|---|
AGENTS.md | 如何构建（How to build） | 工作守则 | 技术栈、目录约定、开发与测试规范 |
DESIGN.md | 外观与感觉（How it looks） | 品牌手册 | 色板、字体栈、排版规则、组件样式、响应式行为 |
AGENTS.md无法描述"品牌红是什么、正文行高多少"这类视觉细节；而DESIGN.md不关心代码怎么组织。两者互补，缺一不可——这正是"终极搭配"的含义。
为什么需要日语版：6 个 CJK 排版缺口
现有的海外 DESIGN.md 集合覆盖了 50 多个欧美服务，但日语排版规格完全缺失。日语 UI 的排版与欧美有根本差异（见 README.md）：
- 和文字体回退链：和文 → 欧文 → generic，顺序直接影响渲染质量
- 更宽的 line-height：日语正文 1.5～2.0（欧美通常 1.4～1.5）
- 字间距：日语正文需要 0.04～0.1em
- 禁则处理：句点、括号等标点不允许出现在行首/行尾的规则
- OpenType 功能：
palt、kern等比例排版开关 - 混植规则：和文与西文混排时的组合约定
缺少这些规格，AI Agent 生成的日语界面会出现字体错误、行距过挤、标点处理崩坏等问题。
DESIGN.md 的 9 节构成：设计令牌如何写全 🎨
awesome-design-md-jp 的模板在 template/DESIGN.md，共 9 个章节，其中第 3 节是日语扩展的核心：
- Visual Theme & Atmosphere— 视觉主题与氛围
- Color Palette & Roles— 色板与角色（全部用 hex 值）
- Typography Rules— 排版规则（3.1 和文字体 → 3.8 纵書き，含回退链、字级权重、行距字距、禁则、OpenType 功能）
- Component Stylings— 按钮、输入框、卡片等组件样式
- Layout Principles— 间距刻度、容器、栅格
- Depth & Elevation— 深度与阴影层级
- Do's and Don'ts— 设计护栏（如"和文字体不能只写一个"、"正文 line-height 不低于 1.5"）
- Responsive Behavior— 断点、触摸目标尺寸
- Agent Prompt Guide— 直接给 AI 用的提示词指南与速查卡（见 template/DESIGN.md）
💡 一个细节：章节标题保持英文（方便 AI 解析），数值说明和 Do's & Don'ts 用日语书写——这是模板的约定，贡献时也需遵守。
快速上手 4 步：把日语设计规格接入你的 AI Agent 项目 🚀
第 1 步：克隆仓库
git clone https://gitcode.com/gh_mirrors/aw/awesome-design-md-jp第 2 步：挑选品牌参考— 打开 gallery.html 或浏览 design-md/ 目录，找到与你产品调性接近的品牌（如极简风选 muji，商务风选 smarthr）。
第 3 步：复制规格文件— 将该品牌的DESIGN.md复制到你项目根目录，与AGENTS.md并排放置。
第 4 步：在 AGENTS.md 中声明引用— 加一句"生成 UI 时严格遵循 DESIGN.md 中的颜色、字体与排版令牌"，AI Agent 即可按规格产出界面。
没有现成品牌可用？用 template/DESIGN.md 自行填写：分析目标网站的实际 CSS，填入真实的 hex 色值与实测行高，避免凭感觉猜数值。
终极搭配：DESIGN.md + AGENTS.md 的实际工作流
一个典型的 AI Agent 开发会话中，两个文件各司其职：
| 环节 | 起作用的文件 | 效果 |
|---|---|---|
| AI 决定技术选型、文件放哪 | AGENTS.md | 代码结构符合项目规范 |
| AI 写按钮、卡片、表格样式 | DESIGN.md | 颜色、字体、行距与品牌一致 |
| AI 输出最终 Prompt 检查项 | DESIGN.md第 9 节 Agent Prompt Guide | 关键令牌随提示词一起下达 |
想自建规格？贡献指南见 CONTRIBUTING.md：复制模板至design-md/<服务名>/DESIGN.md（目录名用小写罗马字），确保字体回退链准确、颜色为精确 hex、行距与字距为实测值，提交信息格式为add: <服务名> DESIGN.md。
DESIGN.md 常见问题（FAQ）
Q1：DESIGN.md 和 AGENTS.md 必须同时存在吗？不强制，但推荐。只有AGENTS.md时 AI 不懂"长什么样"；只有DESIGN.md时 AI 不懂"怎么做"。
Q2：DESIGN.md 里的值从哪里来？来自对真实网站 CSS 的实测（computed style 或公开的设计令牌），不靠猜测。这正是 awesome-design-md-jp 的质量标准。
Q3：不会日语能用这个项目吗？可以。规格中的结构是英文标题、数值是通用的 CSS 值（hex 色、px、line-height），对任何语言的 AI Agent 都可直接消费；日语注释只是便于日本社区维护。
总结：AGENTS.md负责"怎么做"，DESIGN.md负责"长什么样"。awesome-design-md-jp 用 583 份实测过的日语品牌设计规格，把 AI 生成 UI 最容易失控的"排版与视觉"环节变成了有据可依——这就是两者搭配的真正价值。
【免费下载链接】awesome-design-md-jp
日本語UIをAIエージェントに正しくつくらせるためのDESIGN.md集。Japanese DESIGN.md collection for AI agents — extending Google Stitch format with CJK typography.
相关推荐
awesome-design-md-jp模板深度解析：教AI理解日本设计的9节DESIGN.md结构
awesome design md jp模板深度解析：教AI理解日本设计的9节DESIGN.md结构 awesome design md jp 是一个专为 AI
先搞懂DESIGN.md：AI设计规格格式与awesome-design-md-jp入门教程
先搞懂DESIGN.md：AI设计规格格式与awesome design md jp入门教程 如果你正在用 AI Agent 生成前端页面，却经常遇到"字体不对
如何写出让AI记住设计规范的Prompt？awesome-design-md-jp的Agent Prompt Guide实战指南
如何写出让AI记住设计规范的Prompt？awesome design md jp的Agent Prompt Guide实战指南 你是否苦恼过 AI 生成的日语
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
