はじめに

デザインファイルがまだない場合： 小さな公開サンプルでセットアップを確認できます。使用するバイナリ、frame の検索、生成した bundle の内容を検証します。モデルは不要です。

design.fig をプロジェクトに置き、次のセットアップから1 つを選びます。どれを選んでも、エージェントは figlens のツールと、計画・実装・画像準備のための同じ組み込みガイドを使えます。

セットアップ	対象	ガイドの入手元
プラグイン	Claude Code, Codex, Antigravity, Cursor, Kimi Code	プラグイン同梱の skill とサーバーの workflow ツール
MCP	Claude Code、Cursor、Codex、Gemini CLI などの MCP クライアント	サーバーの workflow ツール
Pi	Pi 1.3.0+	パッケージに同梱の skill
OpenCode V2	OpenCode V2 2.2.0	同梱の skill
OMP	OMP 18.13.2	同梱の skill
CLI	シェルコマンドだけを実行するエージェント、スクリプト、CI、または自分で使う場合	figlens workflow <topic>、または任意の skill

通常と上級。 通常の利用にセットアップは不要です。figlens search design.fig "query" は .fig を読むだけで何も作りません。任意のローカルインデックスは依頼したときだけ作成され（figlens index prepare design.fig --scope 0:0）、再起動やホストをまたいで再利用されます。通常の検索と任意のローカルインデックスを参照してください。 任意・実験的：--mode semantic または hybrid は、自分で用意したローカルモデルで意味による順位付けを行います。任意のセマンティック検索を参照。

プラグイン

1 回のインストールで figlens の skill と MCP サーバーをエージェントに追加します（Node.js 18+）。サーバーはプラグインのリリースに固定されます（npx -y @runkids/figlens@<version> mcp）。新しいバージョンにするにはプラグインを更新してください。

ホスト	インストール
Claude Code	claude plugin marketplace add runkids/figlens, claude plugin install figlens@figlens
Codex	codex plugin marketplace add runkids/figlens, codex plugin add figlens@figlens
Antigravity	agy plugin install https://github.com/runkids/figlens/tree/main
Cursor	git clone --depth 1 https://github.com/runkids/figlens ~/.cursor/plugins/local/figlens の後、ウィンドウを再読み込み
Kimi Code	セッション内で /plugins install https://github.com/runkids/figlens/tree/main、その後 /reload

skillshare なら同じ plugin を複数のホストへ一度にインストールできます：skillshare plugin add https://github.com/runkids/figlens.git --target claude --target codex --target cursor -g。更新は skillshare plugin update figlens -g。

ホストを再起動するか新しいセッションを開始し、figlens のツールが表示されることを確認してください。プラグインはリポジトリをコピーします（約 7 MB。Codex は Git 履歴も保持し約 60 MB）。Antigravity は skill の先頭 24 KB しか読み込みません。完全なガイダンスはサーバーの workflow ツールが提供します。Muse はまだサポートしていません。ホスト対応表と検証範囲

MCP

Claude Code（Node.js 18+、macOS/Linux）：

claude mcp add --transport stdio --scope local figlens -- npx -y @runkids/figlens mcp

Codex CLI（Node.js 18+、macOS/Linux）：

codex mcp add figlens -- npx -y @runkids/figlens mcp

任意の MCP クライアント：

{
  "mcpServers": {
    "figlens": {
      "command": "npx",
      "args": ["-y", "@runkids/figlens", "mcp"]
    }
  }
}

Node.js がない場合は、スタンドアロン版のバイナリ（CLI）をインストールし、"command": "figlens", "args": ["mcp"] を使います。新しいセッションを開き、figlens のツールが一覧に表示されることを確認します（Claude Code では /mcp）。skill を別途インストールする必要はありません。mcp の後に --root <dir> を付けると、figlens が読み書きできるフォルダーを制限できます。

MCP 起動引数

クライアントの args で mcp の後に指定します。MCP の起動オプションはこの 2 つだけで、どちらも省略・複数指定が可能です。

オプション	用途
--root DIR	DIR とそのサブフォルダー内のデザイン読み取りとエクスポートを許可します。省略時は figlens 独自のパス制限はなく、OS の権限が適用されます。現在のプロジェクトに限定されるわけではなく、コンピューターを自動走査することもありません。
--storage-root DIR	DIR とそのサブフォルダー内で明示的に要求されたカスタムのインデックス保存先を許可します。既定の保存先を選択・変更するものではありません。

既存ディレクトリの絶対パスを使ってください。オプションとパスはそれぞれ別の配列要素です。複数フォルダーにはオプションを繰り返します。--root はパスの境界であり管理者権限ではありません。figlens MCP のみを制限し、エージェントの他のツールは制限しません。

