figma mcp でデザイン再現実装に取り組んでいる話

はじめまして。 フロントのUI実装・デザインを担当している島です。

「このデザインをMCP使って実装したい！」というニーズ、高まっていますね。
figma公式MCPサーバーも装備され、ますますその動きは進みそうです。

弊社でも、Github CopilotとFigma MCPを使いAI活用したデザインの再現実装に取り組んでいるのですが、

このデザインをMCP使って実装したい！

👇️実際の現場だと

（実装のコンテキストとワークフローを理解して、）
（既存コードがあればそれ使って、）
（新規で作る場合は再利用可能なかたちで、）
このデザインをMCP使って実装したい！

というふうに、楽しい話から難しいお題へと変化します。

対する私たちの取り組みをご紹介します。

1. デザインの再現性を高める

まずは、アウトプットの品質の担保です。

同じプロンプトを入れても、モデルやタイミングによって、出力されるコードは異なります。
また、LLMの学習データに依存するので、勝手にアレンジを加えてくるケースもあります。

そこで、

  • 「誰がやっても大体同じものが出来上がる」状態にする
  • とにかく忠実にデザインを起こしてもらう
  • そのためのルールを追加していく

というところをゴールにおくことにしました。

参考）モデルによる出力差の実験

プロンプト

下記のfigmaを見て、デザインを忠実に再現してください。
cssはFLOCSSのルールでお願いします。
https://www.figma.com/design/xxxx/xxxx?node-id=3809-126614&t=nlL5vCTQBqeLZuy4-1

結果

👆️これだと4-oが優秀に見えますがｗ、私個人ではClaude 3.7 Sonnet(当時) のアウトプット品質・レスポンスの感じが好きで、よく使っています。

2. 既存コードの再利用を求めない

次に、既存コードの再利用についてです。

今まで作ってきたスタイルシートは資産なので活用したいところですが、それを理解・活用してもらうには、命名規則やファイル構成などをAIに学習させる必要があります。
ところが、弊社のフロント開発事情は以下のような状況です・・

  • デザインシステムはあるが、ソースコード側にUIライブラリ集が存在しない
  • 長い運用の中で、時代によって異なる命名規則・パーツが参照されており、一元管理できていない状態である
  • viewとロジックが分離しており、横断的である（.php、.ctp、.css、.jsファイルで動作する）

「ここ見ておけばOK!」なリソースをぱっと渡せず、どうしようか..と頭を抱えました。

そこで、再利用を頑張る必要性について検討しました。

  • 既存の.ctpが、再利用性の高い作りになっているかというと、そうでもない（どちらかというと、ページごとに用意されている傾向が強い）
  • 異なる命名規則がすでに混在しているので、守るべき命名規則はあってないようなもの
  • 保守の観点でいえば、既存クラスに変更をかけられた場合、他画面への影響が測れない（レビュー時の負担が増える）

結果として、

  • 既存コードは使わずいったん新規で組ませる。将来的に、共存/統合をしていく
  • ただし、命名については既存コードとバッティングしないよう工夫する（後述）

という方針で進めることにしました。

3. 誰しもがわかるコードで組んでもらう

実際にやると、なかなか一発で思った通りのコードがあがってくることはないので、出力されたコードを調整する場面も出てきます。
また、最終的には人間のレビューを通すことになるので、職種問わず、スタイリング用のコードを理解できる必要があります。

そこで考えたのが、CSSフレームワークの採用です。

  • すでに整った公式ドキュメントがある→探せば直し方の検討がつく
  • AIに対しても、コーディングガイドラインとして参照させることができる
  • 既存コードとも共存できる

試しにtailwind4のコードのみで組む実験をしてみると、tailwindビギナーでも、プロンプトの指示のみで合格点まで再現できることがわかりました。

以前からユーティリティクラス欲しいと思うシーンもあったこともあり、これを機にtailwind4を導入することにしました。

現在tailwindに精通しているメンバーはいませんが、AIがベースを作れば、学習負荷を抑えつつ全員で使えるようになると思っています。

参考）tailwindのコードでアラートを組む実験

👆️すべてtailwindのユーティリティクラスで再現されています

参考）既存画面をtailwindのクラスで置換する実験

👆️すべてtailwind4のクラスで組み直してくれています。（スクショ撮りつつで、調整込で~10分くらい）

4. 再利用はやりながら

とはいえ、デザインの保守性や、デザインシステムの存在意義を考えると、やはり再利用性はほしいところです。

ここに関しては、

という道筋で、デザインシステムと連携したコンポーネントクラスを新たに作っていく予定です。

参考）ボタンコンポーネントを作る実験

以上、まさに進行中のAI活用について、現場からご報告でした。
また進捗・成果が出てきたら、記事にしていきたいと思います。

余談

ちなみに、デザイン再現実装でfigma MCPを活用する場合、新規ページや単発系のページはとても相性が良いと思います。
（なぜなら他影響がなく、再利用性を考慮しなくてもよい、フリースタイル実装だから）

そういった部分活用に限って、業務フローに取り込んでみるのもおすすめです！

ご興味ある方は、ぜひ私たちと一緒に取り組みましょう。