Awesome Design Md Jp
Author a Japanese-localized DESIGN.md so coding agents apply correct CJK typography, kinsoku shori, and mixed JP/Latin rules in generated UI.
Overview
Awesome Design MD JP is an agent skill for the Build phase that creates accurate Japanese UI DESIGN.md files with CJK typography, kinsoku shori, and mixed typesetting rules.
Install
npx skills add https://github.com/aradotso/trending-skills --skill awesome-design-md-jpWhat is this skill?
- Extends Google Stitch DESIGN.md with Japanese-specific typography rules
- Defines CJK font-family fallback chains (和文 → 欧文 → generic)
- Specifies body line-height 1.5–2.0 and letter-spacing 0.04em–0.1em
- Documents kinsoku shori (禁則処理) and mixed typesetting (混植) for JP + Latin
- Covers OpenType features palt and kern for proportional Japanese setting
- Body line-height range 1.5–2.0 vs Western 1.4–1.5
- Letter-spacing guidance 0.04em–0.1em for Japanese body text
Adoption & trust: 506 installs on skills.sh; 31 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
AI agents default to Western line-height and fonts, so Japanese UIs look cramped, break punctuation rules, and mix English poorly with 和文.
Who is it for?
Indie builders localizing a web app or marketing site to Japanese who already use agent-driven UI from DESIGN.md.
Skip if: English-only products or teams that design exclusively in Figma without agent-readable markdown specs.
When should I use this skill?
Create a DESIGN.md for a Japanese website, generate Japanese UI design spec, add Japanese typography to DESIGN.md, or write kinsoku and mixed typesetting rules for agents.
What do I get? / Deliverables
You deliver a DESIGN.md your agent reads to generate Japanese UI with correct font stacks, spacing, kinsoku, and OpenType settings consistent with Stitch conventions.
- Japanese-localized DESIGN.md with typography and layout tokens
- Documented kinsoku and 混植 rules for agent implementation
Recommended Skills
Journey fit
Visual and typographic specs belong on the Build shelf before agents implement Japanese-facing screens. DESIGN.md is a frontend contract read by Stitch-style agents during component generation, not a distribution or analytics task.
How it compares
Specializes the generic Stitch DESIGN.md format for Japanese typography rather than replacing your component library.
Common Questions / FAQ
Who is awesome-design-md-jp for?
Solo builders and small teams shipping Japanese web UIs with AI coding agents that consume DESIGN.md design tokens and typography rules.
When should I use awesome-design-md-jp?
Use it during Build frontend when creating a DESIGN.md for a Japanese website, adding CJK typography, or specifying kinsoku and mixed typesetting for an agent.
Is awesome-design-md-jp safe to install?
It produces markdown design specs only; review the Security Audits panel on this page before pointing agents at proprietary brand assets.
SKILL.md
READMESKILL.md - Awesome Design Md Jp
# Awesome Design MD JP > Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. A curated collection of `DESIGN.md` files for Japanese web services, extending the Google Stitch DESIGN.md format with CJK typography, Japanese font stacks, kinsoku shori (禁則処理), and mixed typesetting (混植) rules — enabling AI agents to generate accurate Japanese UI. --- ## What This Project Does [DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) is a plain-text markdown file AI coding agents read to generate consistent UI. This project extends that format for Japanese services, covering: - **CJK font-family fallback chains** (和文 → 欧文 → generic) - **Higher line-height** (1.5–2.0 vs Western 1.4–1.5) - **Japanese letter-spacing** (`0.04em`–`0.1em` for body text) - **Kinsoku shori (禁則処理)** — CJK punctuation line-break rules - **OpenType features** (`palt`, `kern`) for proportional typesetting - **Mixed typesetting (混植)** — combining Japanese and Latin typefaces 24 reference DESIGN.md files are included: Apple Japan, MUJI, Mercari, SmartHR, freee, note, LINE, Rakuten, Qiita, Zenn, pixiv, and more. --- ## Installation / Setup Clone or reference the repository directly — no build step required. ```bash git clone https://github.com/kzhrknt/awesome-design-md-jp.git cd awesome-design-md-jp ``` Copy the template into your project: ```bash cp template/DESIGN.md your-project/DESIGN.md ``` Or reference an existing service as a starting point: ```bash cp design-md/muji/DESIGN.md your-project/DESIGN.md # then edit for your brand ``` Place `DESIGN.md` at your project root alongside `AGENTS.md`: ``` your-project/ ├── AGENTS.md # how to build ├── DESIGN.md # how it should look and feel ← add this ├── src/ └── ... ``` --- ## DESIGN.md Template Structure The template extends the standard Google Stitch 9-section format with Japanese typography subsections. ### Full Template ```markdown # DESIGN.md ## 1. Overview Brief description of the product, target users, and overall visual direction. ## 2. Color Palette | Token | Value | Usage | |-----------------|-----------|------------------| | `--color-primary` | `#0066CC` | CTAs, links | | `--color-bg` | `#FFFFFF` | Page background | | `--color-text` | `#1A1A1A` | Body text | | `--color-muted` | `#666666` | Secondary text | ## 3. Typography ### 3.1 Font Families **和文（Japanese）** ```css font-family: "Noto Sans JP", /* Google Fonts — preferred web font */ "Hiragino Kaku Gothic ProN", /* macOS / iOS */ "Hiragino Sans", /* macOS newer */ "Meiryo", /* Windows */ "Yu Gothic", /* Windows 8.1+ */ sans-serif; ``` **欧文（Latin / alphanumeric）** ```css font-family: "Inter", /* preferred web font for Latin */ -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; ``` **混植（Mixed typesetting）** Use Japanese font as base; Latin glyphs rendered by Inter layered on top via `@font-face` unicode-range. ### 3.2 Type Scale | Role | Size | Weight | Line-height | Letter-spacing | |------------|----------|--------|-------------|----------------| | Display | 2.5rem | 700 | 1.4 | -0.02em | | Heading 1 | 2rem | 700 | 1.5 | -0.01em | | Heading 2 | 1.5rem | 600 | 1.5 | 0 | | Body | 1rem | 400 | 1.8 | 0.04em | | Small | 0.875rem | 40