デザイン／出力用ルート 2 つと、保存先の許可ルート 2 つの例：

{
  "mcpServers": {
    "figlens": {
      "command": "npx",
      "args": [
        "-y", "@runkids/figlens", "mcp",
        "--root", "/absolute/designs",
        "--root", "/absolute/project",
        "--storage-root", "/absolute/storage-a",
        "--storage-root", "/absolute/storage-b"
      ]
    }
  }
}

figlens mcp --storage オプションはありません。実際の保存先は index ツールの storage 引数（許可された保存先ルート内の絶対パス）、または CLI figlens index prepare design.fig --storage /absolute/storage-a で選択します。prepare 後は workspace の場所が記憶され、再起動やホストをまたいで storage や --storage-root を再指定せず再利用できます。未指定時はユーザーごとの既定ディレクトリを使うため、保存先フラグは不要です。

これらのパスをコミットする設定に書かずに済ませる方法や、Git worktree 間でデザインを共有する方法は、コミットする設定での root を参照してください。

保存先ルートを複数指定しても許可範囲が増えるだけで、各 storage が選ぶ場所は 1 つです。インデックスの分散・同期・バックアップは行いません。別のルートを指定するだけでは既存 workspace のデータベースは移動できず、場所が競合すると figlens は拒否します。

Pi

1 つのパッケージに CLI、MCP、viewer、/figlens コマンド、skill が含まれます：

pi install npm:@runkids/figlens

Pi 拡張機能ガイド

OpenCode V2

OpenCode V2 にパッケージをインストール：

opencode plugin add @runkids/figlens

ホストを再起動して /figlens help を実行します。 OpenCode V2

OMP

OMP に同じパッケージをインストール：

omp plugin install @runkids/figlens

ホストを再起動して /figlens help を実行します。 OMP

CLI

npm 経由で実行するか、スタンドアロン版のバイナリをインストールします：

npx @runkids/figlens --help                                                                # Node.js 18+、インストール不要
curl -fsSL https://raw.githubusercontent.com/runkids/figlens/main/scripts/install.sh | sh  # macOS、Linux
brew install runkids/tap/figlens                                                           # Homebrew
irm https://raw.githubusercontent.com/runkids/figlens/main/scripts/install.ps1 | iex      # Windows PowerShell

npx は解決したパッケージバージョンのバイナリを実行します。スクリプトでインストールした場合は figlens update、Homebrew の場合は brew upgrade figlens で更新します。バイナリは macOS（Apple silicon、Intel）、Linux（arm64、x86_64）、Windows（x86_64）に対応しています。

CLI を使うエージェントは figlens workflow build（ほかに audit、images、search、plan、planning-details、明示的に依頼された場合のみの yolo）でガイドを読みます。内容は常にバイナリのバージョンと一致します。skill から読むこともできます。

CLI リファレンス

エージェント skill（任意）

skill は組み込みガイドと同じ流れをエージェントに教えます：frame を見つけ、bundle を少しずつ読み、範囲を絞って計画し、実行中の UI をデザインと比較します。内容は手順だけなので、CLI または MCP と組み合わせて使います。MCP と Pi のセットアップでは不要です。

おすすめ：skillshare。 skill を一度インストールすれば、使っている各エージェントに同期できます：

skillshare install github.com/runkids/figlens/skills/figlens
skillshare sync

同じツールで、それらのエージェントの figlens MCP 接続も設定できます：

skillshare mcp add figlens --global --target claude --target codex --target cursor --no-tui -- npx -y @runkids/figlens mcp
skillshare sync mcp --global

skill のその他のインストール方法：

npx skills add runkids/figlens --skill figlens   # Skills CLI

または、このリポジトリか release アーカイブの skills/figlens/ を、エージェントの skills ディレクトリ（Claude Code：~/.claude/skills/）にコピーします。インストールした skill はバイナリとは別に更新されます。figlens workflow は常にバイナリと一致します。

あとは画面を依頼します。

Build the task board from ./design.fig in this project.
Find the matching frame, use this project's components and image workflow,
then compare the running UI with the design and fix confirmed differences.
Report missing assets and any checks you could not run.

エージェントは frame を見つけ、デザインデータ、素材、参照画像を bundle にまとめ、あなたのスタックで画面を実装します。共有ワークフローがフォントと素材の確認を案内し、不足は報告しつつ、記録した代替手段でレイアウト実装を続けます。変更したファイルとブラウザでの比較を見せるよう依頼してください。