Skip to content
UXClaim
Design Systems

Japanese Web Design Guardrails

Build Japanese-ready web interfaces with CJK typography, cultural patterns, form design, and accessibility standards.

View source More in Design Systems

What It Does

Japanese Web Design Guardrails is a Claude Code skill that automatically ensures Japanese web interfaces follow professional standards for typography, forms, and cultural UX patterns. It activates whenever you build anything involving Japanese content—landing pages, forms, components—and guides the output toward production-ready quality.

Key Features

Typography & Text: Implements JLREQ specifications with correct font stacks (Gothic/Mincho), CJK line-height rules, kinsoku shori line-breaking rules, text emphasis marks (bouten), ruby/furigana annotations, and vertical text (tategaki) support. Uses modern CSS properties like text-autospace and word-break: auto-phrase.

Form Design: Provides field patterns for names (family-first with furigana), addresses (postal code auto-fill, prefecture ordering), phone numbers (three-field layout), dates (Imperial era support), and currency (yen formatting). Includes confirmation screen flows (入力 → 確認 → 完了).

UX Copy & Cultural Patterns: Includes 50+ common Japanese button labels, politeness registers (丁寧語/敬語), information density conventions (bento layouts), seasonal color themes, and payment methods (konbini, PayPay).

Who Benefits

Design teams localizing for Japan, design systems leaders supporting multiple languages, and practitioners building culturally-appropriate interfaces without deep Japanese expertise.

Frequently asked questions

How do I use Japanese Web Design Guardrails?
Install the skill with `claude plugin install https://github.com/mrslbt/jp-web-design-guardrails`. It automatically activates when Claude detects Japanese context (ask to build a Japanese form, landing page, etc.). You can manually invoke it with `/jp-design`. The skill provides guardrails, code snippets, and pattern recommendations in real-time.
What typography standards does this cover?
The skill implements JLREQ (Japanese Layout Requirements) including correct font stacks, CJK line-height rules, kinsoku shori (line-breaking prohibition), text emphasis marks (bouten), ruby/furigana annotations, vertical text (tategaki), and modern CSS properties like `text-autospace` and `word-break: auto-phrase`. It also handles Google Fonts auto-slicing for CJK font optimization.
How does it handle Japanese form design?
It provides patterns for family-name-first name fields with furigana (フリガナ), address fields with postal code auto-fill and prefecture-to-building ordering, three-field phone number layout (090-XXXX-XXXX), dates with Imperial era support (令和/平成), yen currency formatting, and confirmation screen flows (入力 → 確認 → 完了).
Does it include accessibility standards?
Yes. The skill covers JIS X 8341-3 compliance, screen reader rules for mixed Japanese/English content, and kanji misreading handling. These guidelines ensure your interface is accessible to Japanese users using assistive technologies.
What cultural UI patterns are included?
Patterns include information density conventions (bento-style layouts), seasonal color themes (四季), social login ordering (LINE first), payment methods (konbini, PayPay), and privacy policy/terms structures common in Japan. These help your interface feel natural to Japanese users.
Can I copy production CSS from this skill?
Yes. The skill includes 8 copy-paste-ready CSS snippets covering baseline typography, headings, forms, vertical text, cards, and state messages (error, success, loading, empty). These are production-ready and follow modern CSS standards.
What's the difference between Japanese and English web design?
Japanese web design requires different typography (line-height, character spacing, text emphasis), form field ordering (family name first), cultural conventions (konbini payments, Imperial dates), information density patterns, and accessibility considerations for kanji. This skill automates these differences.
Does it support vertical text layout?
Yes. The skill supports tategaki (vertical text) with tate-chu-yoko (horizontal text within vertical lines), proper font selection, and CSS implementation using logical properties. It's useful for titles, poetry, or culturally-specific design layouts.

Glossary

CJK
Chinese, Japanese, and Korean characters. A character set category requiring special typography and layout rules different from Latin text.
JLREQ
Japanese Layout Requirements specification. The professional standard for Japanese typographic rules, line-breaking, and text spacing.
Kinsoku Shori
Japanese line-breaking prohibition rules. Prevents certain characters from appearing at line starts or ends (e.g., commas shouldn't start a line).
Tategaki
Vertical text layout in Japanese. Text flows top-to-bottom, right-to-left. Often used for titles and traditional design.
Furigana
Small phonetic characters (hiragana) placed above or beside kanji to indicate pronunciation. Commonly used for unfamiliar kanji or children's content.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.