Copilot Agent安定版がきた

ので、最近よく見るMCPサーバーでFigmaのデザインをもとに実装する、をやってみました。

手順

基本的には下記に則って進めました。
とてもわかりやすかったです。感謝！

Figmaのデフォルトのデザインを試しに依頼してみることにしました。

https://www.figma.com/design/xxx（ここは実際のURL）
上記をFigmaのMCPサーバーからアクセスして、レイアウト通りに個別に画面を再現してください。別途ライブラリなどが必要であればインストールしてください。

おおおおお、すげえ！！！！

全部の画面ではないものの、3画面はきちんとみたまんまでできてます。
さすがにこれは感動しますね。
自分では一切コーディングせず、あっという間に画面で出来ました。
すげえ時代ですわ……。

いちおう補足すると、最初は画像がなく、レイアウトしか作られませんでした。
なので追加で、

figmaの画像部分も再現できる？

とお願いしたら、トマトとかの画像もダウンロードして反映してくれました。

これはUIデザインが劇的に捗りそうですね。

注意点として、単純にお願いしただけだと、cssは1ファイルにまとめられていました。
また、当然ですがレイアウトだけなので動的な部分は実装なしです。

※ログインは自分がエージェントを使ってみるので追加しただけなので別

フォルダ分けとかパーツの分け方とか実装方式とか、そこら辺をプロンプトとしてきちんと整理したり、人間が最後はチェックするのが大事になってきそうです。

ChatGPTが最初出てきた時もすごいと思いましたが、AI関連で一番感動したかもしれません。

いい衝撃かついい勉強になりました。