japan-ux-mcp

Japanische UX-Konventionen als MCP-Server. Funktioniert mit Claude Code, Cursor, Windsurf, VS Code (Copilot), Claude Desktop, Cline, Zed und jedem anderen MCP-kompatiblen Client.

Ihre KI hört auf, westliche Standardformulare zu generieren, und beginnt mit der Erstellung korrekter japanischer UI: richtige Namensreihenfolge, Furigana, 3-teilige Telefonnummern, Postleitzahlen-Autovervollständigung, Keigo auf dem richtigen Höflichkeitsniveau.

6 Tools · 6 Prompts · 4 Ressourcen · keine API-Schlüssel

Warum gibt es das?

KI generiert standardmäßig westliche UX. Wenn Sie für Japan entwickeln, wissen Sie, was passiert:

• Vorname / Nachname statt 姓 / 名 mit Furigana

• Ein einzelnes Telefonfeld statt der standardmäßigen Aufteilung in drei Felder

• MM/TT/JJJJ statt 年月日 mit Ära-Unterstützung

• Flache Adressfelder statt der 〒 Postleitzahlen-Kaskade

• Stumpfe Fehlermeldungen, wo Keigo erwartet wird

• "John Smith" als Platzhaltertext

Sie können es jedes Mal korrigieren oder dies einmal installieren.

Related MCP server: xendit-mcp

Installation

Einzeilige Installation

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

Starten Sie Claude Code nach der Ausführung neu.

JSON-Konfiguration

Wählen Sie Ihren Client. Die Serverkonfiguration ist überall gleich.

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

Sie können es auch in Ihren Benutzereinstellungen (settings.json) unter mcp.servers hinzufügen, um es projektübergreifend verfügbar zu machen.

Öffnen Sie das MCP-Einstellungsfenster von Cline und fügen Sie Folgendes hinzu:

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

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

Speicherort der Konfigurationsdatei:

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

Aus dem Quellcode

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

Verweisen Sie dann Ihre Client-Konfiguration auf die erstellte Datei:

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

Tools

Diese werden automatisch aufgerufen, wenn die KI einen japanischen UX-Kontext erkennt. Sie müssen sie nicht namentlich referenzieren.

Prompts

Prompt-Vorlagen, die Sie von jedem MCP-Client aus aufrufen können, der sie unterstützt.

Ressourcen

Referenzdaten, auf die Ihre KI während einer Sitzung zugreifen kann.

Vorher / Nachher

Ohne dieses 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

Mit diesem MCP:

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

Beispiel-Prompts

Diese funktionieren in jedem MCP-Client. Einfach kopieren und einfügen.

Formular erstellen

Build a registration form for a Japanese B2B SaaS product.
Include name, email, phone, company, and address. Use TSX with Tailwind.

Bestehendes Formular prüfen

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>

Westliches in Japanisches transformieren

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>

Keigo für UI-Copy

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?"

Testdaten generieren

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

Seite bewerten

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.

Design-Richtung erhalten

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

Was ist enthalten?

Alles läuft lokal. Keine externen APIs, keine Schlüssel, keine Netzwerkaufrufe.

Abgedeckte japanische Konventionen

Wer nutzt das?

Entwickler außerhalb Japans, die Produkte für den japanischen Markt erstellen und es leid sind, jedes Formular, jedes Label und jede Fehlermeldung manuell zu korrigieren.

Japanische Unternehmen, deren KI-Tools standardmäßig westliche Muster verwenden, obwohl das Produkt vollständig auf Japanisch ist.

Lokalisierungsteams. Übersetzung bringt Sie vielleicht zu 30% ans Ziel. Die restlichen 70% sind strukturell: Feldreihenfolge, Telefonaufteilung, Postleitzahlen-Kaskaden, Keigo-Stufen. Das deckt dies ab.

Designer, die mit KI bauen und japanische Muster von Anfang an verfügbar haben möchten, ohne sie in jeder Sitzung erklären zu müssen.

Funktioniert mit

Roadmap

• [x] 6 Kern-Tools: Formulare, Validierung, Platzhalter, Keigo, Scoring, Transformation

• [x] MCP-Prompts und Ressourcen

• [ ] Saisonale Kontexte und kulturelle Audits

• [ ] Typografie-Prüfer für gemischte JP/EN-Texte

• [ ] Referenz-Datenbank für Branchen

• [ ] Matrix für Design-Richtungen

• [ ] Adressformatierer mit Postleitzahlen-API

• [ ] JIS X 8341 Barrierefreiheitsprüfungen

• [ ] Von der Community beigesteuerte Muster

Dokumentation

Lizenz

MIT

Erstellt von Marsel Bait in Tokio