An MCP server that helps coding agents build production-grade frontend — work that reads as though an experienced designer made it, rather than a template filled in.
It does four things a coding agent cannot do reliably on its own:
| Problem | What kala does |
|---|---|
| Every page looks slightly different | Holds the project's design system as data and checks code against it |
| Generic, template-ish output | Bootstraps a coherent, opinionated design direction with solved colour maths |
| Only the happy path exists | Names the states a screen must handle, then checks they exist |
| Advice that ignores the project | Grounds every playbook in this project's real scales and bans |
It works across React, Vue, Svelte, and plain HTML — one rule, written once, fires identically in all four — and can render a running page to catch what source analysis structurally cannot.
Claude Code — the plugin carries the server, the companion skill, the /kala command,
and the restricted subagent in one install:
/plugin marketplace add archish9/kala-plugin
/plugin install kala@kala-marketplace
Antigravity (agy) — one command installs the server, the companion skill, and the
/kala rule:
agy plugin install https://github.com/archish9/KalaRestart your IDE, then type /kala followed by your request.
Any other MCP client — one block of JSON, no clone and no build:
{
"mcpServers": {
"kala": {
"command": "npx",
"args": ["-y", "-p", "kala-mcp", "-p", "playwright", "kala-mcp"]
}
}
}Node 20+ is the only requirement. Open your agent in a project and say:
"What design system does this project have?"
Per-client config, building from source, and the companion skill: Install. Complete walkthrough: Your first project.
There are no commands to memorise — you talk to your agent normally.
| You want to… | Say |
|---|---|
| Start a project with a real design system | "Set up a design system for a calm invoicing tool for freelancers." |
| Know what a screen needs before building it | "What states does the settings page need?" |
| Check code you just wrote | "Check src/Settings.tsx against our design system." |
| Change the character of a design | "Make the pricing page bolder." |
| Get a full review | "Review src/ and give me an HTML report." |
Thirteen design actions are available by name: bolder, quieter, distill, harden,
animate, typeset, layout, colorize, delight, clarify, adapt, optimize,
onboard.
More phrasings for every task: What to say.
- 8 MCP tools —
system_status,system_bootstrap,surface_brief,guide,verify,inspect,critique,explain - 13 source rules across scale, consistency, accessibility, craft, and real-world states
- 3 rendered checks — computed contrast, horizontal overflow, touch target size
- 12 curated design systems with generated OKLCH palettes and solved contrast, backed by a catalog of 84 styles, 192 palettes, and 74 typography pairings for briefs none of the 12 fit well
- 6 surface briefs and 13 action playbooks
- 4 framework extractors proven equivalent by a dedicated test suite
- 492 tests, typechecked under
strictandexactOptionalPropertyTypes - No browser required — the rendered pass is opt-in and degrades cleanly
- No network calls, no API keys — static data plus deterministic code; nothing kala does depends on an external service
| Guide | What it covers |
|---|---|
| Install | Requirements, MCP client setup, verifying it works |
| Your first project | A full walkthrough, start to finish |
| What to say | The phrasebook — what to type for each task |
| Tool reference | Parameters and payloads, for scripting kala directly |
| Catalog | All 84 styles, 192 palettes, 74 font pairings |
| Design systems | All 12 systems and what each refuses to do |
| Surfaces and actions | 6 screen types, 13 design actions |
| What kala checks | Every rule, check, and banned pattern |
| Troubleshooting | When it does not work |
| Guide | What it covers |
|---|---|
| Architecture | Packages, the IR, the fact model |
| Writing rules | Rule kinds, the expression language, fixtures |
| Extending | Add a system, surface, action, framework, or tool |
| Testing | The suites and what each proves |
| Design rationale | Why kala is shaped this way, and what it cost |
| Roadmap and limits | What is not built, and what is honestly weak |
| Provenance | Upstream projects, licences, attribution |
Apache-2.0 — see LICENSE. kala builds on three prior projects under Apache-2.0 and MIT; full attribution and the reasoning behind the licence choice are in Provenance and ATTRIBUTION.md.