Role Designer + Vibe coder
Stack TypeScript · MCP · npm
Year 2026
Ship npm · Open source

I kept watching AI code tools generate Western forms for Japanese products. firstName and lastName in the wrong order, one combined phone field, MM/DD/YYYY dates, no furigana, no postal-code auto-fill. Every single one of those breaks Japanese convention, and none of it is the model's fault. The conventions are just not in its training data densely enough to win against the English defaults.

Seven years of working on Japanese products had given me a mental checklist. Name order. Three-field phones. The 〒 postal flow. Kinsoku shori. Red-on-white name taboo. Keigo levels per business context. I wrote it all down as tools, prompts, and resources an MCP client can invoke during generation. Now the agent asks the MCP instead of guessing.

Tools

Generate and validate forms. Audit typography. Score a page for Japan-readiness. Transform Western markup to JP. Suggest keigo level. Return seasonal context.

Prompts

Ten guided workflows for the common jobs. Form building, audits, transforms, test data, typography checks, full UX audits, design direction.

Resources

Nine reference documents the agent can read inline. Keigo guide, form checklist, phone formats, era calendar, typography guide, seasonal calendar, trust checklist, color guide, layout guide.

01

Design knowledge as callable tools, not a document

A PDF style guide is something a human reads once and forgets. A tool is something an agent calls during code generation. generate_jp_form returns valid markup. validate_jp_form returns a score with line-level fixes. The knowledge lands where the work is actually happening, not in a document no one opens.

02

Cover the mistakes AI actually makes

I did not try to encode all of Japanese web design. I picked the seven surfaces where AI output consistently breaks: forms, typography, keigo, legal, layout density, trust signals, seasonal context. Each one has a tool. Each one is narrow enough to be prescriptive.

03

No API keys, no network

Every rule, every prefecture, every name, every postal code ships with the package. Running it requires only npm. No auth, no quota, no outbound calls. The fastest MCP to install is the one that has nothing to configure.

Open source on GitHub. Published on npm. Validated Premium on the lobehub MCP directory. About 440 monthly downloads on npm as of April 2026.

npm · japan-ux-mcp GitHub lobehub
Most design systems live in a document. Turning this one into tools an agent could call during code generation was the part I hadn't done before. The hardest part was the balance. Strict enough to actually help, loose enough to override when you need to.