これはAIで作ったな
今では誰でも当たり前のようにAIでWebサイトやWebアプリケーションなどを作ることができます。コーディング自体にはほとんど課題はありません。しかし、現時点で課題があるとすればデザインがAIぽくなってしまう点だと思います。サイトを見ると、「これはAIで作ったな」とか「あのバージョンのあのモデルを使ったな」とかがわかります。
自然言語でざっくり伝えたらほとんどそうなります。たとえ、プロンプトを作りこんでデザイン案を構造化されたテキストに起して、流したとしても想定していたものよりも大きく外れたデザインが上がってくることもあります。
画像から再現させる方法
じゃあ、デザインの画像から再現させる方法はどうでしょうか。これも現時点では難しいです。なぜなら、AIにとって画像は理解しにくいデータであるからです。画像からピクセル単位での指定やカラーコードなどは抽出は厳密にしてくれません。せいぜい、それに寄せる程度くらいです。
さらに画像にはテキストなども含まれており、OCRを使ってテキストを読み込んで再現するなどもしなければなりません。ランディングページのように縦長の一本の画像を完全にテキストを再現させるのは非常に困難です。
MCPサーバーを利用
しかし、いい方法があります。それはデザインデータをAIが理解できる形式に置き換えてやるという方法です。それにはMCPサーバーを利用します。ようはAIとデザインデータの中間にMCPサーバーが仲介してくれて、デザインデータをAIが理解できる形式で連携してくれるのです。
僕が試した中で最も短時間で精度高くデザインデータを再現できるのはこの方法です。
- chat-gptでデザインの壁打ちをする
- chat-gptでデザイン生成用のプロンプトを作成する
- figmaのプラグインLayermateに上記プロンプトを流す
- figma上でデザインが出来上がる
- figmaのDevモードでMPCサーバーを立ち上げる
- chat-gptのCODEX側と連携してデザインを共有する
ほぼ100%再現
この方法でやると95％近く完璧にfigmaのデザインをコード上で再現することに成功しました。忠実に再現できてない場合もセクション単位で情報を連携して忠実に再生成するように依頼すればほぼ100%再現してくれます。
難点は課金が必要な点です。Codexで20ドル/月、figmaDevモード利用のために20ドル/月、Layermateで20ドル/月でざっと少なくても9,000円くらいかかります。しかし、これはエンジニア採用を考えたら格安中の格安です。個人開発で受託開発をする経費として考えれば異常に安いコストで使えると思います。
