melta UI MCP server

<!-- 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.