Mimic Ai

Mimic AI

HTMLをFigmaに変換します。お使いのデザインシステムのみを使用し、コンポーネントが正しく使われるようにし、必要に応じて安全にフォールバックします。ビルドを重ねるごとに精度も向上します。

オープンソースのMCP サーバーです。すべてお使いのマシン上で動作します。Mimicのクラウドも、サードパーティのサーバーも使いません。ネットワークへの接続は、お客様ご自身のトークンを使用したFigma独自のAPIへの呼び出しのみです。

誘導ではなく、ゲートで制御

AI が Figma に書き込むこと自体は、もはや難しいことではありません。今では複数のツールが対応しています。違いが表れるのは、AI がデザインシステムにないものを使おうとしたときです。エージェントを自分のコンポーネントへ誘導するツールでも、生の16進数値、生のピクセルサイズ、システムで使っていないフォントを選ぶことがあります。この種のツールでは、使える状態にするまで手動で確認し、修正する必要がある場合があります。Mimic はプロンプト内だけでなく、Figma プラグイン自体で書き込み時に強制します。

ゲートがブロックするもの

• DS のカラー変数がある場合の、生の hex/rgb 塗りつぶし
• DS のテキストスタイルがある場合の、生のピクセル単位のフォントサイズ
• デザインシステムにないフォント
• 変数のカテゴリーの不一致（例：背景用のトークンをストロークに使用）
• DS にすでにコンポーネントがある要素（ボタン、バッジ、入力欄、テーブルセルなど）へのプリミティブなフレームの使用

DS に本当に同等のものがない場合、Mimic は生の値をそのまま残して黙って済ませるのではなく、ビルドレポートでその旨を伝えます。

蓄積される学習内容

• コンポーネントのレシピ。ビルドをまたいで確認されると、自動的に再利用されます
• 多数決によるバリアントのデフォルト値。実際の使用パターンから学習します
• ビルドを修正して一度設定したデザインルール。その後のすべてのビルドで適用されます
• コンパイル不可の記録。試した結果うまくいかないと確認されたパターンは、再試行されません
• 古さの検知。保存済みのレシピが現在の DS と一致しなくなった時点でフラグを立てます
• デザインシステムのライブラリごとにすべてがスコープされ、無関係なファイル間で内容が混ざることはありません

ビルドをまたいでこれらすべてを蓄積するツールはほかにありません。人が作成した Figma Agent Skill は静的なテキストであり、修正内容から学習することはありません。

レポートが証明すること すべてのビルドは、コンプライアンス監査済みのレポートで完了します。使用したコンポーネントとそのキー、作成したプリミティブとその理由、確認された保存済みルールと適合状況、DS に残るカバレッジの不足箇所が記載されます。ビルドを実行した本人だけが読むものではなく、関係者に提示するために作られています。

Mimic が存在する理由

デザインシステムを構築しました。コンポーネント、トークン、変数。すべての判断に意図があります。それなのに、誰かが Figma で画面を作る必要に迫られると、ゼロから始めます。ハードコードされた色。生のフォントサイズ。サイズ変更で崩れるフレーム。システムはすぐそこにあるライブラリパネルに並んでいるのに、使われません。

Mimic の出力そのものが成果物です。実際の Figma レイヤーに、本物のコンポーネントインスタンス、変数のバインディング、オートレイアウトが設定されています。変換は不要です。置き換えも不要です。そのまま引き渡せます。

システムを学習します

最初のビルドでは、デザインシステムをスキャンします。3回目までには、繰り返し使われるコンポーネントを自動で検証します。10回目までには、ほとんどの判断が即座にできるようになります。知識はビルドを重ねるごとに蓄積されます。

一度修正すれば、次から反映されます。 Mimic に「それは正しい Badge ではありません。Tag/Neutral を使ってください」と伝えると、マッピングが恒久的に更新されます。今後のすべてのビルドで、同じことを繰り返さなくても修正が適用されます。

DS の進化に Mimic が追随します。 コンポーネントの追加、削除、バリアントの変更は、前回キャッシュした内容と比較して各ビルドの開始時に検出されるため、手動で再同期する必要はありません。変数レベルのより詳細な変更検出（名前を変更したカラーのトークンなど）は、今後のリリースで対応予定です。

すべてのビルドが DS のレビューになります。 各ビルドの後、Mimic は使用したコンポーネント、プリミティブから作成したものとその理由、学習したパターン、DS に不足しているものをまとめたレポートを生成します。提案は指示ではなく、質問として提示されます。「DS に Status Badge を追加しますか？ 3回のビルドで、4つの要素がプリミティブとして作成されました。」

仕組み

好きな方法から始められます。

「3つのメトリックカードとアクティビティテーブルを備えたダッシュボードを作ってください」

「ステージング環境の HTML です。Figma で作ってください」

「この Claude Design のプロトタイプを、実際のコンポーネントを使って作り直してください」

