Copilot Agent安定版がきた
ので、最近よく見るMCPサーバーでFigmaのデザインをもとに実装する、をやってみました。
手順
基本的には下記に則って進めました。
とてもわかりやすかったです。感謝！
対象デザイン
Figmaのデフォルトのデザインを試しに依頼してみることにしました。
プロンプト
https://www.figma.com/design/xxx（ここは実際のURL）
上記をFigmaのMCPサーバーからアクセスして、レイアウト通りに個別に画面を再現してください。別途ライブラリなどが必要であればインストールしてください。
結果
感想
おおおおお、すげえ！！！！
全部の画面ではないものの、3画面はきちんとみたまんまでできてます。
さすがにこれは感動しますね。
自分では一切コーディングせず、あっという間に画面で出来ました。
すげえ時代ですわ……。
いちおう補足すると、最初は画像がなく、レイアウトしか作られませんでした。
なので追加で、
figmaの画像部分も再現できる？
とお願いしたら、トマトとかの画像もダウンロードして反映してくれました。
これはUIデザインが劇的に捗りそうですね。
注意点
注意点として、単純にお願いしただけだと、cssは1ファイルにまとめられていました。
また、当然ですがレイアウトだけなので動的な部分は実装なしです。
※ログインは自分がエージェントを使ってみるので追加しただけなので別
フォルダ分けとかパーツの分け方とか実装方式とか、そこら辺をプロンプトとしてきちんと整理したり、人間が最後はチェックするのが大事になってきそうです。
ChatGPTが最初出てきた時もすごいと思いましたが、AI関連で一番感動したかもしれません。
いい衝撃 かつ いい勉強になりました。