AIコーディングの精度は、Figmaを渡す前に決まっている
この記事でわかること
AIコーディングの精度は、Figmaを渡す前に決まっている
この記事でわかること
- 複数ページを統一感を保ってAIにコーディングさせる方法の限界
- 制作会社が本来やっている「先に台帳を作る」というやり方
- Figma側に何を整えてもらうと、AIへの指示がシンプルになるか
これまで、FigmaのURLを渡してAIにコーディングさせるとき、1ページ目で決めた設計方針を文章にまとめて、2ページ目以降に引き継ぐという方法を紹介してきました。これは複数のページを作っても統一感を保つための工夫です。ただ、この方法を続けていて気づいたことがあります。これは本来、AIが毎回頑張ることではなく、Figma側に最初から用意されているべきものだったということです。
AI側で頑張る方法には限界がある
1ページ目の実装後に、AIに設計方針をまとめさせて、それを2ページ目、3ページ目と使い回す。この方法は機能しますが、いくつか弱点があります。
- まとめさせる文章の粒度が、毎回微妙に変わる
- ページ数が増えるほど、引き継ぐ文章も長くなり、それ自体がトークンを消費する
- 途中で新しいパターンのコンポーネントが出てくると、そのつど文章を書き足す必要がある
これは、AIが会話の中でその場しのぎの台帳を作っている状態です。会話が途切れたり、担当するAIのセッションが変わったりすれば、この台帳も一緒に失われます。
制作会社は、これを最初にやっている
Webサイトを専門に作っている会社では、コーディングに入る前の段階で、次のようなものを用意しておくのが一般的です。
- スタイルガイド／デザインシステム ：色・余白・タイポグラフィ・コンポーネント一覧をまとめたページ
- コーディングルール ：命名規則（BEMなど）やディレクトリ構成をまとめた文書
これは、AIに都度書かせている「設計方針の文章」を、着手前に人間が時間をかけて1回だけ作り、以降ずっと参照できる状態にしておく、という考え方です。複数人で分担してコーディングしても崩れないのは、この台帳が「その場の記憶」ではなく「共有された正典」として存在しているからです。
Figma自体が、この台帳を持てる
さらに言うと、Figmaにはこの台帳をFigmaファイルの中に埋め込む機能があります。
- Component ：ボタンやカードなど、繰り返し使うパーツをひとまとめに定義しておく機能
- Variables ：色・余白・フォントサイズなどの値を、名前付きの変数として管理する機能
これらがきちんと定義されているFigmaファイルは、それ自体が「統一感の台帳」を兼ねています。ファイルを開いた人は、Componentの一覧を見れば使えるパーツが分かり、Variablesを見れば採用されている色や余白の値が分かります。
AIへの指示はどう変わるか
Component・Variablesが整ったFigmaファイルであれば、AIへの指示はシンプルになります。ページごとに設計方針を提案させたり、文章化して引き継いだりする手間が減ります。
Figma MCPで、このファイルのVariablesとComponent一覧を確認してください。
それに沿って、指定したフレームを実装してください。
AI自身が毎回設計方針を作らなくても、Figmaファイルを見れば従うべきルールがすでにそこにある状態です。
デザイナーに依頼するときに伝えること
もし外部のデザイナーにFigmaデータを依頼する機会があれば、次のようなお願いを添えると、その後のAIコーディングが格段に楽になります。
- 色・余白・フォントサイズは、Variablesとして定義してほしい
- ボタンやカードなど繰り返し使うパーツは、Componentとして登録してほしい
- PC版とスマホ版は、同じComponentのバリアントとして作ってほしい
これは特殊な依頼ではありません。Figmaを本格的に使っているデザイナーであれば、もともと標準的にやっている作業です。むしろこれが整っていないファイルの方が、実装時に手戻りが起きやすくなります。
まとめ
- AIに毎回「設計方針を考えて、まとめて、引き継いで」とやらせる方法には限界がある
- 制作会社は、コーディングに入る前にスタイルガイドやコーディングルールを先に用意している
- FigmaのComponentとVariablesは、その台帳をファイル自体に埋め込む機能
- これが整っているファイルなら、AIへの指示は「このルールに沿って実装して」だけで済む
- 依頼できる立場にあるなら、デザイナーにComponent・Variablesの整備をお願いする価値がある
AIにどう指示を出すかを工夫するのも大事ですが、それ以前に「渡されるFigmaファイルがどれだけAIコーディングに適した形で作られているか」で、そもそもの精度が変わってきます。指示の工夫は、土台が整っていない場合の代替策だと捉えておくと、次にどこを改善すればいいかが見えてきます。
