SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场awesome-design-md-jp

awesome-design-md-jp

设计与创作

查看项目

更新于 10-15 16:29

技能介绍

用途

Awesome Design MD JP 是一个 DESIGN.md 文件集合，用于帮助 AI 编码智能体生成准确的日文 UI。DESIGN.md 是 AI 编码智能体读取的纯文本 markdown 文件，用于生成风格一致的 UI；本项目为该格式补充了 CJK 排版、日文字体栈、禁则处理（禁則処理）与混植（混植）规则。

主要能力

项目扩展了 DESIGN.md 格式以覆盖日文服务，具体包括：

  • CJK font-family 回退链（和文 → 欧文 → 通用）
  • 更高的行高（1.5–2.0，对比西方常见的 1.4–1.5）
  • 日文字距（正文 0.04em–0.1em）
  • 禁则处理（禁則処理）——CJK 标点断行规则
  • OpenType 特性（palt、kern）用于比例排版
  • 混植（混植）——日文与拉丁字体的组合排版

项目内含 24 个参考 DESIGN.md 文件：Apple Japan、MUJI、Mercari、SmartHR、freee、note、LINE、楽天、Qiita、Zenn、pixiv 等。

使用方式

无需构建步骤，直接克隆或引用仓库：

git clone https://github.com/kzhrknt/awesome-design-md-jp.git
cd awesome-design-md-jp

将模板复制到你的项目：

cp template/DESIGN.md your-project/DESIGN.md

或以某个现有服务为起点：

cp design-md/muji/DESIGN.md your-project/DESIGN.md
# then edit for your brand

将 DESIGN.md 放在项目根目录，与 AGENTS.md 并列：

your-project/
├── AGENTS.md       # how to build
├── DESIGN.md       # how it should look and feel  ← add this
├── src/
└── ...

模板结构

模板在标准 Google Stitch 9 节格式上增加了日文排版子节，共 9 节：1. Overview；2. Color Palette；3. Typography（含 3.1 Font Families 和文/欧文/混植、3.2 Type Scale、3.3 Japanese Typography Rules）；4. Spacing & Layout；5. Components；6. Icons & Imagery；7. Motion & Animation；8. Responsive Breakpoints；9. Accessibility。

参考示例

  • MUJI 风格（极简零售）：无彩色基调、衬线字体栈、正文 line-height 2.0、letter-spacing 0.08em。
  • SmartHR 风格（B2B SaaS）：中性配色、正文 14px / line-height 1.8 / ls 0.04em，强调高信息密度下的可读性。
  • note 风格（媒体 / 出版）：标题衬线、正文无衬线，正文 18px / line-height 1.9 / letter-spacing 0.04em，最大行长 38–40 字符。

告知 AI 智能体使用 DESIGN.md

当文件位于项目根目录时，在提示词中显式引用它，例如要求智能体阅读 DESIGN.md 并按其中定义的排版与颜色规范创建日文落地页首屏，使用指定的 font-family 回退链、line-height 与 letter-spacing，并用 line-break: strict 实现禁则处理。对于 Claude Code / Cursor，也可引用具体小节，例如依据 DESIGN.md 第 3.3 节（Japanese Typography Rules）更新全局 CSS。

预览

每个 DESIGN.md 都配有 preview.html 用于可视化设计 token，可在本地打开单个预览或查看完整画廊，例如 open design-md/muji/preview.html、open design-md/smarthr/preview.html、open design-md/gallery.html，或访问 https://kzhrknt.github.io/awesome-design-md-jp/gallery.html。

贡献新 DESIGN.md

# 1. Create directory
mkdir design-md/your-service

# 2. Copy template
cp template/DESIGN.md design-md/your-service/DESIGN.md

# 3. Fill in all 9 sections including Japanese typography subsections
# 4. Create preview.html from the preview template
cp template/preview.html design-md/your-service/preview.html

# 5. Take a screenshot at 1280×800 → preview-screenshot.png

验收所需小节：带 CSS 自定义属性名的配色板；带平台注释的日文 font-family 回退链；含 line-height 与 letter-spacing 列的字阶表；禁则处理 CSS 规则；font-feature-settings 规范；响应式断点。

适用场景

按服务类别的常见排版模式：

  • 消费者应用（LINE、Mercari）：Noto Sans JP + 系统回退；正文行高 1.7；字距 0.04em；品牌强调色；移动优先，375px 基准；点击目标最小 48px。
  • B2B SaaS（SmartHR、freee、Cybozu）：优先 Hiragino Kaku Gothic ProN（系统）、网页 Noto Sans JP；正文行高 1.8（密集数据表可用 1.5）；字距 0.04em；中性配色配清晰操作色；信息密度高；带固定表头的数据表。
  • 编辑 / 媒体（note、WIRED.jp、Qiita、Zenn）：正文用 Noto Serif JP 或 Hiragino Mincho，UI 界面用无衬线；正文行高 1.9–2.0；字距 0.06em；最大行长 38–42 字符；代码块使用兼容 JIS 的等宽回退。
  • 零售 / 生活方式（MUJI、Toyota）：衬线体现高级感，无衬线用于功能性文本；行高 2.0；字距 0.08em；无彩色或高度克制的配色；以高质量图像为主要内容。

限制

项目未提供构建步骤，也不包含自动化校验工具；文档给出的是 API 注意事项与常见问题排查建议，但未提供可执行的检查命令。项目的定价、授权与版本信息暂未提供。