FigmaのデザインをAIコーディングでHTML・CSSに！CLINEを使った自動コーディング方法まとめ【Gemini・Claude 対応】

2025/12/242025/12/25

はじめに：AIコーディングの新時代

2025年、Webデザインからコーディングへの変換作業は劇的に進化しました。Visual Studio Code（VSCode）上で、FigmaデザインをAIが自動的にHTML/CSSに変換できる時代が到来しています。

本記事では、CLINE（クライン）とFigma MCPを使用して、VSCode上でAIによる自動コーディングを実現する方法を徹底解説します。Googleの「Gemini」とAnthropicの「Claude」、2つの主要AIモデルそれぞれの設定手順と活用方法を詳しく紹介します。

CLINEとは？AIコーディングアシスタントの決定版

CLINEは、VSCode上で動作するAIコーディングアシスタント拡張機能です。CursorやWindsurfのようなAI専用エディタではなく、既存のVSCodeに拡張機能として追加できる点が最大の特徴です。

CLINEの主な機能

自然言語でのコーディング指示
ファイルの自動作成・編集
ターミナルコマンドの実行
MCP（Model Context Protocol）対応
複数のAIモデルに対応（Gemini、Claude、GPTなど）

なぜCLINEを選ぶのか？

既存環境の継続利用: 使い慣れたVSCodeをそのまま使える
柔軟なAIモデル選択: Gemini、Claude、GPTなど複数対応
自分のAPIキー使用: コスト管理が可能
MCP対応: Figma連携などの拡張性が高い

Figma MCPとは？デザインとコードを繋ぐ橋

Figma MCPは、Model Context Protocolを通じてFigmaのデザインデータにアクセスできるサーバーです。AIがFigmaのデザイン情報を直接読み取り、それをベースにコーディングを行うことができます。

Figma MCPでできること

Figmaファイルのデータ取得
レイヤー情報の解析
デザイン仕様の自動抽出
画像アセットのダウンロード
AIによる自動コード生成

必要な環境・ツール

コーディングを始める前に、以下のツールとアカウントを準備します。

1. Visual Studio Code

Microsoft製の無料コードエディタ。CursorやWindsurfなどのAIエディタではなく、標準のVSCodeを使用します。

2. CLINEプラグイン

VSCode用のAIアシスタント拡張機能。Roo Codeの後継として開発された強力なツールです。

3. Figmaアカウント

デザインツールFigmaのアカウントとAPIアクセス権限が必要です。

4. AIサービスのAPIキー

以下のどちらかを準備します。APIキーの取得方法は後ほど詳しく解説します。

Gemini： Google AI Studioから取得（無料枠あり）
Claude： Anthropic Consoleから取得（従量課金）

5. Node.js

Figma MCPの実行に必要なランタイム環境。
ブラウザ以外でJavascriptを利用するための実行環境をインストールしておく必要があり、「https://nodejs.org/ja」よりダウンロードが可能です。

設定方法

Google Geminiは、無料枠が充実しており、最新のGemini 2.0 FlashやGemini 2.5 Proなどの高性能モデルが利用可能です。コストを抑えながら高品質なコーディング支援を受けたい方におすすめです。

ステップ1: CLINEのインストール

VSCodeを起動
拡張機能パネル（Ctrl+Shift+X / Cmd+Shift+X）を開く
「Cline」で検索
「インストール」をクリック
サイドバーにCLINEアイコンが表示されることを確認

ステップ2: APIキーの取得

「Gemini」の場合

Google AI Studioにアクセス
Googleアカウントでログイン
「Get API Key」をクリック
「Create API Key」を選択
生成されたAPIキーをコピー（安全に保管してください）

注意: APIキーは他人に共有しないでください。悪用されるリスクがあります。

「Claude」の場合

Anthropic Consoleにアクセス
アカウント登録またはログイン
「API Keys」セクションへ移動
「Create Key」をクリック
キー名を入力（例: “VSCode CLINE”）
生成されたAPIキーをコピー（一度しか表示されません）

