Skip to main content
Glama

japan-ux-mcp

作为 MCP 服务器的日本 UX 规范。适用于 Claude Code、Cursor、Windsurf、VS Code (Copilot)、Claude Desktop、Cline、Zed 以及任何其他兼容 MCP 的客户端。

让你的 AI 停止生成西方默认的表单,开始产出正确的日本 UI:正确的姓名顺序、假名、三段式电话号码、邮政编码自动填充、符合礼貌程度的敬语。

6 个工具 · 6 个提示词 · 4 个资源 · 无需 API 密钥


为什么存在这个项目

AI 默认生成西方 UX。如果你正在为日本市场构建产品,你一定遇到过以下情况:

  • First Name / Last Name 而不是带有假名的 姓 / 名

  • 一个电话输入框而不是标准的三个字段拆分

  • MM/DD/YYYY 而不是带有年号支持的 年月日

  • 平铺的地址字段而不是 邮政编码级联

  • 在需要敬语的地方出现生硬的错误提示

  • 使用 "John Smith" 作为占位符文本

你可以每次都手动纠正,或者安装此工具一次解决。


Related MCP server: xendit-mcp

安装

一行安装

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

运行此命令后请重启 Claude Code。

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"]
    }
  }
}

你也可以将其添加到用户设置 (settings.json) 的 mcp.servers 下,使其在所有项目中可用。

打开 Cline 的 MCP 设置面板并添加:

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

配置文件位置:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "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"]
}

工具

当 AI 识别到日本 UX 上下文时,这些工具会自动调用。你不需要按名称引用它们。

工具

功能

generate_jp_form

输出日本表单标记:姓/名顺序、假名、〒邮政编码自动填充、3段式电话、年月日日期

validate_jp_form

根据日本规范检查现有表单。返回 0-100 分数,包含问题、严重程度和代码修复建议

generate_jp_placeholder

创建测试数据:汉字/片假名/罗马字姓名、真实邮政编码、格式化电话号码、年号日期

suggest_keigo_level

接收英文 UI 文本,返回适合业务上下文的日语礼貌程度文本

score_japan_readiness

从 5 个维度评估页面:表单、文案、信任信号、排版、文化契合度

transform_for_japan

将西方标记重写为日本就绪版本。显示修改前后的分数,并解释每次更改


提示词

支持 MCP 的客户端均可调用的提示词模板。

提示词

功能

japan_form

指导构建日本表单

japan_audit

审计粘贴的标记以查找日本 UX 问题

japan_transform

转换西方标记并进行修改前后评分

japan_testdata

为原型生成日本测试数据

japan_keigo

获取 UI 文本的正确礼貌程度

japan_score

为页面描述的日本就绪程度评分


资源

AI 在会话期间可以访问的参考数据。

资源

内容

keigo-guide

8 种业务上下文下的 4 种礼貌程度,30+ UI 文案模式

form-checklist

发布前审查的日本表单规范检查清单

phone-formats

移动电话、固定电话、免费电话、IP 电话模式及字段拆分规则

era-calendar

从令和到明治的日期范围及转换公式


修改前后

没有此 MCP 时:

You: "Build a registration form"
AI:  <input name="firstName" placeholder="First Name" />
     <input name="phone" />
     <button>Submit</button>
You: "No, Japanese style..." → 30 min of back and forth

使用此 MCP 后:

You: "Build a registration form for a Japanese ecommerce site"
AI:  [calls generate_jp_form]
     姓/名 + furigana, 〒 postal, 3-field phone,
     年月日 dates, "ご購入手続きへ" button

示例提示词

这些在任何 MCP 客户端中都有效。复制粘贴即可使用。

构建表单

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>

UI 文案的敬语

I need Japanese UI copy for a banking app:
- Error: "Invalid email address"
- Error: "Session expired"
- Button: "Submit application"
- Empty state: "No transactions yet"
- Confirmation: "Are you sure you want to delete?"

生成测试数据

Generate 10 Japanese user profiles for a prototype.
Mixed gender, ages 25-45. Include full address and company.

页面评分

Score this checkout page for Japan-readiness:
Single name field, email, one phone field, US-style address,
"Buy Now" button, no company info in footer, no privacy policy.

获取设计指导

I'm designing a luxury ryokan booking site for Japanese domestic travelers.
What design direction should I take? Keigo level, colors, typography, trust signals.

内置内容

所有内容均在本地运行。无外部 API,无密钥,无网络调用。

数据

数量

详情

都道府县

47

代码、名称、假名、罗马字、地区

姓名

100

50 个姓氏 + 50 个名字(汉字/假名/罗马字)

地址

12

主要城市的真实邮政编码

电话格式

6

移动、固定、免费、IP、Navi Dial

年号

5

从令和到明治的开始/结束日期

敬语模式

30

9 种元素类型下 4 种礼貌程度的 UI 字符串

宽度规则

6

每种字段类型的全角/半角验证

转换工具

4

012→012, @→@, 公历→年号, 年号→公历


涵盖的日本规范

规范

实际含义

姓名顺序

姓在前,名在后

假名

每个姓名输入框下方都有片假名读取字段 (セイ/メイ)

电话

3 个独立字段。模式:XXX-XXXX-XXXX

地址

〒邮政编码自动填充都道府县 + 城市。从大到小顺序

日期

独立的年/月/日输入框,可选年号显示 (令和6年 = 2024)

敬语

映射到 8 种业务上下文的 4 种礼貌程度

字符宽度

输入时自动将全角数字和符号转换为半角

信任信号

特定商取引法披露页面、公司信息、页眉中的电话号码

字段标签

必须 (required, 红色徽章) 和 任意 (optional)

确认

最终提交前的确认画面 review screen


谁在使用这个

在日本以外构建面向日本市场产品,且厌倦了手动纠正每个表单、标签和错误信息的开发者。

AI 工具即使在产品完全是日语的情况下,也总是默认使用西方模式的日本公司。

本地化团队。翻译只能解决 30% 的问题。剩下的 70% 是结构性的:字段顺序、电话拆分、邮政编码级联、敬语级别。这正是本项目所涵盖的内容。

使用 AI 进行设计,并希望从一开始就获得日本模式,而无需在每次会话中解释的设计师。


兼容性

客户端

支持情况

Claude Code

完全支持 (工具、提示词、资源)

Cursor

完全支持

Windsurf

完全支持

VS Code (GitHub Copilot)

完全支持

Cline

完全支持

Claude Desktop

完全支持

Zed

工具和资源

任何 stdio MCP 客户端

完全支持


路线图

  • [x] 6 个核心工具:表单、验证、占位符、敬语、评分、转换

  • [x] MCP 提示词和资源

  • [ ] 季节性上下文和文化审计

  • [ ] 日英混合文本的排版检查器

  • [ ] 按业务垂直领域的参考站点数据库

  • [ ] 设计方向矩阵

  • [ ] 带邮政编码 API 的地址格式化工具

  • [ ] JIS X 8341 无障碍检查

  • [ ] 社区贡献的模式


文档

文件

内容

TOOLS.md

每个工具的输入/输出规范及示例

PROMPTS.md

10 个工作流模板和面试演示脚本

DATA.md

所有内置数据:都道府县、姓名、电话、年号、敬语

COMPETITORS.md

竞争格局及本项目定位

PRD.md

产品需求和设计决策

ROADMAP.md

分阶段构建计划


许可证

MIT


Marsel Bait 在东京构建

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - A tier

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/mrslbt/japan-ux-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server