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

AIツールでどこまでデザインを忠実に実装できるのか UI/UXも、AIと共に。～フロントエンド開発におけるAI活用事例～ 2025/10/10 Speaker: Oikon

自己紹介 Oikon X: @oikon48 Software Engineer 趣味: 個人開発, AIツール研究 1

今日話すこと 1. Figma MCPについて 2. Kombaiについて 3. Figma -> Code
の実験 2

UI/UXデザイン実装の現状と課題デザインからコードへの変換における課題点再現度: デザインの意図を正確にコード化するのが難しい。AI臭のあるデザイン。実装面: ちゃんと指示をしないとレスポンシブ対応が抜けやすい知識面: ライブラリやフレームワークなどの最新情報を持っていない保守性:
一貫性のあるコンポーネント設計が難しい現状ピクセルパーフェクトな実装は難しい Figma -> Codeは比較的、デザインに忠実 3

Figma MCPとは Figma MCPの特徴 FigmaのデザインデータをAIが直接読み取りプロンプトで細かい指示が可能 ClaudeやCodexがデザインの意図を理解 4

Figma MCP + Claude Code, Codex CLI 使用方法 1. Figma
MCPをClaude Code/Codex CLI に接続 2. Figmaファイル/フレームのURLを指定 3. 自然言語でコード生成を指示 .claude.json : ~/.codex/config.toml : 5

Kombai インドのスタートアップが開発したフロントエンド専用AI Agentツール Kombaiの特徴プロジェクト全体を解析技術スタック(フレームワーク・ライブラリ)を設定仮装環境内で実行し、Acceptするまでlocalに変更を加えない
6

簡単なデモ: Figma designを再現してみる 7

実験: 3ツールでFigmaデザインをコード化検証方法同一のFigmaデザインを使用し、以下の3つのツールで比較比較ツール 1. Claude Code
+ Figma MCP 2. Codex CLI + Figma MCP 3. Kombai 共通プロンプト FIGMA_DESIGN_URL このFigma Design を実装して 8

Claude Code + Figma MCP 9

Codex CLI + Figma MCP 10

Kombai 11

実験結果 12

まとめまだピクセルパーフェクトは難しいが、忠実度70%くらいは再現できるフレームワーク・ライブラリの整合性は、まだエンジニアが評価しないといけない 13

Kombai のプロモーションコード Coupon Code: （登壇でのみ表示）。メモし損ねた方はDMくれればお渡しします 14

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

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

Oikon

More Decks by Oikon

Other Decks in Technology

Featured

Transcript