【続】Figma Dev Mode MCP Serverを使ってデザインデータからHTML/CSSコード生成（やってみた）

はじめに

こんにちは、サービシンククリエイターチームの岡村です。
今年9月に公開した「Figma Dev Mode MCP Serverを使ってデザインデータからHTML/CSSコード生成（やってみた）」の記事の続編となります。

まだ見られていない方は、設定方法などもまとめていますので、読んでいただけると嬉しいです。

前提

前回からなるべく大きく環境は変えず以下の構成となります。
デザイン：Figma（デスクトップアプリ）
IDE：VSCode
AI エージェント：Github Copilot（GPT-4.1）

今回の研究内容

前回までの検証でFigmaで作成したデザインをMCP Server経由でCopilotが参照しHTML/CSSと画像ファイルの生成を行えるところまではできました。（スタートラインに立ったような状態）
この時点ではデザインとの乖離もあり実用性に耐えるものではありませんでした。
そこで、次の段階として、生成されたデータのクオリティを高めることに焦点をあてます。

Figma デザインデータから生成されたHTML/CSSの精度を高める

• デザインとの乖離を減らす（要素数、コンテンツの内容の一致）
• セマンティックなHTML構造
• 生成時のクオリティを一定に保つ（エージェントとのやり取りを減らす）

これらの実現のため、「ルールファイル」を使って実現できないか？と考えました。

ルールファイルとは？

Github Copilotの場合はプロジェクトディレクトリ（リポジトリ）内に.github/copilot-instructions.mdというファイルを作成しAgentにルールを伝えます。

例えば、生成したデータを保存する際のディレクトリ構造や、画像アセットに関する指定などを記載しています。

今回の検証ではルールファイルのチューニングとFigmaデザインの調整を繰り返し、生成結果の変化を見るという流れで進めました。

詳細は後述しますが、ルールファイルの活用により、AIへの指示が一定の水準になりますので、生成されるHTML/CSSの精度がブレることが減りました。また、毎回プロンプトに入力する手間が省け検証の効率が上がりました。

ですが、厳密にルールを記載しても結構無視してくることもあり「ルールとは...」と考えさせられることもありました。

デザインとの乖離を減らす

期待値として、デザインデータをそのまま再現したHTML/CSSを生成することでしたので、まずなんとかしたかったのはこの点でした。

せめて要素数だけでも合わせて欲しい。。

MCP Serverを使ったコード生成は、ページ全体だけでなく、個別に選択したレイヤーを対象にコード生成することも可能です。

実務を想定すると、コンポーネント単位での開発が主流だと思いますので、無理にページ全体を生成する必要は無いのですが、そこはロマンと言いますか、できることならチャレンジしてみたいと思ったわけです。

そこで、以下のようなルールを設定してみました。

### 忠実なHTML/CSS生成ルール
- 生成指示のたびに必ずFigmaデザインをAPIで最新取得し、新規フォルダにHTML/CSS/画像を生成すること。過去生成物や履歴は一切参照禁止。
- 「生成済み」「前回と同じ」などの案内は禁止。
- Figmaデザインの全レイヤー・グループ・要素・テキスト・画像・SVGを、1レイヤーにつき1つのHTML要素として必ず生成すること。
- デザイン上の全要素を漏れなくHTML化すること。
- 要素数・階層・並び順・装飾（色・余白・shadow・border-radius等）もデザインと完全一致させること。
- **省略・簡略化・自動最適化は禁止。**
- テキスト内の改行は<br>タグで表現し、タグ分割はしない。
- 連続した複数のテキストレイヤーがある場合は、それぞれ別のタグで生成。

結果は後述します。

セマンティックなHTML構造

続いてこちらです。
AIに対して具体的に指示をしない場合、HTMLタグの指定は結構めちゃくちゃでした。
フロントエンド開発としては致命的です。
たとえば、

• ナビゲーション部分を<div>タグだけで表現する（<nav><ul><li>でマークアップして欲しい）
• デザイン上では明らかにセクション分け出来そうだけど<section>で囲ってくれない
• テキストの改行毎に<p>タグで分断する
• 見出しも本文もテキストは全て<p>タグで表現する

ただし、デザイン上でリンクを設定すると生成されたHTMLでもリンクとして扱ってくれたりします。

そこで、ルールファイルに「セマンティックなHTMLを生成する」などと明記してみましたが、期待した結果になりませんでした。

おそらく、セマンティックなHTML構文は理解しつつも、デザインデータを参照しただけでは、どこがナビゲーションで、どこからどこまでが一つのセクションかをAIが判断できなかったのだと思います。

Figmaデータの作り方を工夫する

