optim-shunsuke-kameda https://blog.hatena.ne.jp/optim-shunsuke-kameda/ OPTiM TECH BLOG https://tech-blog.optim.co.jp/ 本記事は、「AIにUIを作らせたい」というフロントエンドエンジニアの素朴な関心から始まり、Figma MCPを用いたUI自動生成の実験と、その失敗・改善プロセスを詳細にまとめた実践記録です。 当初はFigma MCP単体での生成精度に限界があり、MUIやデザイントークン、React設計、各種ライブラリ知識など、AIに不足している前提知識が多数あることが明らかになりました。 その後、AIモデルの進化やMUI MCPの登場によって一部課題が自然解決し、残る課題に対して Agent Skills を用いてデザイントークンや設計ルール、ライブラリの使い方をAIに明示的に教えるアプローチを採用。 さらに few-shot として正しい実装例をExampleカタログ化し、AIに参照させることで、誤った既存実装に引きずられないUI生成を実現しました。 最終的には、設計段階からAIと対話しながら進めるSkillsも導入し、ほぼ修正不要なUIを10分程度で生成できるレベルに到達。 AIによるUI自動生成において重要なのは「AIに与える知識の整理」「課題に応じたツール選択」「一気に解決しようとしない戦略的姿勢」であると結論づけています。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-blog.optim.co.jp%2Fentry%2F2026%2F04%2F09%2F100000" title="Figma MCPだけではUIは作れない ── AIに不足していた知識の正体と補い方 - OPTiM TECH BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/o/optim-tech/20260330/20260330184253.png Hatena Blog https://hatena.blog 2026-04-09 10:00:00 rich https://tech-blog.optim.co.jp/entry/2026/04/09/100000 1.0 100%