melta UI — Claude Code MCP server: checks and setup
Gives an agent access to design contracts and checks generated HTML with check_html. Useful when a project needs its UI rules checked during generation.
claude mcp add melta-ui -- npx -y melta-ds-mcpWhat melta UI does
melta UI exposes design tokens, component contracts and rules to an agent, then checks generated HTML with check_html. When the check finds a violation, the agent can revise the markup and run it again. This is a set of contracts and checks, not a ready-to-use CSS component library.
Run the server with npx -y melta-ds-mcp. It requires Node 22 or later and an MCP client that supports stdio. Static checks read Tailwind classes and HTML attributes. Styles applied through CSS-in-JS props are outside that check, and nesting and accessibility checks apply to HTML only.
The server can load assets from another design system instead of mixing them with melta UI rules. To render pages in a browser, add Tailwind and the melta token settings separately. A project that keeps its styles out of markup will not get those styles checked by the static linter.
What it helps with
- check HTML against design rules
- spot unsuitable Tailwind classes in generated markup
- give an agent component contracts before it builds a UI
- check HTML nesting and accessibility
Example prompts for the agent
- Build a user table using melta UI contracts, then run
check_htmlon the HTML. - Check this markup against the design rules and fix any violations.
- Create a card with melta UI tokens and validate it with
check_html.
How to install melta UI
Platform CLI
claude mcp add melta-ui -- npx -y melta-ds-mcpPlatform CLI
codex mcp add melta-ui -- npx -y melta-ds-mcpConfig file
{
"mcpServers": {
"melta-ui": {
"command": "npx",
"args": [
"-y",
"melta-ds-mcp"
]
}
}
}Config file
{
"servers": {
"melta-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"melta-ds-mcp"
]
}
}
}Platform CLI
gemini mcp add melta-ui npx -y melta-ds-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about melta UI
How do I install melta UI in Claude Code?
Run claude mcp add melta-ui -- npx -y melta-ds-mcp. Node 22 or later is required.
What does melta UI do?
It gives an agent access to design contracts and checks HTML with check_html. The result flags violations that the agent can correct.
What are melta UI's static-checking limits?
The linter reads Tailwind classes and HTML attributes; nesting and accessibility checks apply to HTML only. It cannot inspect styles passed through CSS-in-JS props.
