MCP.Market

melta UI MCP server

by tsubotax·io.github.tsubotax/melta-ui·v1.9.1·202 stars
No reviews yet

AI-Ready design system MCP: melta UI tokens, component contracts, 107 rules, check_html self-verify

A88/100grade A
Write a reviewInstall
What users say
No reviews yet
Be the first
Safety scan
A88/100

full report

Adoption
Established

202 stars272 downloads/wk

Reviews

Write one

Nobody has reviewed melta UI yet.

If you have run it, two minutes of your experience saves the next person an afternoon.

melta UI tools (6)

write = sends, deletes, buys or posts

Read from the package source without running it. The installed server may list more.

  • check_html

    Lint a full HTML/JSX source against … rules — the same checks as CI and the PostToolUse hook (class rules + html-attr rules + composition rules for HTML). Use this AFTER generating UI code to self-verify before presenting it. Response always includes coverage info (manual rules cannot be auto-checked).

  • check_rule

    Check class strings against this design system's prohibition rules. Returns violations with reasons and alternatives.

  • get_component

    Get component metadata including variants, sizes, accessibility requirements, HTML sample, per-state specs (stateSpecs: disabled/loading/open/empty etc. — each with delta class strings + aria changes), and anatomy parts (overlay/container/th etc. with element/roles/class). Prefer these structured fields over inferring states from the HTML sample.

  • get_rules

    Get … prohibition rules from rules.json (… total). Use this to retrieve manual/contextual rules that check_rule cannot auto-detect. Supports filtering by category, severity, or detector.

  • get_token

    Get a design token by dot-path. Returns the token object with its value and class mapping.

  • search

    Search across tokens and components by keyword. Matches against names, values, class strings, and descriptions. Returns up to 20 results (truncated flag when more matched).

Public scan report

scanner v0.1.10 · 2026-11-09 · same rubric, same numbers if you re-run it

no findings
  • Code scan159 source files scanned25/25
  • –Live reliabilityno gateway calls yet and no remote to proben/a
  • –Tool poisoningtools not inspected (local package is not executed); not countedn/a
  • Auth qualitylocal package, no credentials required12/15
  • Maintenancelast push 31 days ago12/15
  • Maintainer identityregistry namespace matches repository owner; GitHub account older than a year8/10
Overall 88/100. Components that don't apply are left out of the denominator. Any critical finding is an F.RubricAppeal a findingJSON

How melta UI compares

Against every graded Media MCP server, from our own scans and uptime checks. Updated after each scan run.

Safety score
88/100
higher than 75% of 1,331 Media servers
Tools
6
the typical Media server has 7
Tools that change things
0%
typical: 6%. Fewer write tools means less an agent can break
GitHub stars
202
more than 95% of 727 Media servers
Downloads a week
272
more than 78% of 422 Media servers with a package

What its tools let an agent do: 6 read

Release history: 3 versions in the registry since 2026-06-13, latest 2026-10-10, typically one every 119 days.

Install melta UI in Claude Code, Cursor or VS Code

Runs npx -y melta-ds-mcp on your machine. Read the scan report first; the gateway never runs local packages.

claude mcp add melta-ui -- npx -y melta-ds-mcp
Add to Cursor

What the publisher says

From the melta UI repository's README, as published. We do not edit it. Read it on GitHub

<!-- sec: hero -->

melta UI

AI 向けデザインガイドラインを、違反を止める実行可能な契約へ。

🇬🇧 English: README.en.md · Showcase: https://melta.tsubotax.com （ドキュメント・契約の正本はこのリポジトリ）

<!-- sec: lead --> AI にガイドラインを読ませることはできる。守るかどうかは AI 任せになる。melta UI は、その「任せ」を機械に置き換える。生成の前（MCP で契約を参照させる）・直後（lint / hook が違反を突き返す）・マージ前（CI が止める）・その後（drift 検査がドキュメントと実装の腐りを検知し続ける）の 4 点で機械が関与する。読ませるだけでなく、守らせる。

境界: melta UI は完成済みの CSS コンポーネント集ではない。配るのは値（tokens）・規則（rules）・仕様（contracts）・検証器（lint / MCP）で、import して貼れば動く UI ライブラリではない。web の実装は HTML + Tailwind クラスの参照実装として同梱している。

<!-- sec: who -->

誰のためのものか

