Happy slice of mcp pizzaMCP.pizza

melta-ui

MCP.Pizza Chef: tsubotax

When an assistant builds a screen for you, it tends to invent its own colors, spacing, and text sizes. melta UI gives it a written rulebook instead — 101 agreed design values and 106 banned patterns — plus a checker the assistant runs on what it just produced, which reports each violation with the approved replacement. It is built for Tailwind projects, verified with Claude Code, and added with one short command. It ships rules and checks, not ready-made components.

Coding
Images/Design

Use This MCP server To

Keep AI-generated screens consistent with one design system Catch off-brand colors and spacing before I ship Check a page I generated against the agreed rules Get a suggested replacement for each rule I broke Share one set of design rules across web and mobile

README

melta UI

Design System Check

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

🇬🇧 English: README.en.md · Site: https://melta.tsubotax.com

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

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

誰のためのものか

向いている

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

向いていない

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

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

melta-ui FAQ

Which apps does this work in?
Verified with Claude Code. Cursor and Codex register the same command, and any app that supports local MCP servers should work.
Do I need a key?
No key and no account. It runs locally from a published package as soon as you add the command.
Can I use this to stop my assistant inventing random colors?
Yes — that is exactly the point. Banned colors and shadows are rejected and the approved value is named in the reply.
Is this a component library I can install and use?
No. It provides the values, rules, and the checker. A reference implementation in Tailwind markup is included as an example.
What do I need first?
Node 22 or newer, and a project styled with Tailwind, since the checks read the classes on your elements.
Is the documentation in English?
The main page is in Japanese, with an English version linked at the top of the repository.