Japan Ux

io.github.mrslbt由 GitHub 帳號 mrslbt 發布v2.1.1更新於 Oct 24, 2026

Japanese UI + UX correctness for AI coding agents — typography, forms, keigo, JLReq checks.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

針對 CSS 與標記評估並修正日本 UI/UX,涵蓋排版、表單、敬語、信任訊號與季節設計。

可以做什麼
這是一個本機 MCP 伺服器,依日本 Web 慣例審查前端程式碼。主力工具 review_jp_ui 會依據 W3C JLReq / JIS X 4051 引用,為 CSS 與標記的排版、色彩象徵與字型負載評分並提出修正建議。其他工具可產生與驗證日式表單、產出測試資料、建議敬語禮貌等級、依七個類別稽核頁面,並回傳季節背景資訊。結論會標示為規範或慣例,避免誇大權威性。
適用情境
在為日本市場建置或調整產品時使用,讓助理在發布前檢查表單、姓名順序、假名注音、電話與地址欄位、排版、信任訊號與法定揭露。也適合稽核面向日本市場的西式頁面。
執行需求
以 stdio 本機程序執行,可透過 npx(套件名稱 japan-ux-mcp)啟動,或以 Node.js 從原始碼建置後執行。不需要 API 金鑰、帳號或網路呼叫,參考資料隨套件提供。僅支援桌面 MCP 用戶端。
安裝前請注意
它只回傳指引與樣式規則,不呼叫任何品牌 API,也不代表品牌行事;範例中出現的公司名稱屬於文化背景,並非背書。套用建議前請自行複核,因為規範類與慣例類結論的權重不同。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Japan Ux,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

japan-ux-mcp

[npm version] [npm downloads] [MCP Badge] [japan-ux-mcp MCP server] [License: MIT]

Japan Design — UI + UX correctness for AI coding agents. A front-end enforcer: point it at real CSS/markup and it scores your UI against the Japanese standard — typography (kinsoku, line-height, fonts), colour symbolism, font performance — with W3C JLReq / JIS X 4051 citations and fixes. Plus the full UX layer: forms (姓名/furigana), keigo, trust signals, legal, and seasonal design.

Lead tool: review_jp_ui — the front-end correctness enforcer (run it on any UI, including Western-built, before shipping to Japan).

Eleven tools, ten prompts, nine resources. Runs locally, no API keys. Findings are labelled spec (JLReq/JIS) vs convention (documented JP web practice) so authority is never overstated.

Install

bash
claude mcp add japan-ux -- npx -y japan-ux-mcp

JSON config

The server config is the same across clients; only the file path differs.

Claude Code — ~/.claude/.mcp.json
json
{  "mcpServers": {    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }  }}
Cursor — ~/.cursor/mcp.json
json
{  "mcpServers": {    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }  }}
Windsurf — ~/.codeium/windsurf/mcp_config.json
json
{  "mcpServers": {    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }  }}
VS Code (GitHub Copilot) — .vscode/mcp.json
json
{  "servers": {    "japan-ux": { "type": "stdio", "command": "npx", "args": ["-y", "japan-ux-mcp"] }  }}
Cline (VS Code extension)

Open Cline's MCP settings panel and add:

json
{  "mcpServers": {    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }  }}
Claude Desktop — claude_desktop_config.json
json
{  "mcpServers": {    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }  }}

Config path:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
Zed — ~/.config/zed/settings.json
json
{  "context_servers": {    "japan-ux": { "command": { "path": "npx", "args": ["-y", "japan-ux-mcp"] } }  }}

From source

bash
git clone https://github.com/mrslbt/japan-ux-mcp.gitcd japan-ux-mcpnpm install && npm run build

Point the client config at the built entry:

json
{ "command": "node", "args": ["/absolute/path/to/japan-ux-mcp/dist/index.js"] }

Tools