続いて、Figmaのデザインデータの作りも工夫してみることにしました。

レイヤー名には意味のある単語を使うことでそこから推測してタグを選んでくれる事がありました。例えば、<header>としてマークアップして欲しいレイヤーに「header」と付けると高い確率で<header>タグを使用してくれます。

とはいえ、実務では単純な<header>タグだけでマークアップされることは少なく、クラス名が付与されたりします。そこで「レイヤー名に規則をもたせる＋ルールファイルで指示」という合せ技を試してみました。

ルールファイル（抜粋）

### Figmaデザインのレイヤー名とCSSクラス名の対応ルール
Figma デザインのレイヤー名は、以下のようになっています。
<接頭詞：タグ名（オプション）>_<クラス名：BEMのブロック名--要素名__修飾子名>
例：`div_header--main__large` → `<div class="header--main__large">`
- セイヤー名に付けられた接頭詞は除外してクラス名に反映
- 特に接頭詞がないレイヤーはレイヤー名から推測して適切なタグで生成

これにより、かなり高い精度でタグの指定とクラス名の付与が行えるようになりました。

とはいえ、どのレイヤーがHTMLのどの要素（タグ）になり...をデザイナーさんが意識しつつデザインを作り上げていく事が制作フローとして良いのか？は議論が必要な気がします。（SNSでたまに見る、デザイナーは実装の知識があったほうが良いか？みたいな話は置いておいて、制作陣のそれぞれの職域は企業によって様々だと思うので、企業ごとに変わってきそうという意味です）

なお、崩れないように生成してもらおうと思ったらFigmaでのデザインはオートレイアウト機能はほぼ必須です。（自由形式では絶対値指定が増えてしまい悲惨な事になりました）

そして色々やってみた結果

このようになりました！

要素数は一致していて、HTMLもある程度期待したものが生成されました。

HTML構造は及第点

• 要素の漏れは無くなった
• 期待したHTMLタグ、クラス名でマークアップ
• W3 Nu Html Checkerでエラーなし

デザインとの完全一致はまだまだ課題あり

• ヘッダーの背景色（グレーになっていない）
• ヒーローエリアの配置（横いっぱいじゃない）、コピーの位置（画像の前面に配置されていない）

コンポーネント単位で生成したほうが精度が高い

試しにヘッダーとヒーローエリアを個別に選択してコード生成してもらったところ、デザインに近いものができました。

まとめ

ルールファイルの活用により、一定のクオリティでHTML/CSSの生成ができることが分かりました。

ですが、ページ全体を指定して生成する場合、ルールでガチガチに固めてもデザインに近い生成するには至りませんでした。この点はプロンプトやルールファイルの指示の仕方を変えることにより向上が見込めるかもしれません。

また、実務の面で考えるとデザインのテイストが変わる度にルールファイルをチューニングしていく労力はもったいなく、ある程度の精度が期待できるルールファイルを使いまわしつつ、コンポーネント単位で生成してもらうのが現実的です。

なお、デザインの再現性でいうと、比較的要素の配置が整っているシステムのUIなどは相性が良く、逆に装飾の凝ったデザインは相性が悪そうだと感じました。（この点は今後のAIの性能向上により改善していくかもしれません）

ある程度の精度を期待した実運用をするなら、事前に実装者とデザイナーによる認識合わせ（デザインの作り方等）が必要です。（AI活用以前に大切！）

【おまけ】Figma Make が面白い！

検証の合間に、Figma Makeによるデザインの作成を試してみましたが「これで良いのでは？」と思えるほど良い制作体験ができました。（良かった点を列挙します）

• 生成されたデザインに合わせてコードも作成してくれる。（デザインと一致）
• React等フロントエンド環境に合わせてあり、コンポーネント単位でファイルを用意してくれている。（コードはまとめてダウンロードできる）
• レスポンシブなデザイン＆コード生成

コード生成にAIを噛ませる必要はなく、デザインと一緒にコードが生成されるので余計な調整が不要です。

なお、デザインデータはコピーして、Figma Designに（レイヤー構造を保ちつつ）貼り付けることも可能。ですが、見た目だけの貼り付けになるため、レスポンシブデザインとしての設定値などは消え去ってしまうようです。

実務との相性でいうと、用途によっては使えそうという印象です。
例えば、期間限定の特設サイトやモックアップの作成などには使えると思います。
逆に、デザインやドキュメントなどしっかり管理されるようなシステムやWebサイトには少々不向きではないかとおもいます。（デザインは要素単位で微調整はできますが、完全に調整することはできないためです）

Figma MCP Serverで楽に仕事がしたい！という不純な思いもありましたが、結果的にFigmaの使い方を学ぶ良い機会になりました。