Skip to main content
Glama

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.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, 내비 다이얼

연호

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 접근성 검사

  • [ ] 커뮤니티 기여 패턴


문서

파일

내용

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