ToolDescription
review_jp_uiFlagship enforcer — scores CSS/markup against the Japanese UI standard (typography, colour, font payload) with JLReq/JIS citations and fixes.
generate_jp_formOutputs Japanese form markup: 姓/名 order, furigana, 〒 postal auto-fill, 3-field phone, 年月日 dates.
validate_jp_formScores a form against JP conventions (0-100) with issues, severity, and code fixes.
generate_jp_placeholderReturns test data: names in kanji/katakana/romaji, real postal codes, formatted phone numbers, era dates.
suggest_keigo_levelConverts English UI text to Japanese at the appropriate politeness level for a given business context.
score_japan_readinessRates a page across five categories: forms, copy, trust signals, typography, cultural fit.
transform_for_japanRewrites Western markup into Japan-ready markup with a before/after score and per-change explanations.
check_jp_typographyAudits CSS for Japanese typography: font stacks, line-height, kinsoku shori, sizing, palt.
get_seasonal_contextReturns the current season, active events, 24 microseasons (二十四節気), and launch blackout windows.
audit_japan_uxSeven-category audit (layout, typography, visual, navigation, trust, content, mobile) with a letter grade.
design_direction_for_japanProduces a Japan-specific design brief from brand type, audience, and industry.

Prompts

PromptDescription
japan_formWalks through building a Japanese form.
japan_auditAudits pasted markup for JP UX issues.
japan_transformTransforms Western markup with before/after scoring.
japan_testdataGenerates Japanese test data for prototypes.
japan_keigoReturns UI text at the appropriate politeness level.
japan_scoreScores a page description for Japan-readiness.
japan_typographyChecks CSS for Japanese typography issues.
japan_seasonalReturns seasonal design context for a specific month.
japan_full_auditRuns a full seven-category Japanese UX audit.
japan_design_directionGenerates a Japan-specific visual direction.

Resources

ResourceContent
keigo-guideFour politeness levels across eight business contexts, 30+ UI copy patterns.
form-checklistJapanese form conventions for pre-ship review.
phone-formatsMobile, landline, toll-free, IP phone patterns with field-split rules.
era-calendar令和 through 明治 with date ranges and conversion formulas.
typography-guideFont stacks, type scale, line-height, kinsoku shori, CSS suggestions.
seasonal-calendar24 events, 24 microseasons, seasonal palettes, launch blackout dates.
trust-checklistTrust signals, legal pages, and social proof by site type.
color-guideJapanese color meanings, the red-name taboo, visual design rules.
layout-guideGrid, spacing, density, responsive breakpoints, structural patterns.

Example prompts

Build a registration form for a Japanese B2B SaaS product. Include name,email, phone, company, and address. Use TSX with Tailwind.
Audit this form for Japanese conventions:<form>  <input name="firstName" placeholder="First Name" />  <input name="lastName" placeholder="Last Name" />  <input name="email" />  <input name="phone" />  <button>Submit</button></form>
Transform this form for the Japanese market (fintech context):<form>  <label>First Name <input name="firstName" /></label>  <label>Last Name <input name="lastName" /></label>  <label>Phone <input name="phone" /></label>  <label>Address <input name="address" /></label>  <button type="submit">Submit</button></form>
I need Japanese UI copy for a banking app:- Error: "Invalid email address"- Button: "Submit application"- Empty state: "No transactions yet"- Confirmation: "Are you sure you want to delete?"
Check this CSS for Japanese typography issues:body { font-family: Arial; font-size: 14px; line-height: 1.4; font-style: italic; }
Run a Japanese UX audit on this B2B SaaS landing page. Hero with Englishtagline, feature grid, pricing table, no phone number in header, nocompany info page, single-column layout.

Bundled data

All data ships with the package. No external APIs, no keys, no network calls.

DataCountDetails
Prefectures47Code, name, kana, romaji, region
Names10050 surnames + 50 given names in kanji/kana/romaji
Addresses12Real postal codes across major cities
Phone formats6Mobile, landline, toll-free, IP, Navi Dial
Eras5令和 through 明治 with start/end dates
Keigo patterns30UI strings at 4 politeness levels across 9 element types
Width rules6Full-width/half-width validation per field type
Layout rules28Grid, spacing, density, responsive, structural patterns
Typography rules24Font stacks, sizing, line-height, wrapping, rendering
Font stacks7System, web, serif, mixed modern/elegant/rounded/corporate
Visual rules21Color meanings, imagery, icons, shadows, corners
Navigation rules16Header, footer, menu, search, breadcrumb, pagination
Trust signals20Company info, social proof, certifications, contact
Legal requirements10特定商取引法, APPI, 景品表示法, 薬機法, and more
Seasonal events25Full year with design impact and business notes
Microseasons24二十四節気 with approximate dates
Color meanings9Japanese-specific color associations with hex values
Platform patterns30+LINE, QR codes, mobile payments, IME handling, social sharing
Accessibility rules20+JIS X 8341-3, aging population, screen readers, furigana
Content patterns15+Density, copy, product pages, localization rules

