Use design tokens, component contracts, and self-check HTML quality.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "melta UI" MCP server from askskill: Run: claude mcp add 'io-github-tsubotax-melta-ui' -- npx -y melta-ds-mcp
Using melta UI design tokens and component contracts, generate HTML and styling for a primary button with default, hover, and disabled states, and explain which tokens were used.
Returns button code aligned with melta UI plus state notes and token mappings.
Use melta UI check_html and its rule set to review this HTML, identify issues against component contracts or design rules, and provide a corrected version: <div class="card"><button>Submit</button></div>
Provides a list of issues, reasons for violations, and corrected HTML that better follows the system.
Based on melta UI's 99 rules, tokens, and component contracts, draft an implementation spec for a notification banner component, including structure, states, spacing, colors, and accessibility requirements.
Returns a component spec draft that designers and frontend developers can implement consistently.
Lets AI access design tokens and component contracts via MCP consistently.
Gives AI coding agents queryable design system guidance for accurate implementation.
Build, inspect, audit, and fix UI across frameworks end to end.
Supports UI/UX, design systems, SEO, accessibility, and marketing workflows.
Search, read, and discover related design system components via MCP.
Generate UI code, layouts, and themes from prompts with refactoring and accessibility checks.