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