melta UI

人間にも、AIにも、読めるデザインシステム。

デザインシステムは、人間のためだけのものだった。 スタイルガイドを読み、コンポーネントの意図を汲み取り、文脈に合わせて判断する——それはデザイナーとエンジニアの仕事だった。

しかし今、UIを書くのは人間だけではない。

AIがコードを生成し、コンポーネントを選び、レイアウトを組む時代に、 デザインシステムは 「人間が読める」だけでは足りない。

melta UI は、この問いに対する一つの答えである。

Markdown ドキュメントは人間が読み、JSON トークンは機械が読む。 CLAUDE.md を起点とした段階的な読み込み構造は、AI の限られたコンテキストウィンドウに最適化されている。 MCP サーバーを介せば、AI エージェントはトークンの検索からルール検証まで、プログラマティックに実行できる。

人間の可読性を犠牲にせず、AIの可読性を加える。 両立こそが、melta UI の設計思想である。

Architecture — 2つの読み手のための構造

                    ┌─────────────────────────────┐
                    │         melta UI             │
                    └──────────────┬──────────────┘
                                   │
                 ┌─────────────────┼─────────────────┐
                 │                 │                  │
          ┌──────▼──────┐  ┌──────▼──────┐  ┌───────▼───────┐
          │  for Human  │  │  for Both   │  │    for AI     │
          └──────┬──────┘  └──────┬──────┘  └───────┬───────┘
                 │                │                  │
        foundations/*.md    CLAUDE.md          tokens.json
        components/*.md    design_philosophy   components.json
        patterns/*.md      index.html          MCP Server
        prohibited.md      Melta-UI.pen        .cursor/rules/

| レイヤー | 形式 | 読み手 | 役割 | |---------|------|--------|------| | Markdown ドキュメント | .md 48ファイル | 人間 | 設計意図・使い方・判断基準を自然言語で記述 | | CLAUDE.md | .md 1ファイル | 人間 + AI | エントリーポイント。クイックリファレンスとタスク別読み込みガイド | | デザイントークン | tokens.json | AI | ~106トークンの機械可読な単一ソース（色・間隔・書体・影・角丸・動き） | | コンポーネントメタデータ | components.json | AI | 28コンポーネントのバリアント・サイズ・HTML サンプル・禁止パターン | | | TypeScript | AI エージェント | トークン検索・コンポーネント取得・ルール検証・全文検索をツールとして公開 | | | | AI (Claude Code) | デザインレビューの自動実行（クローン後すぐ使用可能） | | | 3ファイル | AI (Cursor) | カラー・コンポーネント・禁止パターンをエディタ内ルールとして提供 | | | | 人間 + AI | 32コンポーネントをビジュアルデザインツール上で再利用可能な形で収録 |