melta UI MCP
A design-system MCP server and linter: the agent reads tokens and rules before generating UI, and a check returns violations
- 202 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- `npx -y` downloads a package from npm and runs it on the machine without confirming the version
- With a clone install, a PostToolUse hook on `.html`, `.tsx`, `.jsx` and `.vue` files blocks the agent's edit and returns a list of violations
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/melta-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- `npx -y` downloads a package from npm and runs it on the machine without confirming the version
- With a clone install, a PostToolUse hook on `.html`, `.tsx`, `.jsx` and `.vue` files blocks the agent's edit and returns a list of violations
This is third-party code. Review the repository files before installing.
What it does
melta UI turns design guidelines into a contract a machine can check. The `melta-ds-mcp` package starts an MCP server through which the agent pulls the values and rules it needs on demand: tokens, component specs, the list of prohibitions. The `check_html` tool checks generated markup with the same code that runs in CI and hooks, and returns violations with reasons and replacements. The data currently holds 101 tokens, 107 prohibition rules and 40 component contracts. 49 of the 107 rules are checked automatically, and the README sorts the rest into categories: interaction-test checks, statically impossible checks, candidates for model judging and human-only rules. The tools include `get_token`, `get_component`, `check_rule` and `check_html`. On connection the server hands the agent its own instructions: read `melta://design-constitution` first and verify the result after generation. The repository also holds three skills, `ban-pattern`, `build-screen` and `design-review`, plus separate packages `melta-contracts` with the data and `melta-app` for React Native.
Who it is for. Teams that generate interfaces in Claude Code, Cursor or Codex and want the agent to follow design-system rules, with violations caught automatically.
Good fit when
- A guideline exists but the agent breaks it, and a check is needed right after generation rather than at review
- The agent runs its own markup through `check_html` before delivering a screen and fixes violations
- You need tokens and component specs on demand, without loading the whole guideline into context
- Web and React Native should share one design contract
Not a fit when
- You need a ready set of React components to install: melta UI ships values, rules and checks rather than a component library
- Styles in the project are not Tailwind classes, for example CSS-in-JS through props: static checks then do not fire
- You need nesting and accessibility checks in JSX: they work for HTML only, while JSX gets class and attribute checks
Example request
Build a users table following the melta UI rules, run the markup through check_html and fix violations until the check passes.MCP
- Transport
- stdio
- Authentication
- not required
Limitations
Checks assume Tailwind class styling. Of the 107 rules, 49 are caught automatically while the rest await model or human judgment, and `check_html.passed` means no violations were found, not a brand approval.
The file-edit hook and the CI check exist only in a clone of the repository: an `npm` install delivers the server, `melta-ds-mcp/lint` and the `melta-lint` CLI, and you wire hooks and CI yourself. Node 22 or newer is required. A custom design system plugs in by swapping data, while new kinds of checks need engine changes.
How to disable. Run `claude mcp remove melta-ui` and delete the block from another client's config. For a clone install, remove the PostToolUse hook from `.claude/settings.json` and the `.mcp.json` entry. The `melta-contracts` and `melta-app` packages, if installed, are removed with `npm uninstall`.
FAQ
How do I connect melta UI to Claude Code?
Run `claude mcp add melta-ui -- npx -y melta-ds-mcp`, then `claude mcp list`: a `melta-ui` line with the Connected status should appear. In Cursor the server is read from the clone's `.cursor/mcp.json`, and Codex registers the same stdio command.
What does check_html return?
An object with a `passed` field, counts of errors and warnings and a list of violations, each with a rule id, a reason and a replacement. For example `text-black` is replaced with `text-slate-900` and `bg-blue-500` with `bg-primary-*`.
Is this a ready component library?
No. The author states that melta UI ships values, rules, specs and checks, and the web part comes as a reference implementation in HTML and Tailwind. React Native has a separate `melta-app` package.
How do I plug in my own design system?
Through the BYO-DS mode: the server can be pointed at your own data bundle at startup, starting from four files. melta rules are not mixed with yours. The steps and limits are in `docs/distribution.md`.
How is melta UI different from design-systems-mcp?
design-systems-mcp serves general knowledge about design systems, tokens and accessibility. melta UI holds the contract of one system and checks generated HTML against it with the same rules that run in CI.
Discussion
No questions or reviews yet.
Related
MCP serversAn MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
The CodeRocket MCP server gives an agent a saved library's design rules, components and blocks over a read-only connection.
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
An agent gets the MDMA spec, prompts and validation so it can answer with forms, tables and approvals right inside Markdown
README in short
The README is in Japanese, with an English version in `README.en.md`. It sets out who the project suits and does not suit, lists evidence (Playwright and axe-core CI, zero pixel difference across five CSS resets), the `melta-contracts`, `melta-ds-mcp` and `melta-app` packages, two quick-start paths and a four-layer scheme: contract, reference, verification, monitoring. A separate section states the coverage limits.