🧭 はじめに

こんにちは、SOZOの一場です。
今回は、FigmaとGitHub Copilot、そして「MCP」を組み合わせて、弊社のコーポレートサイト（https://sozo-inc.jp/）を自動生成しようと試みた記録です。

「UIデザインからフロントコードを自然に起こせる時代が来た」と言われて久しいですが、本当にそんな夢のような開発体験ができるのか？
その検証も兼ねて、エンジニアリングの視点で挑戦してみました。

✅ MCP（Model Context Provider）Serverとは？

MCP Serverは、ユーザーが設計した情報（例：UIデザイン、ドキュメント、構造データなど）を、AIが理解・活用できるように変換・提供するための“中間処理サーバー”です。

今回使用したのは、GitHub上で公開されている以下のMCPツール：
👉 GLips/Figma-Context-MCP

🏗 今回作成するもの

作るのは、SOZOのコーポレートサイト（https://sozo-inc.jp/）のTOPページです。
今回はFigmaのデザインをもとにReactコードとして自動生成することを目標としました。

🖥 MCPの導入手順

① server.jsと設定ファイルの準備

プロジェクトのルートに .vscode/mcp.json を作成します。

※ この mcp.json は Gitでignore しておきましょう。
開発環境やAPIキーなどが含まれる可能性があるためです。

{
   "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "Figma API Key",
      "password": true
    }
  ],
  // --- サーバー設定 ---
  // MCPサーバーとしてFigma用のプロセスを起動します。
  // "Framelink Figma MCP"はサーバーの表示名です。
  "servers": {
    "Framelink Figma MCP": {
      "type": "stdio", // サーバーとの通信方式（標準入出力）
      "command": "npx", // Node.jsパッケージを一時的に実行
      "args": ["-y", "figma-developer-mcp", "--stdio"], // figma-developer-mcpパッケージをstdioモードで起動
      "env": {
        // ここでFigma APIキーを環境変数としてサーバーに渡します。
        // セキュリティのため、実際の運用時はハードコーディングせず、inputsで受け取った値を利用してください。
        "FIGMA_API_KEY": "API_KEY"
      }
    }
  }
}

設定ファイルには、Figmaのファイルキーやトークン、出力ディレクトリを記載します。

② MCPサーバーの起動

server.js を実行してローカルでMCPサーバーを立ち上げます。
起動に成功すると、Figmaデータを取得するためのエンドポイントが使えるようになります。

「▶︎起動」を押下する。

「✔︎実行中」になったら起動できております。

③ Figmaから該当デザインをリンクコピー

対象となるフレームやコンポーネントを選択し、「コピー/貼り付けオプション」→「選択範囲へのリンクをコピー」と行いコピーします。
そのリンクを使って、MCPがデータを取得できるようになります。

🤖 GitHub Copilotとの連携

ここからが本題です。

④ Copilotにお願いする

VS CodeでGitHub Copilotに、画像のようなプロンプトを入力しました

Copilotが自動的に useEffect, Tailwind, div構造 などを組み合わせてコードを生成してくれます。

🚧 結果と課題

✨「雰囲気は再現できてるけど、まだまだ荒削り。」

• コンポーネントの粒度が粗い
• テキストの反映にズレがある
• レイアウトが意図と異なる部分がある

🔍 ここから先は調査と改修

現時点では「それっぽくなるけど、実戦投入には微妙」という結論に至りました。
特に気になったのは、プロンプトの与え方によって精度が大きく変わる点です。

• Figmaデザインが細かすぎると崩れる
• ラベルやグルーピングによって挙動が変わる
• そもそも「読み取らせ方」にコツがある？

📌 まとめ

Figma × MCP × Copilotという構成は、確かに未来を感じるものでした。

使い手に問題がありそうなのでもう少し深く調べて触ってみようかなと思います。