7onicDESIGN SYSTEM

MCP Server

AIコーディングエージェントが7onicのルール通りにUIを作るためのMCPサーバー。トークン検索・41コンポーネントのカタログ・レイアウトレシピ・validate_codeによるルール検証を提供します。
llms.txtベースの連携はAI Integration(Components)とAI Integration(Tokens)を参照してください。

claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design@7onic

Claude Codeプラグイン — 1コマンドでMCPサーバーを導入(npm install不要、約3MB)。

Tools & Resources

9つのツール、3つのリソース、1つのプロンプトを提供。クエリは英語・日本語・韓国語に対応します。

コンポーネント探索

41コンポーネントの検索・Props/variants照会・検証済みJSX例の取得。

list_componentsget_componentget_component_examples

トークン

トークン検索・照会・生値(hex/px/ms)からの最近接トークン提案。

search_tokensget_tokensuggest_tokens

構成と検証

レスポンシブレイアウトレシピ、デザインルール検証、トピック別ガイドライン。

get_layout_patternvalidate_codeget_guidelines
Resources(3種)

コアAIルール・トークンチートシート・コンポーネントカタログをMarkdownで提供。

Prompt: create_prototype

プロトタイプ構築のガイド付きワークフロー(探索 → トークン → レイアウト → 検証ループ)。

How It Works

Figmaトークンが唯一のソース。同じトークン名がCSS変数・Tailwindクラス・コンポーネントまで流れるため、AIが生成したコードはデザインから乖離しません。

1. コンポーネント発見

list_components / get_component — 生HTMLではなく7onicコンポーネントを優先。

2. トークン解決

search_tokens / suggest_tokens — 生値を書く前に必ずトークンを確認。

3. レイアウト構成

get_layout_pattern — 4/8/12カラムグリッドとトークンギャップのレシピ。

4. 検証ループ

validate_code — エラー0になるまで修正してから納品。

ツールのクエリとvalidate_codeの違反メッセージは英語・日本語・韓国語に対応しています。

Setup

Claude Codeはプラグインで1コマンド。その他のMCP対応エージェントは手動設定で利用できます。

Claude Code プラグイン

推奨

マーケットプレイス追加とインストールを1コマンドで実行。サーバーは自己完結バンドルのため依存インストールは発生しません。

claude plugin marketplace add itonys/7onic && claude plugin install 7onic-design@7onic

その他のエージェント(手動設定)

リポジトリをcloneし、MCP設定(.mcp.jsonなど)にstdioサーバーとして登録します。distはコミット済みのためビルド不要です。

git clone https://github.com/itonys/7onic.git
{
  "mcpServers": {
    "7onic-design": {
      "command": "node",
      "args": ["/path/to/7onic/mcp/dist/index.js"]
    }
  }
}

パスはclone先に合わせて変更してください。Node.js 20以上が必要です。

validate_code

生成コードを14のルールで機械検証します。代表的な検出例:

プリミティブカラー(セマンティック優先)

bg-blue-500 → bg-primary

任意値(トークン外の数値)

p-[17px] → p-4

dark:プレフィックス(自動テーマ切替)

dark:bg-gray-900 → bg-background

line-height上書き(トークンはペア)

text-sm leading-relaxed → text-sm

生HTML(コンポーネント優先)

<button className="..."> → <Button>

インラインスタイル

style={{ color: '#333' }} → token classes

違反メッセージと修正提案はlocale引数(en/ja/ko)で3言語対応。ユーザーが明示承認したカスタム値はds-ignoreコメントで抑制できます。

Notes & Limits

ご利用にあたって

  • このツールはデザインシステムのルール遵守を支援するものであり、100%の検出を保証するものではありません。validate_codeが捕捉できない違反も存在し得ます。
  • プロトタイプ・デモ・社内ツールの構築には特に有効です。本番プロダクトのコードは必ず人によるレビューを経てください。
  • 最終的なUI・デザインの判断はツールではなく、チームのデザイナー/オーナーが行ってください。