注意: Claude APIは従量課金制です。使用量に応じた料金が発生します。

ステップ3: CLINEでAIモデルを設定

「Gemini」の場合

VSCodeのサイドバーでCLINEアイコンをクリック
「Use your own API key」を選択
API Provider: 「Google Gemini」を選択
Model: 推奨は以下
- gemini-3-pro-preview
「Enter API Key」に取得したAPIキーを貼り付け
「DONE」をクリック

「Claude」の場合

VSCodeのサイドバーでCLINEアイコンをクリック
「Use your own API key」を選択
API Provider: 「Anthropic」を選択
Model: 推奨は以下
- claude-sonnet-4-5-2025…
「Anthropic API Key」に取得したAPIキーを貼り付け
「DONE」をクリック

ステップ4: Figma APIキーの取得と設定

Figmaにログイン
アカウントアイコン →「設定」
「個人アクセストークン（Personal Access Tokens）」セクションへ移動
「新規トークンを作成（Generate new token）」をクリック
トークン名を入力（例: “CLINE MCP”）
生成されたトークンをコピー
VSCodeに戻り、CLINEのプロンプトにトークンを貼り付け
設定ファイルが自動的に保存されます

ステップ5: Figma MCPのインストール

CLINEのサイドバーで「MCP Servers」を開く
「figma」を検索
「Install」をクリック（クリック後にAPIへのリクエストが始まり、MCP Serverのインストールが始まります。）
「Run Command」→「Approve」でインストールを許可
Figma APIキーの入力を求められますので、チャット画面（コマンドライン）にFigma APIのコードを入力して送信します。すると、AIが自動で書き込んでくれるのでその後処理を待ちます。

うまくいかないときは、生成された「cline_mcp_settings.json」ファイルに以下のコードを書き込み、APIキーを入力してあげるとうまく進めます

{
  "mcpServers": {
     "github.com/GLips/Figma-Context-MCP": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 60,
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=figd_***",
        "--stdio"
      ],
      "env": {
        "FASTMCP_LOG_LEVEL": "ERROR"
      },
      "transportType": "stdio"
    }
  }
}

ステップ6: Figmaファイルの準備

コーディングしたいFigmaデザインを開く
ブラウザのURLからファイルIDをコピー
- URL形式: https://www.figma.com/file/{ファイルID}/...
デザイン内の特定フレームのみを使用する場合はノードIDも取得
- フレームを右クリック →「Copy link」→ URLから抽出

ステップ7: AIコーディングの実行

CLINEのチャット欄に指示を入力（例）:

# プロンプト
- 下記のFigmaデザインをHTMLとCSSにしてください。
- フォルダ内のindex.htmlとstyle.cssを使ってイメージデータはimgフォルダ内にダウンロードしてください。
- FigmaのデザインリンクにはPCデザインとSPデザインのリンクを用意するので、レスポンシブデザインで実装してください。
- コードはメディアクエリには比較演算子を使いできるだけモダンなコーディングを心がけてください。

# PCデザイン
https://www.figma.com/design/xxxxx

# PCプロトタイプ
https://www.figma.com/proto/xxxxx

# SPデザイン
https://www.figma.com/design/xxxxx

# SPプロトタイプ
https://www.figma.com/proto/xxxxx

CLINEが自動的に:
- Figma APIでデザインデータを取得
- レイヤー構造を解析
- HTML/CSSファイルを生成
- 画像をダウンロード・保存
生成途中で「Approve」または「Save」のリクエストが表示されたら承認

ステップ8: 生成結果の確認と修正

生成されたindex.htmlをブラウザで開く
デザインとの相違点をチェック
修正が必要な場合は、CLINEに具体的に指示:

以下の点を修正してください:
- ヘッダーの高さを80pxに変更
- フォントサイズを2px大きく
- ボタンのホバーエフェクトを追加

GeminiとClaudeの比較：どちらを選ぶべきか？