向いている

  • AI コーディングエージェント（Claude Code / Cursor / Codex 等）で UI を生成・運用しているチーム
  • 「ガイドラインは書いたのに守られない」を仕組みで潰したい個人・少人数チーム
  • web と React Native で 1 つのデザイン契約を共有したいプロダクト

向いていない

  • 完成済みの Web コンポーネント集（React コンポーネントを install してすぐ使いたい）が欲しい場合
  • Tailwind / class ベース以外のスタイリング（CSS-in-JS の props 経由など）が主体で、スタイルがマークアップに現れない場合。静的 lint が効かない

<!-- sec: proof -->

Proof — 主張には検証経路をつける

  • 107 禁止ルールのうち 49 / 107 を静的に自動検出。残りも「なぜ自動検出しないか」を automationStatus で分類・可視化する（rules.json / 内訳は制約と正直な範囲）
  • Playwright + axe-core 372 tests が CI 必須ゲート（.github/workflows/design-check.yml / 実行履歴）
  • 5 種の代表的リセット CSS 環境で VRT 差分ピクセル 0。pixelmatch の literal 比較で機械検証（tests/reset-vrt.spec.ts、npm run test:reset-vrt）
  • npm 3 パッケージ + MCP Registry で配布（melta-contracts / melta-ds-mcp / melta-app、Registry ID io.github.tsubotax/melta-ui）
  • 別リポジトリの React Native 実装が同じ契約を購読し、契約の破壊的変更は APP 側が契約バージョンを取り込んだ時点で consumer テストが検出する（melta-app / npm 公開版との互換は npm run design:compat が publish 前に検査）
  • 外部プロジェクトで「AI が違反を書く → 即検出 → 自己修正」ループを実測（2026-08、非公開 RN アプリへ npm 経由で導入。melta-app README の成熟度・メンテナンス節）
  • drift 検査自身に負のテストがある（わざと壊して発火することを固定：tests/drift-heal.spec.ts）

<!-- sec: ships -->

配布物 — いま install できるもの

melta-ds-mcp 自体の bare import（import "melta-ds-mcp"）は非サポート。entry は import しただけで stdio サーバーが起動する CLI なので、npx melta-ds-mcp か subpath 経由で使う。entry 規約・deep import 互換・パッケージ分割の予定は docs/distribution.md。

自分のデザインシステムで検査したい場合（BYO-DS）: melta-ds-mcp は起動時に読み込むアセット root を自分の DS bundle へ切り替えられる（melta のルールとは混在しない）。4 ファイルの最小構成から始める手順と限界は docs/distribution.md の BYO-DS 節。

<!-- sec: requirements -->

前提条件・互換性

Shortened. The full README is on GitHub.

Nothing above is checked by us. What we check is on the safety report.

melta UI: common questions

Is melta UI MCP server safe?
Yes, by our scan: it is graded A (88/100). Read the melta UI safety report
How do I install melta UI?
It runs on your machine. Copy the Claude Code, Cursor, VS Code or Claude Desktop config from the install section.
Does melta UI need an API key?
Not as far as the registry entry and our scan can tell: no credentials are declared or required.
Is melta UI maintained?
The last commit was 36 days ago (2026-10-10). The latest release is v1.9.1.
What can I use instead of melta UI?
Servers from other publishers that do the same job: Dembrandt MCP server, SheetsData MCP server and Buoy MCP server. Compare all melta UI alternatives.
How does melta UI compare with other Media MCP servers?
safety score 88/100 (higher than 75% of 1,331 Media servers); tools 6 (the typical Media server has 7); tools that change things 0% (typical: 6%. Fewer write tools means less an agent can break). Full comparison.

Alternatives to melta UI

Same job from other publishers: the closest match first, then the best rated.

All melta UI alternatives →
  • Dembrandt
    Design tokens from any live site: colours, type, spacing, components, drift against a baseline.
    B
  • SheetsData
    Electronic component datasheets for AI agents: pinouts, specs, package info and design checks.
    A
  • Buoy
    The design system your coding agents check before they ship: tokens plus exact UI fixes.
    A
  • Mimic AI
    Builds Figma from your design system: real components and tokens, enforced, learning every build.
    A
  • WunderUI
    The WunderUI design system for coding agents: components, props, tokens, rules and skills.
    B
melta UI vs Dembrandt