DESIGN.md vs AGENTS.md：awesome-design-md-jp详解AI Agent设计规格的终极搭配

【免费下载链接】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 是一个面向日语 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.mdDESIGN.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.52.0欧美通常 1.41.5字间距日语正文需要 0.040.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— 深度与阴影层级Dos and Donts— 设计护栏如和文字体不能只写一个、正文 line-height 不低于 1.5Responsive Behavior— 断点、触摸目标尺寸Agent Prompt Guide— 直接给 AI 用的提示词指南与速查卡见 template/DESIGN.md 一个细节章节标题保持英文方便 AI 解析数值说明和 Dos Donts 用日语书写——这是模板的约定贡献时也需遵守。快速上手 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 常见问题FAQQ1DESIGN.md 和 AGENTS.md 必须同时存在吗不强制但推荐。只有AGENTS.md时 AI 不懂长什么样只有DESIGN.md时 AI 不懂怎么做。Q2DESIGN.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.项目地址https://gitcode.com/gh_mirrors/aw/awesome-design-md-jp点击查看免费下载相关推荐awesome-design-md-jp模板深度解析教AI理解日本设计的9节DESIGN.md结构awesome design md jp模板深度解析教AI理解日本设计的9节DESIGN.md结构 awesome design md jp 是一个专为 AI先搞懂DESIGN.mdAI设计规格格式与awesome-design-md-jp入门教程先搞懂DESIGN.mdAI设计规格格式与awesome design md jp入门教程 如果你正在用 AI Agent 生成前端页面却经常遇到字体不对如何写出让AI记住设计规范的Promptawesome-design-md-jp的Agent Prompt Guide实战指南如何写出让AI记住设计规范的Promptawesome design md jp的Agent Prompt Guide实战指南 你是否苦恼过 AI 生成的日语上一篇gh_mirrors/la/lang与Livewire集成实时语言切换下一篇Obsidian API 命令与快捷键系统打造高效用户交互体验的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考