項目	Gemini 2.0/2.5	Claude 3.5 Sonnet
料金	無料枠あり（月間制限内）	従量課金（使った分だけ）
処理速度	非常に高速	やや速い
コード品質	高品質	非常に高品質
複雑な指示の理解	良好	優れている
日本語対応	優れている	優れている
長文コンテキスト	200万トークン（2.5 Pro）	200Kトークン
初心者おすすめ度	★★★★★	★★★★☆
上級者おすすめ度	★★★★☆	★★★★★

トラブルシューティング

Figma MCPが動作しない

症状: FigmaのデータがAIから見えない

解決策:

Figma APIトークンが正しく設定されているか確認
VSCodeを再起動
CLINEの設定ファイル（~/.config/Code/User/globalStorage/...）を確認
Node.jsのバージョンを最新に更新

APIキーエラーが出る

症状: “Invalid API Key” エラー

解決策:

APIキーを再生成
余分なスペースや改行が入っていないか確認
APIキーの有効期限や使用制限を確認
Geminiの場合: Google AI Studioで該当プロジェクトが有効か確認

生成されたコードがデザインと異なる

症状: レイアウトがずれる、色が違う

解決策:

より詳細な指示を追加
特定の要素について個別に修正を依頼
Figmaのフレーム名を明確に指定
デザイントークンやスタイルガイドを共有

まとめ：AIコーディングの未来

CLINE + Figma MCPの組み合わせは、デザインからコーディングへのワークフローを劇的に効率化します。GeminiとClaude、それぞれの特性を理解して使い分けることで、より高品質なWebサイトを短時間で構築できます。

この記事のポイント

✅ CLINE: VSCode用の強力なAIコーディングアシスタント
✅ Figma MCP: デザインデータを直接AIに渡せる革新的な仕組み
✅ Gemini: 無料枠が豊富で初心者にもおすすめ
✅ Claude: 高精度なコード生成で商用利用に最適
✅ 実用性: 実際のプロジェクトで即戦力として活用可能

今後の展望

より多様なデザインツール（Adobe XD、Sketchなど）との連携
AIによる自動テストとデバッグ機能
バックエンドコード生成への対応拡大
チーム開発でのAI活用ガイドライン整備

AIコーディングは、エンジニアの仕事を奪うのではなく、創造的な部分により集中できる環境を提供するツールです。ぜひこの記事を参考に、最新のAIコーディング環境を構築してみてください！VSCodeでFigmaデザインをAIコーディング！CLINEとFigma MCPの完全ガイド【Gemini・Claude対応】

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

Earthboat Minakami Hodaigi（アースボートみなかみ宝台樹）レビュー｜自然の中で“こもる”ように泊まる新感覚アウトドアステイ

FigmaのデザインをAIコーディングでHTML・CSSに！CLINEを使った自動コーディング方法まとめ【Gemini・Claude 対応】

はじめに：AIコーディングの新時代

CLINEとは？AIコーディングアシスタントの決定版

CLINEの主な機能

なぜCLINEを選ぶのか？

Figma MCPとは？デザインとコードを繋ぐ橋

Figma MCPでできること

必要な環境・ツール

1. Visual Studio Code

2. CLINEプラグイン

3. Figmaアカウント

4. AIサービスのAPIキー

5. Node.js

設定方法

ステップ1: CLINEのインストール

ステップ2: APIキーの取得

「Gemini」の場合

「Claude」の場合

ステップ3: CLINEでAIモデルを設定

「Gemini」の場合

「Claude」の場合

ステップ4: Figma APIキーの取得と設定

ステップ5: Figma MCPのインストール

ステップ6: Figmaファイルの準備

ステップ7: AIコーディングの実行

ステップ8: 生成結果の確認と修正

GeminiとClaudeの比較：どちらを選ぶべきか？

おすすめの使い分け

トラブルシューティング

Figma MCPが動作しない

APIキーエラーが出る

生成されたコードがデザインと異なる

まとめ：AIコーディングの未来

この記事のポイント

今後の展望

関連記事