japan-ux-mcp
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.jsonWindows:
%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 上下文时,这些工具会自动调用。你不需要按名称引用它们。
工具 | 功能 |
| 输出日本表单标记:姓/名顺序、假名、〒邮政编码自动填充、3段式电话、年月日日期 |
| 根据日本规范检查现有表单。返回 0-100 分数,包含问题、严重程度和代码修复建议 |
| 创建测试数据:汉字/片假名/罗马字姓名、真实邮政编码、格式化电话号码、年号日期 |
| 接收英文 UI 文本,返回适合业务上下文的日语礼貌程度文本 |
| 从 5 个维度评估页面:表单、文案、信任信号、排版、文化契合度 |
| 将西方标记重写为日本就绪版本。显示修改前后的分数,并解释每次更改 |
提示词
支持 MCP 的客户端均可调用的提示词模板。
提示词 | 功能 |
| 指导构建日本表单 |
| 审计粘贴的标记以查找日本 UX 问题 |
| 转换西方标记并进行修改前后评分 |
| 为原型生成日本测试数据 |
| 获取 UI 文本的正确礼貌程度 |
| 为页面描述的日本就绪程度评分 |
资源
AI 在会话期间可以访问的参考数据。
资源 | 内容 |
| 8 种业务上下文下的 4 种礼貌程度,30+ UI 文案模式 |
| 发布前审查的日本表单规范检查清单 |
| 移动电话、固定电话、免费电话、IP 电话模式及字段拆分规则 |
| 从令和到明治的日期范围及转换公式 |
修改前后
没有此 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 无障碍检查
[ ] 社区贡献的模式
文档
文件 | 内容 |
每个工具的输入/输出规范及示例 | |
10 个工作流模板和面试演示脚本 | |
所有内置数据:都道府县、姓名、电话、年号、敬语 | |
竞争格局及本项目定位 | |
产品需求和设计决策 | |
分阶段构建计划 |
许可证
由 Marsel Bait 在东京构建
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