はじめに

初めまして。株式会社GENDA FE/BE開発部の高橋です。
普段はグループ企業のシン・コーポレーションが運営している「カラオケBanBan」のプロダクトにおいて、フルスタックエンジニアとして開発に従事しております。

この記事は GENDA Advent Calendar 2025 の記事です。

今回は Claude Code と MCP（Model Context Protocol）を活用して、Figmaのデザインからのフロントエンド実装を効率化した取り組みについて紹介します。

Figma Dev Mode MCP と Playwright MCP を組み合わせることで、「Figmaの仕様取得」→「Reactコード生成」→「UIの動作確認」までの流れを、すべてClaude Code上で完結させる開発フローを試しました。本記事では、その具体的な手順と、導入して見えてきた効果についてまとめます。

導入したプロジェクトの紹介

本題に入る前に、今回Figma Dev Mode MCPを使って画面実装を試みたプロジェクトについて簡単にご紹介します。

カラオケBanBanでは、お客様ご自身で入室手続きや退店時の精算を行える「セルフレジシステム」を開発しています。今回の取り組みでは、その中でも入室フローをWebベースで実装する部分においてFigma Dev Mode MCPを導入しました。

現在は一部店舗で先行導入しておりますので、見かけた際はぜひご利用いただけますと幸いです。

Figma Dev Mode MCPとは？

Figma Dev Mode MCP は、Figmaのデザイン情報をMCP経由で直接取得できるようにするツールです。レイヤー構造やTypography、Spacing、Color、Variantなど、Dev Modeで確認できる仕様をそのままLLM（大規模言語モデル）が扱えるようになります。

これにより、FigmaのURLを渡すだけで、LLMがコンポーネントの設計要素を正確に読み取り、Reactコードの生成や実装レビューに活用できるようになります。

Playwright MCPとは？

Playwright MCPは、Playwrightによるブラウザ操作や検証処理をMCP経由でLLMから実行できるようにするツールです。LLMへの「画面を開いて」「このボタンを押して」「見た目の差分を教えて」という指示を、そのままローカルのブラウザ操作に変換し、結果を返してくれます。

これにより、実装したコンポーネントを実際に動かしながら、表示崩れやスタイルの差分を自動で検証できます。Figmaから生成したUIが意図した見た目になっているかを、手動でのブラウザ操作なしで確認できるようになります。

必要なもの

今回必要な環境・ツールは以下のとおりです。

Claude Code
Figmaデスクトップアプリ
- ※ベータ版の時点ではデスクトップアプリ上でローカルMCPサーバーが立ち上がる仕様だったためこれを利用しましたが、現在はリモートサーバーも存在するようです。
Figma Dev Modeが有効になっているアカウント
Playwright MCP

下準備

Claude CodeにFigma Dev Mode MCPを導入していきます。今回はFigmaのデスクトップアプリを使用し、ローカルMCPサーバーに接続する方法をとります。

Figma Dev Mode MCPのガイドに沿って、以下のコマンドを実行します。

$ claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

なお、Figmaデスクトップ側でMCPサーバーを有効にしておく必要がありますので、忘れずに設定しましょう。デザインシートの右側サイドバーから有効にできます。

続いて、Playwright MCPを導入します。
Playwright MCPのREADMEの手順に従い、コマンドを実行します。

claude mcp add playwright npx @playwright/mcp@latest

実装

Figma Dev Mode MCPを使って実装

それでは、プロンプトを入力して実装を進めていきます。
今回はこちらのページの実装を指示してみます。

Figmaからページ全体のリンクを取得して渡します。（実際はURLそのものは必要なく、URLからノードIDを抽出して使用しているようです）

今回は単純に「実装して」と指示しました。

ログを確認すると get_design_context を実行しているようです。Figma Dev Mode MCPのドキュメントによると、Figmaからデザインコンテキストを取得してコードで出力する仕組みとなっています。

出来上がったページがこちらです。

初回出力としては、かなり精度の高い実装ができているのではないでしょうか。
しかし細部を確認すると、以下の点でFigmaのデザインと差異が見受けられます。

ヘッダーの「14:10」と「入店方法を選択してください」の間の余白が少ない
ヘッダー背景色のグラデーションが適用されていない
「予約済み」と「の方はこちら」の間の余白が少ない
「予約なし」と「の方はこちら」の間の余白が少ない
「予約済みの方はこちら」の左側のアイコンが異なる
「予約なしの方はこちら」の左側のアイコンが異なる

次は、Playwright MCPも併用してこれらを修正していきます。

Playwright MCPも併用して修正

Playwright MCPを使って実際のページをLLMに認識させ、Figmaのデザインと比較させる形で修正を進めます。
まずは1つ目の「ヘッダーの『14:10』と『入店方法を選択してください』の間の余白が少ない」点について修正します。

以下のようなプロンプトで指示を出しました。

Playwright MCPを使ってhttp://localhost:5173/checkin にアクセスして、ヘッダーの「14:10」と「入店方法を選択してください
」の間の余白を調整してください。Figmaデザインに比べて余白が少ないように見えます。
Figmaデザインはこちらです。https://www.figma.com/design/...

