# awesome-design-md-jp

Provides Japanese UI specifications in DESIGN.md format for AI agents. It sets up CJK typography, font fallback chains, and punctuation line-break rules.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 668 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/awesome-design-md-jp/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/awesome-design-md-jp

## What it does

AI agents read `DESIGN.md` for UI guidance. This skill extends the Google Stitch specification format specifically for Japanese websites. It configures CJK font fallback stacks, expands body line-height to values between 1.5 and 2.0, and sets letter-spacing between `0.04em` and `0.1em`. It also activates OpenType attributes `palt` and `kern` for proportional glyph spacing.

The package supplies 24 reference files based on services like MUJI, SmartHR, Mercari, and LINE. Each spec defines mixed Latin and Japanese typesetting alongside kinsoku shori line-breaking rules using `line-break: strict`. Without these rules in `DESIGN.md`, coding agents fall back to Western text styling, creating cramped Japanese paragraphs with orphaned punctuation marks.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/awesome-design-md-jp/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/awesome-design-md-jp/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/awesome-design-md-jp/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/awesome-design-md-jp/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills awesome-design-md-jp
```

2. **Manually: put the files in place**
- File: `.github/skills/awesome-design-md-jp/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/awesome-design-md-jp
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/awesome-design-md-jp/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill awesome-design-md-jp -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/awesome-design-md-jp/SKILL.md

## When to use it
- configure kinsoku shori line-break rules for CJK punctuation
- build mixed typography font stacks for Japanese and Latin text
- generate a DESIGN.md spec matching MUJI or SmartHR styles
- adjust line-height and letter-spacing for Japanese web layouts

## Example prompts
- Create a DESIGN.md file for a Japanese web app with kinsoku shori rules
- Generate a Japanese UI design spec modeled after the MUJI style
- Add Japanese font stacks and OpenType palt settings to DESIGN.md

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 186 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md