【免费下载链接】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 设计规格集收录 583 个日本品牌与服务的完整设计令牌色彩、字体回退链、行距、禁则处理、OpenType 特性并附带 Gallery 图库页 gallery.html 供你一图流浏览。本文教你快速定位最适合自己项目的 DESIGN.md让 AI 生成的日语界面字体、行距、标点全部正确。一、DESIGN.md 是什么为什么需要日语版DESIGN.md 是 Google Stitch 提出的一种纯文本 Markdown 设计规格书由 AI Agent 读取后生成一致的 UI。它和AGENTS.md讲怎么构建并列专门负责回答看起来该是什么样。市面上的 awesome-design-md 上游项目覆盖了 55 欧美服务但日语排版规范完全缺失。日语 UI 有 6 个和欧美截然不同的排版规则日语排版规范典型值欧美常见默认和文字体回退链和文 → 欧文 → generic单一西文字体栈正文行高 line-height1.5〜2.01.4〜1.5正文字距 letter-spacing0.04〜0.1em通常为 0禁则处理句号/括号不可行首等无此概念OpenType 特性palt、kern比例字距一般不启用和欧混植规则明确混排顺序无此概念缺少这些规范AI Agent 会生成字体选错、行距拥挤、标点排坏的日语界面——这正是本项目存在的意义。二、30 秒看懂 Gallery583 个品牌一图流打开 gallery.html你会看到深色主题的图库页顶部提供 4 个筛选按钮All— 全部 583 个品牌SaaS— 企业软件类SmartHR、freee、Chatwork…Media— 媒体平台类note、WIRED.jp、Qiita…Consumer— 消费品牌类Apple Japan、MUJI、乐天…Agency— 创意机构类Novasell、Droga5…每张品牌卡片信息量很足包含 4 类关键信息实时缩略预览用 iframe 嵌入该品牌的 preview.html 设计令牌展示页点击可放大查看品牌名 类目如 Apple Japan / Consumer Tech主字体名如SF Pro JP一眼判断字体风格排版特性标签如palt:off、ls:-0.36px直接暴露该品牌的 OpenType 与字距配置卡片底部有两个直达入口DESIGN.md规格文件与Preview可视化预览。三、4 步锁定最像你的那一个 DESIGN.md第 1 步先想好你的对标品牌问自己我的产品气质最接近哪个日本服务极简留白想 MUJI专业工具想 SmartHR活力电商想乐天。想到 2〜3 个直接去 Gallery 搜品牌名。第 2 步按业务类型筛选不确定时用分类按钮缩小范围热门品牌速查表你的产品类型推荐分类可参考的品牌HR/财务/SaaS 工具SaaSSmartHR、freee、Cybozu、Sansan内容/社区/资讯Medianote、WIRED.jp、Qiita、Zenn电商/零售/消费品ConsumerMUJI、Apple Japan、UNIQLO、乐天设计/创意品牌AgencyNovasell、Droga5、teamLab酒店/旅游Consumer星野リゾート、TRUNK(HOTEL)、一休第 3 步看字体与标签细节做取舍同一类目里卡片右侧的字体名和标签是关键差异点palt:off表示该品牌关闭比例字距ls:-0.36px表示使用负字距——这些细节直接决定了生成 UI 的高级感或工具感。第 4 步取走文件每个品牌在仓库中是一个独立目录两个文件各取所需规格书design-md/muji/DESIGN.md以 MUJI 为例可视化预览design-md/muji/preview.html四、一份 DESIGN.md 内部长什么样9 大区块速览所有品牌都遵循同一套模板见 template/DESIGN.md共 9 个区块#区块你从中得到什么1Visual Theme Atmosphere品牌气质关键词如 MUJI 的素朴、静謐、余白2Color Palette Roles完整 hex 色板品牌色、语义色、12 阶灰度3Typography Rules核心中的核心和文/欧文字体、回退链、字号层级、行距字距、禁则处理、OpenType、竖排4Component Stylings按钮、输入框、卡片的精确样式5Layout Principles间距刻度、容器宽度、栅格6Depth Elevation3 级阴影体系7Dos and Donts设计护栏必须做/禁止做清单8Responsive Behavior断点、触摸目标 44px、字号缩放规则9Agent Prompt Guide可直接喂给 AI 的提示词模板想深入看一份真实示例推荐 design-md/muji/DESIGN.md——从 MUJI 红#7f0019到标志性きなり色#f4eede每个值都来自真实站点 CSS。五、新手上手三步把 DESIGN.md 用起来 克隆仓库git clone https://gitcode.com/gh_mirrors/aw/awesome-design-md-jp放入项目把选中的DESIGN.md复制到自己代码库根目录与AGENTS.md并列交给 AI Agent生成日语 UI 时引用该文件字体、行距、标点即自动合规想为自家产品写一份按模板说明走即可复制 template/DESIGN.md → 用实际站点 CSS 值填充 → Section 标题保留英文利于 AI 理解→ 说明与 Dos and Donts 用日语书写。六、项目文件地图收藏级文件用途README.md项目说明日英双语 583 品牌全表gallery.html本指南的主角Gallery 图库页design-md/全部品牌目录每品牌含 DESIGN.md preview.html 预览截图template/DESIGN.md9 区块标准模板CONTRIBUTING.md贡献指南如何新增一个品牌的 DESIGN.md583 个日本品牌的设计基因就在仓库里——先在 Gallery 里逛一圈找到那个对味的剩下的交给 AI。✨赞分享【免费下载链接】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 de终极SVG图标搜索指南如何快速找到最适合的品牌图标终极SVG图标搜索指南如何快速找到最适合的品牌图标 在现代设计和开发工作中高质量的品牌图标是提升项目视觉吸引力的关键元素。GitHub加速计划的lo/logAwesome-macos终极指南如何快速找到最适合你的macOS软件Awesome macos终极指南如何快速找到最适合你的macOS软件 Awesome macos是一个精心策划的Apple macOS软件列表汇集了各类实上一篇ERB Lint 在大型项目中的实践Shopify 内部使用经验分享下一篇洛雪音乐助手跨平台音乐聚合播放器的终极使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考