design MCP Server
MCP server for Japanese web UX conventions. Generates and audits forms, typography, layout, trust signals, legal requirements, keigo, and seasonal design.
Discovered via github-topic:mcp and last synced 3mo ago.
1. Install the package
npx japan-ux-mcp
2. Add to claude_desktop_config.json
{
"mcpServers": {
"japan-ux-mcp": {
"command": "npx",
"args": [
"japan-ux-mcp"
]
}
}
}Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)
Rates a page across five categories: forms, copy, trust signals, typography, cultural fit.
Description
Font stacks, type scale, line-height, kinsoku shori, CSS suggestions.
Grid, spacing, density, responsive breakpoints, structural patterns.
Grid, spacing, density, responsive, structural patterns
Japanese-specific color associations with hex values
Required on all interior pages
Tools and resources
100
Color meanings, imagery, icons, shadows, corners
Three separate fields. Pattern: XXX-XXXX-XXXX
Walks through building a Japanese form.
Returns seasonal design context for a specific month.
令和 through 明治 with date ranges and conversion formulas.
47
Full year with design impact and business notes
Separate 年/月/日 inputs with optional era display (令和6年 = 2024)
Converts English UI text to Japanese at the appropriate politeness level for a given business context.
Description
Rewrites Western markup into Japan-ready markup with a before/after score and per-change explanations.
Scores a page description for Japan-readiness.
Scores a form against JP conventions (0-100) with issues, severity, and code fixes.
Audits pasted markup for JP UX issues.
Content
Audits CSS for Japanese typography: font stacks, line-height, kinsoku shori, sizing, palt.
Returns the current season, active events, 24 microseasons (二十四節気), and launch blackout windows.
12
Header, footer, menu, search, breadcrumb, pagination
Outputs Japanese form markup: 姓/名 order, furigana, 〒 postal auto-fill, 3-field phone, 年月日 dates.
Produces a Japan-specific design brief from brand type, audience, and industry.
Seven-category audit (layout, typography, visual, navigation, trust, content, mobile) with a letter grade.
Checks CSS for Japanese typography issues.
Generates Japanese test data for prototypes.
Japanese form conventions for pre-ship review.
System, web, serif, mixed modern/elegant/rounded/corporate
Katakana reading fields (セイ/メイ) below each name input
Four politeness levels mapped to eight business contexts
Returns test data: names in kanji/katakana/romaji, real postal codes, formatted phone numbers, era dates.
Generates a Japan-specific visual direction.
Japanese color meanings, the red-name taboo, visual design rules.
24
Tools, prompts, resources
Transforms Western markup with before/after scoring.
Four politeness levels across eight business contexts, 30+ UI copy patterns.
Count
Font stacks, sizing, line-height, wrapping, rendering
What it does
Returns UI text at the appropriate politeness level.
Mobile, landline, toll-free, IP phone patterns with field-split rules.
Practice
Runs a full seven-category Japanese UX audit.
24 events, 24 microseasons, seasonal palettes, launch blackout dates.
5
特定商取引法, APPI, 景品表示法, 薬機法, and more
確認画面 review screen before final submission
Tools, prompts, resources
Trust signals, legal pages, and social proof by site type.
UI strings at 4 politeness levels across 9 element types
Tools, prompts, resources
Full-width/half-width validation per field type
Company info, social proof, certifications, contact
Support
〒 postal code auto-fills prefecture + city. Large-to-small order
Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.
Challenges hacky fixes on non-trivial changes.
Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap), images (text on images, user content, icons), and finishing touches (accent borders, empty states, fewer borders). Trigger on "UI design", "visual hierarchy", "spacing system", "type scale", "color palette", "shadow", "layout", "design system", "component design", "card design", "form design", "button design", "refactoring UI", "design tokens", "dark mode", "responsive design".
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
Design engineering skill for AI Agents — build interfaces with craft-level quality
Learn how to use the absolute-spec Claude skill. Complete guide with installation instructions and examples.
Learn how to use the oasis-design-system Claude skill. Complete guide with installation instructions and examples.
Learn how to use the Typography Advisor Claude skill. Complete guide with installation instructions and examples.