japan-ux-mcp
japan-ux-mcp
MCP 서버로서의 일본 UX 관례. Claude Code, Cursor, Windsurf, VS Code (Copilot), Claude Desktop, Cline, Zed 및 기타 MCP 호환 클라이언트와 함께 작동합니다.
AI가 서구권 기본 양식을 생성하는 것을 멈추고 올바른 일본어 UI를 생성하도록 합니다: 적절한 이름 순서, 후리가나, 3분할 전화번호, 우편번호 자동 완성, 적절한 높임말 수준의 경어 사용.
6개 도구 · 6개 프롬프트 · 4개 리소스 · API 키 불필요
이 프로젝트의 목적
AI는 기본적으로 서구권 UX를 생성합니다. 일본 시장을 위한 제품을 만들고 있다면 다음과 같은 상황을 겪어보셨을 것입니다:
후리가나가 포함된
姓 / 名대신First Name / Last Name사용표준인 3분할 입력 대신 하나의 전화번호 입력창 사용
연호 지원이 포함된
年月日대신MM/DD/YYYY사용〒우편번호 연동 대신 평면적인 주소 필드 사용경어가 필요한 상황에서 무뚝뚝한 오류 메시지
자리 표시자(placeholder) 텍스트로 "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, 내비 다이얼 |
연호 | 5 | 레이와부터 메이지까지의 시작/종료 날짜 |
경어 패턴 | 30 | 9개 요소 유형에 따른 4단계 높임말 UI 문자열 |
너비 규칙 | 6 | 필드 유형별 전각/반각 유효성 검사 |
변환 유틸 | 4 | 012→012, @→@, 서기→연호, 연호→서기 |
다루는 일본 관례
관례 | 실제 의미 |
이름 순서 | 성(姓)이 먼저, 이름(名)이 나중 |
후리가나 | 각 이름 입력창 아래에 가타카나 읽기 필드(セイ/メイ) 배치 |
전화번호 | 3개의 분리된 필드. 패턴: XXX-XXXX-XXXX |
주소 | 〒 우편번호로 도도부현 + 시구정촌 자동 완성. 큰 단위에서 작은 단위 순서 |
날짜 | 年/月/日 입력창 분리 및 선택적 연호 표시 (令和6年 = 2024) |
경어 | 8개 비즈니스 맥락에 매핑된 4단계 높임말 |
문자 너비 | 입력 시 전각 숫자 및 기호를 반각으로 자동 변환 |
신뢰 신호 | 특정상거래법 표기 페이지, 회사 정보, 헤더의 전화번호 |
필드 라벨 | 必須 (필수, 빨간색 배지) 및 任意 (선택) |
확인 | 최종 제출 전 확인 화면 |
사용자
일본 시장을 겨냥한 제품을 만들면서 매번 양식, 라벨, 오류 메시지를 수동으로 수정하는 데 지친 일본 외 지역의 개발자들.
제품 전체가 일본어임에도 불구하고 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