AIツールでどこまでデザインを忠実に実装できるのか

UI/UXも、AIと共に。～フロントエンド開発におけるAI活用事例～(https://rosca.connpass.com/event/369090/)

X(Twitter)：https://x.com/oikon48

Transcript

1. AIツールでどこまでデザインを 忠実に実装できるのか UI/UXも、AIと共に。～フロントエンド開発におけるAI活用事例～ 2025/10/10 Speaker: Oikon
2. 自己紹介 Oikon X: @oikon48 Software Engineer 趣味: 個人開発, AIツール研究 1
3. 今日話すこと 1. Figma MCPについて 2. Kombaiについて 3. Figma -> Code の実験 2
4. UI/UXデザイン実装の現状と課題 デザインからコードへの変換における課題点 再現度: デザインの意図を正確にコード化するのが難しい。AI臭のあるデザ イン。 実装面: ちゃんと指示をしないとレスポンシブ対応が抜けやすい 知識面: ライブラリやフレームワークなどの最新情報を持っていない 保守性: 一貫性のあるコンポーネント設計が難しい 現状ピクセルパーフェクトな実装は難しい Figma -> Codeは比較的、デザインに忠実 3
5. Figma MCPとは Figma MCPの特徴 FigmaのデザインデータをAIが直接 読み取り プロンプトで細かい指示が可能 ClaudeやCodexがデザインの意図を 理解 4
6. Figma MCP + Claude Code, Codex CLI 使用方法 1. Figma MCPをClaude Code/Codex CLI に接続 2. Figmaファイル/フレームのURLを指定 3. 自然言語でコード生成を指示 .claude.json : ~/.codex/config.toml : 5
7. Kombai インドのスタートアップが開発したフロントエ ンド専用AI Agentツール Kombaiの特徴 プロジェクト全体を解析 技術スタック(フレームワーク・ライ ブラリ)を設定 仮装環境内で実行し、Acceptするま でlocalに変更を加えない 6
8. 簡単なデモ: Figma designを再現してみる 7
9. 実験: 3ツールでFigmaデ ザインをコード化 検証方法 同一のFigmaデザインを使用し、以下の3つの ツールで比較 比較ツール 1. Claude Code + Figma MCP 2. Codex CLI + Figma MCP 3. Kombai 共通プロンプト FIGMA_DESIGN_URL このFigma Design を実装して 8
10. Claude Code + Figma MCP 9
11. Codex CLI + Figma MCP 10
12. Kombai 11
13. 実験結果 12
14. まとめ まだピクセルパーフェクトは難しいが、忠実度70%くらいは再現できる フレームワーク・ライブラリの整合性は、まだエンジニアが評価しない といけない 13
15. Kombai のプロモーションコード Coupon Code: （登壇でのみ表示） 。メモし損ねた方はDMくれればお渡 しします 14