Mimic はファイル内のデザインシステムを検出し、コンポーネントとトークンを照合して、構造化された Figma を作成します。どの方法で始めても、ルールと出力品質は変わりません。

Mimic の比較

Claude Design はアイデア出しに最適です。Figma Make はインタラクティブなプロトタイピングに最適です。Framelink は、デザインに関するコンテキストを AI に与えるのに最適です。Mimic は、納品する実際の Figma ファイルを出力する必要がある場合に使います。

対象ユーザー

Mimic は、チームのライブラリ、コミュニティキット、クライアントが公開しているシステムなど、あらゆる Figma ライブラリで動作します。

• デザイナー：コンポーネントを手作業で探すことなく、DS に準拠した画面を作りたい方
• デザインシステムのリード：実際の画面を作ってシステムを検証し、根拠とともにカバレッジの不足箇所を明らかにしたい方
• 新しいチームメンバー：DS を使って画面を作り、どのコンポーネントが存在し、何が不足しているかを確認しながら学びたい方
• 代理店やフリーランス：クライアントのライブラリを引き継ぎ、すばやく画面を作成する必要がある方
• DS 移行チーム：新しいシステムへの移行を決める前に、既存の画面を作り直してカバレッジを評価したい方
• 開発者：フロントエンドのコンポーネントと一致する Figma リファレンスが必要な方
• プロダクトマネージャー：デザイナーを待たずに、DS を使ってアイデアをモックアップしたい方

はじめに

必要なもの： Node.js v20.6 以上 · Figma デスクトップアプリ（ブラウザー版 Figma はサポートされていません — ダウンロード） · Figma Professional プラン以上（チームライブラリの公開と使用に必要です）。

1. インストール

ワンラインインストーラー：

