こんにちは！ 24卒で新卒入社し、フロントエンドエンジニアをしている井上です。未経験でエンジニアとしてのキャリアをスタートし、約半年が経ちました。

4月から新しいPJTに入り、今まで関わったことのないプロダクトの実装に関わることになりました。その中で、「FigmaMCPを使い、Figmaデザインから1画面をCursorで実装してみる」という経験をしました。

MCPって何...？？CursorのAgent初めて使う！！みたいな状態からはじまり、学びが沢山あったのでアウトプットします。

1. 何をしたか

一言でいうと、デザイナーさんがFigmaで作成してくれたデザインをCursorに読ませ、「こんなの実装して！」ということをやりました。 CursorではAIを用いて実装することができますが、以下のデザインと同じ画面をAIに実装してもらおうということです。

・使用したデザイン

上記デザインを用いてCursorに指示をしたら、最終的にこんな画面を20分ほどで実装できました（指示の仕方は試行錯誤しましたが）。ほぼ一緒です！！

この実装を通じて、学んだ知識をまとめていきます。

2. MCP(Model Context Protocol) とは

MCP は、アプリケーションが LLM にコンテキストを提供する方法を標準化するオープンプロトコルです。生成AIモデルと様々なツールを接続して使うためにルールを標準化したということです。

参考記事： https://zenn.dev/yamada_quantum/articles/465c4993465053

3. FigmMCPの導入

以下の手順で、FigmaMCPを導入しました。

Figmaにログイン
左上のアイコンから「Settings」を選択
「Security」タブを選択
下部の「Personal access tokens」セクションで「Generate new token」をクリック
適当なトークンの名前（例：figma-mcp-test）を入力し、「Create token」をクリック
表示されたAPIキーをコピー
.cursor/mcp.jsonを作成し、以下のコードを記載
.gitignoreに.cursor/mcp.jsonを追加
Cursorを再起動し、Settings>MCPからMCPサーバーが有効になっていることを確認（なってなかったら手動で有効にする）

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<6でコピーしたAPIキー>"
      }
    }
  }
}

▼ 参考にした記事

https://zenn.dev/superstudio/articles/91ceb2f2f1d784

https://zenn.dev/takna/articles/mcp-server-tutorial-06-figma

4. 実装方法

あとはCursorのAgentモードで、指示を出すだけです。 Figmaのリンクは、該当UIを右クリックし、Copy as > Copy link to selctionで取得したものを使用します。以下のプロンプトを使用し、プロンプトも基本はAIに作ってもらいました。

使用したプロンプト

以下のFigmaデザインを忠実に実装した単一ページをVue 3（Composition API／`<script setup>`）でfrontend/personalizeに追加してください。**既存のコードは変更せず、新しいファイルを追加する形で実装してください。**

1. リンク
@https://www.figma.com/design/~

2. **ページ構成**
   - Figma 上の該当コンポーネントを**新規ページ**として実装（既存のルートに影響を与えない）
   - Figma上で視覚的に確認できるレイアウト（横並び／縦並び・揃え・間隔・順序など）を含め、すべての構造を忠実に再現してください

3. **タイポグラフィ＆カラー**
   - フォントファミリー・サイズ・ウェイト・行間は Figma の数値をそのまま適用
   - カラーコードも Figma からコピー
   - ボックスシャドウやボーダーなどの装飾はFigmaと同様にすること

4. **コンポーネント設計**
   - 再利用可能なUI要素（ボタン、セレクトボックス、ラジオボタンなど）は分離したコンポーネントとして実装
   - コンポーネントは汎用性を持たせ、Props や slots を適切に活用
   - 名前空間を活用し、既存コンポーネントと競合しない命名規則を使用
　 - 既存のデザインシステムやパターンがある場合は踏襲する

5. **ファイル管理**
   - コンポーネントは以下のように配置してください：
     - ページ全体を表すコンポーネント → `src/components/page/` 
     - 再利用可能なUI要素 → `src/components/element/`（存在しない場合は作成）
   - 既存ファイルは編集・削除せず、新しいファイルのみ追加

6. **ルーティング**
   - このプロジェクトのルーティングでは、ベースパスが `/hoge/` に設定されている
   - URL構造とファイル配置の関係は以下のとおり
     - `/hoge/XXX` → `src/hoge/XXX.vue` 

7. **アクセシビリティとインタラクション**
   - 適切なHTMLセマンティクスを使用
   - ホバーやフォーカス時の視覚的フィードバックを追加
   - 画像には代替テキストを設定

8. **画像**
   - Figmaの固有画像は一時的にモック用の類似画像に置き換え
   - 差し替えやすいようパスやコンポーネント名を明示

9. **確認事項**
   - `pnpm run build` と `pnpm dev` が正常に動作すること
   - ブラウザで表示したとき、Figmaデザインとズレがないこと

以上を厳守し、Figma のデザインに忠実かつ、汎用性・アクセシビリティを備えた高品質な Vue3 ページを既存コードに影響を与えずに追加実装してください。

上記プロンプトによって、大枠は作ってくれます。その後に、大きく異なる部分を指定して修正するということを。

5. 学び

以下、今回の実装で得た気づきです。

Cursorが実装するときは、Cursor Rulesが適用されるので、プロンプトも大事だがRuleが整っていることが前提になる。
ページという大きい単位で実装させると精度が落ちる。そのため、一旦ページを実装させた後、ページ内のコンポーネントを指定して修正させるという流れにするとデザインをFigmaにより近くなるように修正できる。
AIにより、細かいコードの書き方の知識がなくても実装ができてしまうが、設計を理解していないとAIに正しく実装させることは難しい。

6. 課題

同じプロンプトを使用しても、デザインの出力が結構異なるのが難しいところだなあと感じました。期待通りの出力が得られたときになぜ今回上手く行ったのかが明確にわからず、再現性を持たせるのが難しかったです。また別の画面を上記プロンプトで実装しようとしましたがFigma通りのデザインになりませんでした。 Figmaデザイン側からも影響を受けるので、AIで実装をするときは、すべてを「AI実装用」に合わせる必要があると学びました。

7. 最後に

初めて触れるコードには、理解しきれていない点が沢山ありますが、それでもこれだけ自力で実装できるということにAIの威力を感じました。わからないまま実装してもらうのではなく、AIに実装してもらう→実装してくれたコードを読んでわからない部分はAIに説明してもらうというサイクルで、理解もしっかり深めながらどんどんAI活用できるようになりたいです！

CursorとFigmaMCPで「Figmaデザインから1画面実装」させてみた

目次