Conventions covered

Forms and input

ConventionPractice
Name orderFamily name (姓) first, given name (名) second
FuriganaKatakana reading fields (セイ/メイ) below each name input
PhoneThree separate fields. Pattern: XXX-XXXX-XXXX
Address〒 postal code auto-fills prefecture + city. Large-to-small order
DatesSeparate 年/月/日 inputs with optional era display (令和6年 = 2024)
Character widthAuto-convert full-width digits and symbols to half-width on input
Confirmation確認画面 review screen before final submission

Typography

ConventionPractice
No italicsJapanese has no italic form. Use bold, color, or size for emphasis
Line-height 1.8+Kanji density requires more vertical space than Latin text
16px body minimumKanji readability breaks below 14px
Kinsoku shoriword-break: keep-all + line-break: strict. Never start a line with punctuation
Font stacksHiragino Sans, Yu Gothic, Meiryo cascade. Noto Sans JP for web fonts
Mixed EN/JPEnglish font first, Japanese fallback: "Inter", "Noto Sans JP", sans-serif

Layout and structure

ConventionPractice
Information densityDense layouts are trusted. Sparse reads as hiding information
1280px PC / 375px mobileStandard artboard sizes with 140-160px side margins
Section spacing100px between major sections (PC), 60px on mobile
Alternating zigzagImage-left/text-right, then reverse. Standard on Japanese LPs
BreadcrumbsRequired on all interior pages
Repeat CTAsPlace conversion buttons at multiple scroll points

Trust and legal

ConventionPractice
特定商取引法Required legal disclosure for ecommerce. Seller info, returns, payment
会社概要Company profile page with address, CEO name, capital, founding year
Phone in headerVisible phone number signals legitimacy. 0120 toll-free preferred
Privacy policy個人情報保護方針 required by APPI (amended April 2022)
Proof numbersSpecific metrics near hero: 1,247社導入, 業務効率30%改善
KeigoFour politeness levels mapped to eight business contexts

Visual and color

ConventionPractice
Red = prosperityNot danger. Used freely as a primary brand color
No red namesRed-on-white for names carries a death association. Use dark text
Black + white aloneFuneral association. Add an accent color
Bright palettesDense, colorful layouts are normal. Dark theme adoption lags the West
Manga/anime illustrationUsed across industries, including banks and government

Seasonal

ConventionPractice
4 seasons, 24 microseasonsEach has distinct color palettes and design motifs
Golden Week (Apr 29 - May 5)Launch blackout. Most businesses closed
Obon (Aug 13-16)Launch blackout. Travel peak
Christmas is romanticCouples celebrate. Families gather at New Year
お中元 / お歳暮Mid-year and year-end gift seasons. Major ecommerce windows

Client support

ClientSupport
Claude CodeTools, prompts, resources
CursorTools, prompts, resources
WindsurfTools, prompts, resources
VS Code (GitHub Copilot)Tools, prompts, resources
ClineTools, prompts, resources
Claude DesktopTools, prompts, resources
ZedTools and resources
Any stdio MCP clientTools, prompts, resources

日本語

日本のWeb UX慣習のためのMCPサーバーです。姓名順、フリガナ、3分割電話番号、〒住所フロー、敬語レベル、タイポグラフィ、信頼シグナル、特定商取引法などの法要件、季節デザインをツール・プロンプト・リソースとして提供します。

Claude Code、Cursor、Windsurf など MCP 対応クライアントで動作します。ローカル動作、APIキー不要。

Disclaimer

This server returns guidance, style rules, and cultural context for building Japanese-facing products. It does not call any brand's API or act on a brand's behalf. Company and service names that appear in examples or recommendations (banks, mobile carriers, payment services, delivery companies, etc.) are referenced as cultural context for users in Japan, not as endorsements or affiliations. All trademarks belong to their respective owners.

License

MIT


More MCPs

MCPWhat it does
ripprYouTube transcript ripper for humans and AI agents
RakutenSearch Rakuten's marketplace, books, and hotels
XenditXendit payment APIs: invoices, disbursements, balances

Built by Marsel Bait in Tokyo

來源:README.md,提交 8ed5bb6

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包,因此其工具未知。

版本歷史

1
  1. v2.1.1最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手;SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list,或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分