# melta UI

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 202
- Author: tsubotax
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tsubotax/melta-ui
- Updated: 2026-10-10
- HTML: https://affpapa.org/en/nevibecode/mcp/melta-ui

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add melta-ui -- npx -y melta-ds-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add melta-ui -- npx -y melta-ds-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "melta-ui": {
            "command": "npx",
            "args": [
                "-y",
                "melta-ds-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "melta-ui": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "melta-ds-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add melta-ui npx -y melta-ds-mcp
```

## When to use it
- 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
- Build a user table using melta UI contracts, then run `check_html` on 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`.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md