Figma MCP と Cursor を活用したデザイン修正――AIでどこまで作業を効率化できるのか
はじめに
近年、デザインからコーディングまでを一気通貫で支援してくれるAIツールが増えています。FigmaやSketchのプラグインとして動くコード生成ツールや、ソースコードを自動補完するAIエディタなど、選択肢は数多く存在します。*本記事では、筆者が実際の案件で「Figma MCP」と「Cursor」というAIを活用して、ランディングページ（LP）のデザイン修正を試みた事例を紹介します。従来の手動コーディングと比較してどこまで作業効率を上げられるのか、そしてどのような課題があるのかをまとめました。1. 案件概要：既存デザインに対する修正と制約
今回の依頼は、「既存のホームページの基本スタイルを引き継いだまま、Figma上でデザイナーが作成した新デザインをLPに反映してほしい」というものでした。以下のような制約が存在していました。 1. 既存のHTML構造・CSSアセットをそのまま流用する必要がある- すでに運用中のWebサイトとデザインやクラス名、コンポーネント構造を共有したいため、新たに生成されたCSSを全面的に導入するのは避けたい。 2. Figmaのデザインを正確に再現すること- デザイナーが用意したFigmaファイル通りのレイアウト・見た目を、既存のサイト上でできるだけ忠実に再現する。 Figma MCPやCursorなどのAIツールは便利ではあるものの、指定したデザインに対してイチから新規のHTML/CSSを生成する機能がメインとなることが多いです。今回のように「既存のHTML構造を壊さずに部分修正する」というパターンは、まだまだAIにとって難易度が高いと感じました。2. 使用したAIツールの概要
2-1. Figma MCP
Figma MCP（Figma Multi-Code PluginやFigma AI Code Generatorなど、複数の名称・バリエーションが存在する場合があります）は、Figma上の要素をもとにコードを生成するプラグインです。以下のような機能を期待して導入しました。 - Figma内で選択したフレームやコンポーネントに対応するHTML/CSSを自動生成 - 画像やSVGアセットのエクスポートを効率化 ただし、実際にはFigmaでのレイヤー名やグループ化が整備されていないと、思わぬコードが出力されることが多く、注意が必要です。2-2. Cursor
Cursorは、GPTベースのAIを組み込んだプログラミング用エディタ（あるいはコード補完ツール）として注目を集めています。 - ソースコードやプロジェクトフォルダ全体を取り込み、関連ファイルを横断的に解析 - 「既存CSSを踏まえて、ここのHTMLを修正したい」といった要望に対して補完を提案 - 問題点がある場合にデバッグ方法のヒントを示してくれる しかし、依存関係が複雑だったり、既存のスタイルガイドやUIコンポーネント構造が不透明だったりすると、AIのモデルが内容を正しく理解できず、的外れなコードを生成することも少なくありません。3. 実際のワークフローと課題
3-1. まずは“ざっくり”生成を試してみる
最初に、「既存HTML＋CSSをCursorに読み込ませたうえで、Figma MCPからの新デザインを部分的に埋め込んでほしい」と依頼する形で作業をスタートしました。 - Cursor側には現状のHTMLとCSSを丸ごと読み込ませ、サイト構造を把握させる - Figma MCPからは指定したセクション（hero部やfeature部など）ごとにHTML/CSSを生成させ、それをCursorで統合 結果 当初は「試しにやってみた」程度のプロンプトだったため、AIが出力したコードは整合性を欠いたり、クラス名の競合でスタイルが崩れたりと、実用には至らない状態でした。3-2. なぜうまくいかなかったのか？
大きな要因として下記が挙げられます。 1. Figmaファイルのレイヤー名・グループ構造が整理されていない- フレームやグループの名前に意味がなく、AIがどの要素をどのようにHTML/CSSに変換すべきか把握できない。 2. 既存CSSとの競合- 既にクラス名やIDが使われていたり、リセットCSSやユーティリティクラスが複雑に絡んでいるため、AIが意図しない上書きや競合を引き起こす。 3. レスポンシブ対応への理解不足- AI生成コードではレスポンシブ対応の方法がまちまちで、事前指定がないと、実際の画面サイズ変化に耐えられないケースが多い。 4. デザイン上の装飾要素（SVGや背景画像等）の扱いが難しい- 位置合わせやサイズ調整をAIだけで完璧に行うのは困難。4. 改善ステップ
4-1. Figma側のレイヤー整理
Locofy.aiなどのAIベースHTML生成ツールのセッションやドキュメントでも推奨されているように、フレームやグループには必ず意味のある名前を付けることが重要です。 - 例: hero_section, feature_section, footer_section など大まかな名前を付与 - さらに、各セクション内のパーツにも icon_wrapper, feature_title といった具合に名前をつける こうすることで、Figma MCPやCursorのモデルが要素の役割をより正確に理解し、生成コードの品質が向上しました。4-2. セクションごとにコード生成を依頼
単に「LP全体のコードを出してほしい」と依頼してもAIは混乱しがちです。そのため、セクション単位で小分けに依頼する*方法を取りました。 1. hero_section だけを抽出してHTML/CSSを生成 2. それぞれを既存のLP上に組み込み、競合がないかを確認 このように逐次的に統合していくことで、想定外のレイアウト崩れやクラス名競合を早期に発見できます。4-3. 細部に関してはさらに細分化、または“諦める”
セクション内の要素名を一段階下げたレイヤーまで指定したり、装飾用のSVGなどを個別に生成するよう依頼すると、ある程度はコードとして出てきます。しかし、どんなにプロンプトを工夫してもAIの理解が追いつかない部分もありました。 - SVGや複雑な図形は画像化して配置レスポンシブ対応で位置が崩れやすいので、最初から背景画像やアイコンパーツとしてまとめてしまうのも手。 出ないものは出ないと割り切る - いくら生成しようとしても構造が破綻したり、時間がかかりすぎるならば、要素ごと画像化するほうが工数削減になる場合があります。4-4. 文字やフォントサイズ調整は手作業が速い場合も
特にフォント周りや微妙な余白など、デザイン上のこだわりが強い部分はAIの自動生成だけでは再現が難しく、修正を繰り返していると結局手で書き換えたほうが早い場面が多々あります。 - AIが出力したコードを参考にしつつ、自分でコーディングすることで素早く仕上げる - 既存CSSとの重複を防ぐため、独自クラス名を定義し直す5. 作業時間と最終的な成果
結果として、ランディングページのデザイン修正に要した時間は約4時間ほどでした。AIツールにすべて任せられるほど洗練されているわけではなく、人間の“最終調整”が欠かせない印象です。しかし、従来であればコーディング作業に数日かけていた可能性も考えられます。以下のようなメリットを感じました。 1. 定型パーツの生成が早い- ボタンや見出しなど、繰り返しパターンの多い要素はAIに任せると大幅にスピードアップ。 2. ベースとなるレスポンシブ構造を一気に生成できる- 自前でメディアクエリを検討して書くよりも、AIが作るひな形をベースに調整したほうが早い。 3. 構造を文章化して指示すると、後からメンテナンスしやすい- 「どのセクションにどんな要素があるのか」をFigmaのレイヤー名と合わせて明示することで、ソースコードを見直すときに理解しやすい。6. まとめ：AIツールはあくまで「部分的な効率化ツール」
今回の事例でわかったのは、AIツールがすべてを自動化してくれるわけではないという点です。特に、既存サイトの構造や制約がある案件では、AIに対して「ここだけ反映して」「このクラス名は使わないで」といった詳細なプロンプトを繰り返し与える必要がありました。 - Figmaのレイヤー名は整理しておく - セクション単位で小さく生成→確認→修正を繰り返す - 複雑なレイアウトや細かなデザイン要素は手作業も辞さない AI活用の最適解は「手作業と組み合わせるハイブリッドアプローチ」です。無理にすべてをAIに任せようとせず、特に定型化しやすい部分だけを効率化ツールとして利用することで、最終的な生産性が大きく向上します。 今後、Figma MCPやCursor、Locofy.aiなどのAIコーディングツールはさらに進化し、より洗練されたHTML/CSSを安定的に出力してくれるようになる可能性があります。一方で、現状でも「AIが生み出したコードをどのように扱うか」は制作者次第です。本稿が、デザインとコーディングを行き来する際のヒントになれば幸いです。参考リンク - Figma公式ドキュメント - Locofy.ai 公式サイト - Cursor 公式サイト（GitHubリポジトリ含む）