AIエージェント能力アトラス › 仕事ごとの一覧 › ソフトウェア開発 › 新規開発（プロトタイプ/フルアプリ/ゲーム/Web）

デザイン/画像からUIコードを生成する

Generate UI code from a design mockup or image

0 できない ／ 1 デモ止まり ／ 2 補助 ／ 3 実務品質（要確認） ／ 4 専門家並み ／ 5 専門家超え。「予」は予測。

専門家と比べて

単純なコンポーネントはジュニアを超えるが、デザインシステム全体の一貫性維持はミドル未満

できること

Figma/画像から視覚的に近いレスポンシブコードを生成（複雑デザインで視覚一致度80〜94%の報告）

まだできないこと

画像だけでは伝わらないブランドの微妙なトーンや、デザインシステムの拡張判断

なぜそうなのか

画像はコンテキスト情報（余白ルール、状態遷移など）を欠くため、モデルが暗黙のデザイン意図を補えない

これからの予測の根拠

Figma MCP等の構造化データ連携が進むほど精度が上がる傾向が明確なため、2028年には視覚一致度がほぼ飽和すると予測

いま使える主な道具

v0 (Vercel)、Locofy、Builder.io、Figma Dev Mode MCP

根拠

• Best AI for converting Figma designs to production React components: pixel accuracy test 2026-04
  複雑デザインでLocofy.ai 94%、Builder.io 89%、v0 82%の視覚一致度
• Pixel-Perfect UI with Playwright and Figma MCP: What Actually Works in 2026 2026-01
  画像単体では文脈情報不足でピクセルパーフェクトには手動調整が必要と指摘

同じ分野のほかの仕事（新規開発（プロトタイプ/フルアプリ/ゲーム/Web））

• プロトタイプ/MVPをゼロから作る
• 本番品質のフルスタックWebアプリを開発する
• ゲームを作る（メカニクス・アセット込み）
• モバイルアプリをストア公開まで作る

AIエージェント能力アトラス 2026（2026-09-06 時点・v1.0）の1マスです。レベルは公開された実験・ベンチマーク・報告から付けた目安で、2027年以降は予測です。全マスに根拠のリンクがあります。作者は個人で、AI（Claude）と一緒に調べて作っています。