bash <(curl -fsSL https://raw.githubusercontent.com/miapre/mimic-ai/main/install.sh)

リポジトリを ~/mimic-ai にクローンして npm install を実行し、Figma の個人アクセストークンを入力するよう求めます。また、Claude Code の settings.json への mimic-ai の登録を自動で行うオプションもあります。

手動インストール：

git clone https://github.com/miapre/mimic-ai.git
cd mimic-ai
npm install

続いて、MCP クライアントのサーバー設定（または ~/.mimic-ai.json）で FIGMA_TOKEN を設定し、クライアントの mimic-ai エントリがクローンした mcp.js を指すようにします（トークンの生成方法は、後述の「Figma のセットアップ詳細」を参照してください：{ "command": "node", "args": ["/path/to/mimic-ai/mcp.js"] }）。

2. Figma プラグインを追加する

Plugins > Development > Import plugin from manifest > ~/mimic-ai/plugin/manifest.json を選択

3. 接続する（各セッション）

Figma：Plugins > Development > Mimic AI > Run

最初にツールを呼び出すと、ブリッジが自動的に起動します。別途管理するプロセスはありません。

4. デザインシステムを有効にする

アセットパネル > チームライブラリアイコン > オンに切り替えます。ファイルごとに一度必要です。コミュニティライブラリはそのまま使用できます。

5. 構築する

「3 つのフォームフィールドと保存ボタンを備えた設定ページを構築してください。」

1 回の呼び出しで DS 全体（変数、スタイル、コンポーネント）を検出してすべてを事前読み込みし、構築可能な状態に進みます。複数ステップのセットアップは不要です。

学習して適用する内容

学習する内容：

• コンポーネントのレシピ： コンポーネントを一度設定すると（バリアント、ブール値、テキストスロット）、Mimic は以降の挿入時にその設定を再現します。3 回構築するとレシピが確定し、自動で適用されます。
• レイアウトパターン： 最初の構築時に取得したフレーム設定（方向、パディング、間隔、塗りつぶし）は、同じパターンが現れたときに再利用されます。
• デザインルール： Mimic を一度修正すると（「ブランドカラーはリンクにのみ使用する」「カードにはカードヘッダーコンポーネントが必要」など）、ルールが保存され、以降のすべての構築に適用されます。
• DS の不足箇所： プリミティブで構築されたパターンをビルド全体で追跡します。根拠に基づく推奨事項を提示します（「ステータスバッジが 5 回のビルドで、プリミティブとして 31 回使用されています」）。

適用方法：

• 変数のカテゴリ： bg-* をストロークに使用すると、Mimic が警告して border-* を提案します。bg-* をテキストカラーに使用すると、警告して text-* を提案します。
• 経験に基づくコンポーネント優先： Mimic が Badge コンポーネントを 3 回以上のビルドで使用していて、それを通常のフレームとして作成しようとすると、コンポーネントキーとともにブロックし、「代わりにこれを使用してください」と伝えます。
• ルールの準拠： 各ビルドのレポートでは、保存されたルールと構築された内容を照合します。違反は根拠とともに一覧表示されます。
• チャートカラーの意味： ブランド、成功、警告、エラーのカラーはチャートパレットから除外されます。データの可視化には、ニュートラルなユーティリティカラーのみが提案されます。

効率化機能：

• テキストの一括設定： コンポーネントインスタンスのすべてのテキストオーバーライドを、1 回の呼び出しで設定
• テーブルの一括作成： データテーブル全体（ヘッダー、セル、バリアント、テキスト）を 1 回の呼び出しで作成
• チャートの一括作成： 棒、折れ線、ドーナツ、レーダーチャートを、DS カラーバインディング付きで 1 回の呼び出しで作成

自動チェック項目

すべてのビルドで、6つのフェーズにわたり、19項目の品質ルールが順に適用されます。

• 生のフォントプロパティではなく、DS のテキストスタイルを使用
• 色はハードコードせず、DS 変数にバインド
• 変数のカテゴリを適用：テキストには text-、塗りつぶしには bg-、線には border-*
• セマンティックカラー（Brand、Success、Warning、Error）の用途を制限
• 利用可能な場合、スペーシングと角丸を DS トークンにバインド
• すべてのフレームでオートレイアウトを使用
• コンテンツをソースと一字一句正確に一致させる
• 過去のビルドで学習したコンポーネントを含め、一致するものがある場合は DS コンポーネントを使用
• コンポーネントを完全に設定：テキストのオーバーライド、バリアント、アイコンスロット
• ユーザー定義のデザインルールを使用時に適用し、ビルドレポートで監査
• コンポーネント使用率、バインド品質、ルール遵守状況、DS の不足に関する推奨事項を含むビルドレポート

詳細な仕様：CLAUDE.md

あらゆるデザインシステムに対応

適用されるルールは、DS が提供する機能に合わせて調整されます。テキストスタイルはあるものの色の変数がないライブラリでは、テキストスタイルを適用し、生の色を許容します。ビルドレポートでは、不足しているものと、それを追加すると利用可能になる機能が示されます。

MCP クライアントのセットアップ

あらゆる MCP クライアントで動作します。Claude Code に最適化されています。Claude Code、Cursor、Codex CLI、Gemini CLI（および一般的な stdio ホストの場合）のセットアップについては、docs/HOSTS.md にも記載されています。

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

{
  "mcp": {
    "servers": {
      "mimic-ai": {
        "command": "npx",
        "args": ["-y", "@miapre/mimic-ai"]
        }
    }
  }
}

{
  "mcpServers": {
    "mimic-ai": {
      "command": "npx",
      "args": ["-y", "@miapre/mimic-ai"]
    }
  }
}

すべてのクライアントで Figma プラグインを有効にする必要があります。ブリッジは組み込まれており、自動的に起動します。

MCP Client (Claude Code, Cursor, VS Code)
    |
    | MCP Protocol (stdio)
    v
MCP Server (intelligence layer)
    - Tool registry, DS cache, knowledge store
    - Variable validation + suggestions before plugin
    - Circuit breaker (3 failures -> stop + report)
    - Chart geometry engine (Node.js)
    - Phase enforcement (6 sequential phases)
    |
    | Embedded WebSocket bridge (auto-starts)
    v
Figma Plugin (enforcement gate)
    - DS enforcement: rejects raw values when DS has tokens
    - Binding feedback: reports which bindings succeeded/failed
    - Thin handlers: mechanical operations only
    |
    v
Figma Plugin API > Canvas

よくある質問

プライバシー

すべてローカルで動作します。

デザインデータがマシンから外部に送信されることはありません。 テレメトリーはありません。 トラッキングはありません。

外部への唯一の通信は、公開済みコンポーネントキーを取得するための Figma REST API への呼び出しです。

制約

• Figma Professional プランが必要です。 Free プランではライブラリを公開できません。
• 初回ビルド時のフォントキャッシュ。 Inter 以外の DS フォントは、最初のテキストノードで失敗する場合があります。再試行すると成功します。
• npx モード。 FIGMA_ACCESS_TOKEN は設定されません。チームライブラリをサポートするには、完全版インストーラーを使用してください。
• 段階的な DS 適用。 DS が提供するものに合わせて対応します。コンポーネントのみのライブラリではコンポーネントを使用し、不足分は生の値で補います。レポートには追加すべき内容が表示されます。
• Claude に最適化されています。 6 フェーズのプロトコルとコンテキストに応じたツールのヒントは、Claude Code で最も効果を発揮します。他の MCP クライアントでもツールは利用できますが、プロトコル全体には従わない場合があります。

コントリビューション

Issue と PR を歓迎します。開発環境のセットアップと PR の要件については、issue tracker と CONTRIBUTING.md をご覧ください。セキュリティ上の問題を見つけた場合は、公開 Issue を作成せず、代わりに SECURITY.md をご覧ください。

ライセンス

MIT