Japan Ux MCP

🗾 japan-ux-mcp

日本設計 —— 面向 AI 編程代理的 UI + UX 正確性校驗。 一個前端**「執法者」**：將它指向真實的 CSS／標記，它會依據日本標準為你的 UI 打分 —— 排版（禁則處理 kinsoku、行高、字體）、色彩象徵、字體性能 —— 並附上 W3C JLReq / JIS X 4051 引用與修復建議。此外還涵蓋完整的 UX 層面：表單（姓名／假名 furigana）、敬語（keigo）、信任信號、法律合規與季節性設計。

主打工具：review_jp_ui —— 前端正確性執法者（在任何 UI 上線日本之前運行它，包括西式風格的 UI）。

🧩 十一個工具、十個提示詞、九個資源。本地運行，無需 API 密鑰。 結果會標註為 spec（JLReq/JIS 規範）還是 convention（有據可查的日本 Web 慣例），從而絕不誇大權威性。

📦 安裝

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

⚙️ JSON 配置

各客戶端的服務器配置相同，僅文件路徑不同。

{
  "mcpServers": {
    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }
  }
}

{
  "mcpServers": {
    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }
  }
}

{
  "mcpServers": {
    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }
  }
}

{
  "servers": {
    "japan-ux": { "type": "stdio", "command": "npx", "args": ["-y", "japan-ux-mcp"] }
  }
}

{
  "mcpServers": {
    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }
  }
}

{
  "mcpServers": {
    "japan-ux": { "command": "npx", "args": ["-y", "japan-ux-mcp"] }
  }
}

{
  "context_servers": {
    "japan-ux": { "command": { "path": "npx", "args": ["-y", "japan-ux-mcp"] } }
  }
}

🛠️ 從源碼構建

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

將客戶端配置指向構建後的入口：

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

🔧 工具

💬 提示詞

📚 資源

💡 示例提示詞

為日本 B2B SaaS 產品構建一個註冊表單。包含姓名、
郵箱、電話、公司、地址。使用 TSX 與 Tailwind。

為這個表單審查日本慣例：
<form>
  <input name="firstName" placeholder="First Name" />
  <input name="lastName" placeholder="Last Name" />
  <input name="email" />
  <input name="phone" />
  <button>Submit</button>
</form>

為日本市場轉換這個表單（金融科技場景）：
<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>

我需要一個銀行應用的日文 UI 文案：
- 錯誤："Invalid email address"
- 按鈕："Submit application"
- 空狀態："No transactions yet"
- 確認："Are you sure you want to delete?"

檢查這段 CSS 是否存在日文排版問題：
body { font-family: Arial; font-size: 14px; line-height: 1.4; font-style: italic; }

對這個 B2B SaaS 落地頁進行日本 UX 審計。Hero 使用英文
標語、功能網格、定價表、頁頭無電話號碼、無
公司信息頁、單欄佈局。

🗃️ 內置數據

所有數據隨包附帶。無外部 API、無密鑰、無網絡請求。

📐 涵蓋的規範

📝 表單與輸入

✍️ 排版

🏗️ 佈局與結構

🤝 信任與法律

🎨 視覺與配色

🍁 季節

🖥️ 客戶端支持

🇯🇵 日語簡介

一個面向日本 Web UX 慣例的 MCP 服務器。以工具、提示詞、資源的形式，提供姓名順序、假名、3 段式電話號碼、〒 地址流程、敬語級別、排版、信任信號、特定商取引法等法律要求，以及季節性設計。

可在 Claude Code、Cursor、Windsurf 等支持 MCP 的客戶端中運行。本地運行，無需 API 密鑰。

⚠️ 免責聲明

本服務器返回的是構建面向日本產品時的指南、風格規則與文化背景。它不會調用任何品牌的 API，也不代表任何品牌行事。示例或建議中出現的公司及服務名稱（銀行、移動運營商、支付服務、快遞公司等）是作為面向日本用戶的文化背景引用，而非認可或隸屬關係。所有商標均歸其各自所有者所有。

📄 許可證

MIT

🔗 更多 MCP

由 Marsel Bait 在東京打造 🌸