Figmaデザインを99.8%そのまま実装する方法 — Framelink MCP + ピクセルdiffループの実践ワークフロー

バイブコーディングでアプリを一日で作ったという話、もう珍しくないですよね。でも実際に結果を見ると — 機能は動くのにUIが「AIが作った感」丸出し。あのジェネリックな感じ。デザイナーが見たらため息が出るあの差。

問題はシンプルです。AIはコードを上手く書きますが、「このデザインを正確に実装して」と言うと80%しか合わせられず、残り20%で崩れます。パディングがズレて、カラーが微妙に違って、レイアウトがずれます。それを直そうと「ここをもう少し広げて」「いや、それじゃなくてこっち」とやり取りしているうちに、AIが節約してくれた時間をデザイン修正に全部使ってしまいます。

でもこれを解決した人たちがいます。背景ピクセル一致率99.8%まで達成した事例も出ています。核心は3つの武器の組み合わせです。

これは何？

FigmaデザインをAIコーディングエージェントに渡す方法は大きく3つあります：

1. スクリーンショットを直接見せる — AIビジョンで解釈。最も一般的ですが不正確。
2. Figma公式MCPを使う — Figma APIでデザインデータをコード（React/Tailwind）に変換して渡す。
3. Framelink MCPを使う — Figma APIでデザインデータを記述的JSONに変換して渡す。

ここで2番と3番の違いが決定的です。

Figma公式MCPはデザインノードを読んでReact + Tailwindコードを直接生成します。問題はこのコードがleading-[22.126px]のような任意の値で溢れていること。AIはそのままコピーします — あなたのコードベースのパターンは無視して。

Framelink MCPはアプローチが違います。「この要素は1pxのボーダーと16pxのパディングを持ち、UI/Button - Largeスタイルを使っている」という形で記述的なデータを送ります。AIがこの仕様を読んで、プロジェクトの既存コンポーネントとデザインシステムに合わせてコードを書くのです。

何が変わるの？

FramelinkはGraham Lipsmanが作ったオープンソースプロジェクトで、GitHubで13,000以上のスターを集めています。 Cursor、Claude Code、Windsurf、VS Codeなど、MCPをサポートするほぼすべてのエディターで使えます。

でもFramelinkだけでは不十分です。デザイントークンを正確に渡すのは半分の解決策です。AIがそのトークンで作った結果物が実際にデザインと同じかどうか検証するもう半分が必要です。

レイアウトと色は完璧に一致し、テキストレンダリングの差だけが残る — これが現実的な「pixel perfect」の上限です。

核心まとめ：始め方

1. Framelink MCPを接続する
   Claude Code（またはCursorなど）にFramelink MCPサーバーを追加します。FigmaのPersonal Access Tokenが必要で、設定は一行です：claude mcp add framelink-figma -- npx -y figma-developer-mcp --figma-api-key="トークン"
2. セクションごとに分けて渡す
   ページ全体を一度に送らないでください。ヘッダー、ヒーローセクション、カードグリッドのようにセクション単位でFigmaフレームリンクを渡します。Figmaで該当フレームを選択してCmd+L（リンクコピー）すれば大丈夫です。
3. 初期実装 → スクリーンショットキャプチャ
   AIが最初の実装を終えたら、PlaywrightやブラウザMCPで実装結果のスクリーンショットを正確に同じ解像度（例：1440x900）でキャプチャします。Figmaでも同じフレームをPNGとしてエクスポートします。
4. ピクセルdiffヒートマップで自動修正
   PIL（Python）やPixelmatch（Node.js）で2つのスクリーンショットのピクセルdiffヒートマップを生成します。AIに「このヒートマップの赤い部分がなくなるまで修正して」と指示すると自動で反復修正します。 コンポーネントごとに最大8回の反復を推奨します。
5. Computed Style検証（オプション）
   視覚的diffだけでは捕まえられないバグがあります。Playwright MCPで実際のcomputed CSS値を測定すると「見た目は合っているが動作が違う」バグまで捕まえられます。