タスクを依頼すると、別ウィンドウでブラウザが起動しました。
Playwright MCPの browser_take_screenshot と、Figma Dev Mode MCPの get_screenshot を実行しているようです。Webページ側とFigmaデザイン側双方のスクリーンショットを撮影して比較を行っています。
「間隔が足りてないようです」という回答があり、問題を正しく認識できています。今回はLLMが何度か修正を繰り返した結果、gap を調整する形で解決してくれました。

適切に修正されました。
他の箇所も同様に修正し、最終的には以下の画像のとおりとなりました。Figmaのデザインどおりに実装できています。

以上のことから、基本的には get_design_context でFigmaからデザインコンテキストを取得し、必要に応じてスクリーンショットを用いてLLMによる再現を行う、というプロセスで実装が行われていることがわかりました。

肝心のコード

コードは React + Tailwind CSS の形で出力されます。
一部を抜粋してご紹介します。

<header className="bg-[#020bd2] h-[190px] w-full relative flex items-center">
  {/* 時刻とタイトル */}
  <div className="ml-16 text-white flex flex-col gap-4">
    <p className="text-[32px] font-bold leading-[40px]" style={{ fontFamily: "Roboto, sans-serif" }}>14:10</p>
    <h1 className="text-[45px] font-bold leading-[52px]">
      入店方法を選択してください
   </h1>
  </div>

  {/* TOPに戻るボタン */}
  <button
    onClick={handleReturnTop}
    className="absolute right-9 top-1/2 -translate-y-1/2 bg-[#ccd9f7] w-[168px] h-[120px] rounded-full flex flex-col items-center justify-center shadow-[0px_6px_10px_4px_rgba(2,11,210,0.15),0px_2px_3px_0px_rgba(2,11,210,0.3)]"
  >
    <span className="text-[#020bd2] font-bold text-[36px] leading-[44px]" style={{ fontFamily: "Roboto, sans-serif" }}>
      TOP
    </span>
    <span className="text-[#020bd2] font-bold text-[24px] leading-[32px]">
      に戻る
    </span>
  </button>
</header>

Tailwind CSSの設計思想はUtility-firstですが、fontFamily などを style 属性の中に直接記述している点は改善の余地がありそうです。
このあたりは CLAUDE.md にルールを記述して整備していくのが良いと感じています。
box-shadow の実装も少々複雑に見えますが、Figmaで定義されたスタイルどおりに忠実に実装されていました。

うまくいっていないところ

一通り実装をしてみて、私の環境で課題となった点は以下になります。

SVGアセットをうまく取得できない
グラデーションを含む複雑な色の定義がうまく取得できない

1つ目のSVGアセットをうまく取得できない点についてですが、先ほどの実装でボタンの中に埋め込まれているアイコンを取得できず、Figmaデザインのスクリーンショットを元にClaude Codeがアイコンの再現を試みた結果が出力されていました。
Figma Dev Mode MCPでは、画像のソースをローカルサーバーに配置して取得するか、ローカルにダウンロードするかを選択できます。

私の環境では、前者ではローカルサーバーのURLは取得できるものの画像の取得ができず、後者ではダウンロード先が指定されていないといったエラーが出て、うまく動作しませんでした（Figmaデスクトップアプリ上でもダウンロード先を指定する設定は見当たらず...）。
こちらは、手動でFigmaからSVGのコードをエクスポートして使用することで解決しました。

2つ目のグラデーションを含む複雑な色の定義がうまく取得できない点ですが、ヘッダー背景色のグラデーションが以下のように定義されていました。

background: var(--***, linear-gradient(315deg, #020BD2 24%, #006CDC 100%));

この定義がツール経由ではうまく取得できませんでした。
現時点では原因が判明しておらず、こちらもFigmaから定義をコピーして使用するように対応しました。
もし解決方法をご存じの方がいらっしゃいましたら、コメントしていただけますと幸いです。

最後に

Figma Dev Mode MCPとPlaywright MCPを使用したフロントエンド開発の事例をご紹介しましたが、いかがでしたでしょうか。

個人的には、0→1の実装を自動化できるだけでも非常に有用だと感じました。
おかげで今回のプロジェクトではバックエンドのロジック開発に多くの時間を割くことができ、無事リリースにつなげることができました。

今回のプロジェクトは特定の端末（画面サイズ）での動作を前提としたWebアプリでしたので、LLMとMCPを組み合わせてコードを生成するという手法との相性が良かったように思います。
レスポンシブデザインが必要なページを実装する際は、もう少し工夫が必要になるかもしれません。

今後は、FigmaのデザインデータをよりAIコーディングに適した構造に整えたり、今回ご紹介していないCode Connect機能を使用したりすることで、さらに精度高くデザインをコードに落とし込めるのではないかと考えています。
引き続き精度向上の工夫を重ね、知見が得られれば改めて発信していきたいと思います。

この記事がどなたかのお役に立てれば幸いです。
引き続き、GENDA Advent Calendarをよろしくお願いいたします！

https://qiita.com/advent-calendar/2025/genda