デザインからコードを生成するおすすめAIツール:出発点となる素材別に整理

Figmaのコミュニティフォーラムには、Figma Makeでコンポーネントと変数のライブラリを選択したところ、「コントラストがほとんどない色と、意味をなさないフォントサイズ」が返ってきたという投稿があります。同じユーザーは、ライブラリを何も選択しない方が結果が約90%良かったと報告しています。どのツールもこの失敗を基準に評価すべきです。チームの既存コンポーネントを使って組み立てるのか、それとも後で整合させる羽目になる別系統のUIを並行して作ってしまうのか、です。

デザインからコードを生成するおすすめAIツールは、同じ土俵で競っているわけではありません。出発点となる入力がそれぞれ違うからです。スクリーンショット、Figmaファイル、文章のプロンプト、既存のコードベースでは、含まれる構造の量がまったく異なります。

手元にあるもので選びましょう。FigmaファイルならFigmaの組み込みコード生成、Anima、Builder.io Visual Copilotなどのコンバーターへ。スクリーンショットならscreenshot-to-codeへ。プロンプトならv0、Lovable、Boltへ。既存のコードベースなら、Model Context Protocol(MCP)経由でデザインシステムを読み込むコーディングエージェントへ。

要約

• Figmaに課金しているならFigmaの組み込みコード生成を使いましょう。screenshot-to-codeはデザインファイルが存在しない場合に限って使います。v0、Lovable、bolt.diyは、デプロイ先、課金体系、モデルキーの要件に応じて選びます。コードベースとデザインシステムがあるなら、Code ConnectでマッピングしたFigma MCPを使います。
• どのツールを導入する前にも、既存コンポーネントで作れる画面を1つ生成し、出力にハードコードされた16進カラーやピクセル値がないか、またライブラリからインポートすべき箇所で新たにコンポーネントを宣言していないかを確認してください。
• bolt.diy、screenshot-to-code、Penpotは自分で管理するサーバーで動かせますが、それぞれ注意点があります。bolt.diyはコミットが2026年2月から10月まで止まっていて、最後のタグ付きリリースは2025年5月のものです。screenshot-to-codeにはモデルのAPIキーが必要で、セルフホスト版のPenpotはクラウド版のリリースより遅れて提供されます。
• コンポーネントの再利用が最もうまくいくのは、Code Connectを使ったFigma MCPやBuilder.ioのデザインシステムインデックス機能のように、明示的なマッピングを持つツールです。ただし生成された出力はやはりレビューが必要なので、どのルートでも後片付けの時間を見込んでおきましょう。

出発点に合わせてツールを選ぶ

スクリーンショットにはピクセルしか含まれていません。Figmaファイルにはコンポーネント名、変数、レイアウトルールが加わり、コードベースにはコンポーネントそのものが含まれます。つまり、どの種類のツールが活用できる情報を持てるかは入力で決まります。

コンポーネントとトークンの再利用を確かめる1画面テスト

ライブラリを選択しない方が良い結果になったMakeのユーザーは、問題に気づくのに1週間も使う必要はありませんでした。問題は最初に生成されたページにすでに現れていました。だからこそ、どの候補をテストするにも画面1つで十分なのです。

1. 設定フォームや料金カードなど、チームが既存コンポーネントで作った画面を1つ選びます。
2. 検討中のツールでその画面を生成します。入力には、新しい作業で使うのと同じ種類のものを使ってください。
3. 出力からハードコードされた値を探します。#3B82F6のような生の16進カラー、font-size: 14pxのようなピクセル指定のフォントサイズ、固定の余白などです。それを、トークン名、CSS変数、テーマクラスがどのくらい使われているかと比較します。
4. インポートを確認します。コンポーネントライブラリから自分たちのものをインポートせずに、新しいButtonやCardを宣言している出力は、別系統のUIを作ってしまっています。
5. フレームワークとスタイリングの方式がリポジトリと一致しているか確認します。インラインスタイルの素のHTMLは、プレビューの見た目がどうであれ書き直しになります。

Stack Overflowの2025年開発者調査では、開発者の66%が「ほぼ正しいが、完全には正しくないAIソリューション」をAIに関する最大の不満として挙げました。これはAIコーディングツール全般についての調査結果で、デザインtoコードに関する調査ではありません。しかし、見た目は正しいのにすべての色をハードコードしている画面は、まさにその意味で「ほぼ正しい」状態です。

注:このチェックは、ツールをチーム全体に展開する前に実施してください。生成した画面1つなら数分で済みますが、ハードコードされた値を含む出力を1か月分マージしてしまうと、後片付けに1スプリントかかります。

このチェックが見るのはコードです。レンダリングされた画面が今もデザインと一致しているかは別の問題で、ビジュアルリグレッションチェックを行うBackstopJSのようなセルフホスト可能なツールで確認します。

完成したFigmaファイルがある場合

このグループのFigmaからコードを生成するAIツールは、どれも同じファイルから出発します。実際の違いはコードの行き先で、キャンバス上か、ホストされたプロトタイプか、サードパーティのエクスポートかです。

Figmaの組み込みコード生成

Figma Designでフレーム、コンポーネント、またはセクションを選択し、エージェントを開いて、HTMLとCSS、Reactコンポーネント、または特定のフレームワークのコードを依頼します。Figmaによると、エージェントにデザインシステムを参照させることができ、出力は汎用的なプレースホルダーではなく、トークン、変数、コンポーネント構造を参照するようになります。同じページには、Figmaのすべての有料プランで利用可能と記載されています。2026年10月時点ではオープンベータのため、クレジットの消費量や上限は変わる可能性があります。

出力はファイル内にスレッドとして残り、開発者が開いて確認できます。ホスティングやデプロイの手順はありません。動くプロトタイプが欲しかったなら制約ですが、リポジトリに貼り付けるコードが欲しかったならむしろ利点です。

Figma Make

Figma Makeは、プロンプト駆動の別の作業画面です。Figmaによると、MakeはHTML、CSS、JavaScriptを出力してフロントエンドのプロトタイプを作り、変更用の組み込みエディターも備えています。無料のStarterプランで試すことができ、ライブデータをシミュレートするためのSupabase連携にも対応しています。

Figma自身の各機能は役割が違います。Makeはプロンプトとフレームから動くプロトタイプを作ります。キャンバス内のジェネレーターは、選択したフレームをファイルのライブラリを使ってコードに変換します。Figma MCPを使うと、リポジトリ内のコーディングエージェントがコンポーネントと変数を直接読み取れます。

Anima、Builder.io Visual Copilot、Locofy

Builder.ioのVisual Copilotは、React、Qwik、Angular向けの出力に加え、モバイル向けにKotlinとFlutterを挙げており、スタイルはTailwind CSSまたはCSS Modulesで付けられます。再利用については、同じページでCustom Component Mappingが紹介されています。Figmaのコンポーネントを、コードベース内のコンポーネントに結び付ける機能です。Builderのドキュメントでは現在、手動のコンポーネントマッピングはコンポーネントインデックス作成に置き換わる非推奨機能とされ、Enterpriseプランの機能と記載されているため、まず最新のドキュメントとご利用のプランを確認してください。

Animaの無料プランでは、Figmaプラグインでのコード生成が5回まで可能で、さらにAI Playgroundでのチャットメッセージが1日5件、Figmaインポートが5回まで使えます。2026年10月時点で、Enterpriseの料金は月額$500から(年払い)です。

AnimaはMCPサーバーも提供しており、それを通じて生成したコードも同じコード生成枠にカウントされます。Locofyも、このカテゴリに入るFigmaファイル用コンバーターの1つです。

どのFigmaコンバーターから始めるか

チームがFigmaに課金しているなら、Figmaの組み込みコード生成から始めましょう。エクスポートの手順なしでファイルのライブラリを読み取れ、有料プランなら1画面テストに新たなサブスクリプションは要りません。コードベースのコンポーネントをインポートする出力が欲しい場合(マッピングやコンポーネントインデックス作成がご利用のプランにどう適用されるかはドキュメントで要確認)や、名前を挙げて対応をうたっているKotlinやFlutterのモバイル出力が欲しい場合は、Builder.io Visual Copilotに切り替えます。

人に見せるためのクリックできるプロトタイプにはFigma Makeを使いましょう。マージする予定のコードは、Figmaのキャンバス内コード生成かBuilder.io Visual Copilotで作るべきです。

スクリーンショットしかない場合

screenshot-to-codeは、この用途でのオープンソースの定番です。MITライセンスで、GitHubスターは約80,000、2026年も引き続きコミットされています。画像を渡すと、TailwindまたはCSSを使ったHTML、React、Vueなどのスタックでコードを返します。何も自分で動かしたくない場合は、screenshottocode.comにホスト版があります。

screenshot-to-codeのAIは画像に写っているものしか扱えないため、限界は入力の側にあります。スクリーンショットには、コンポーネントの識別情報も、変数も、ホバーやフォーカスの状態も、レスポンシブのブレークポイントもありません。返ってくるのは1つの幅における静的な1フレームの再現であり、トークンはすべてピクセルの色から推測するしかありません。

screenshot-to-codeが適しているのは、デザインファイルが存在しない場合です。たとえば、参考レイアウトに合わせたいときや、誰もFigmaファイルを持っていないレガシーページを作り直すときです。Figmaファイルがあるなら、そちらから始めましょう。スクリーンショットでは失われる情報がファイルには含まれているからです。

プロンプトしかない場合

合わせるべきデザインシステムがない場合、トレードオフは別の3つのポイントに移ります。ツールの課金方法、コードをどこまで編集できるか、生成されたアプリをどこまで成長させられるかです。

v0

v0の無料プランには1日7メッセージの上限があり、Vercelへのデプロイ、GitHub同期、ビジュアルなDesign Modeが付いています。有料の利用はトークン単位の課金で、v0モデルのトークン料金はv0 Miniからv0 Max Fastまで4つのモデル階層で異なります。セッションのコストは、どの階層を選ぶかと会話がどれだけ長く続くかで決まります。

Lovable

Lovableはクレジットで課金します。Default Modeではタスクの複雑さによってコストが変わりますが、Plan Modeは1メッセージにつき1クレジットです。無料プランには1日5ビルドクレジットの付与があり、上限は月30クレジットです。

BoltとLovableを比較するRedditスレッドのあるコメント投稿者は、Boltではコードを「ほぼ完全にコントロール」できた一方、Lovableはコードの差分を表示するだけで「編集アクセスがない」ように見えたと書いています。これは1人のユーザーの報告なので、今もそうだと決めつける前に現在のエディターを確認してください。

Bolt.newとbolt.diy

Bolt.newはホスト型の製品です。bolt.diyはそのオープンソース版で、Ollama経由のローカルモデルを含む21以上のプロバイダーからプロンプトごとにLLMを選べます。データベースは必須ではなく、Supabaseはオプションの連携です。その上に何かを構築する前に、コミット履歴とライセンス条件を確認してください。

Google Stitch

Winbuzzerのリデザインに関する記事によると、Googleは2026年3月に、無限キャンバス、音声操作、デザインエージェントを備えたStitchを再ローンチしました。同じ記事では、デザインはFigma形式やReactなどのコードフレームワークにエクスポートでき、MCPサーバーによってStitchをClaude Code、Gemini CLI、Cursor、Antigravityに接続できるとしています。つまりStitchは、プロンプトのルートとコードベースのルートの中間に位置します。プロンプトから始まりますが、リポジトリで作業するエージェントにデザインを渡せます。

どのプロンプトツールから始めるか

LovableとBoltに関するHacker Newsの議論で、あるコメント投稿者は、バックエンドをSupabaseに任せている以上、この2つで役に立つソフトウェアを作れる上限は「信じられないほど低い」と主張しました。この投稿者は競合製品を開発中であることを明かしているので、測定結果ではなく、利害関係のある事情通の意見として読んでください。

Figmaファイルを持っているからといって、このルートが自動的に除外されるわけでもありません。BoltとLovableに関する同じRedditスレッドで、別のコメント投稿者は、欲しいデザインには「ただプロンプトを書くより難しくて面倒」に思えたので、Figmaを取り込んだことは一度もないと書いています。

チームがVercelでデプロイしていて、初日からGitHub同期が欲しいならv0を選びましょう。ビルドクレジットを使う前に、固定コストのPlan Modeのメッセージでビルドを計画したいならLovableを選びます。手でコードを変更するつもりなら、先にそのエディターを確認してください。

自分のモデルキーを持ち込みたい、またはローカルモデルを動かしたい場合はbolt.diyを選び、再開した開発が続くと確認できるまではプロトタイピング用のツールとして扱ってください。プロンプトで生成したデザインを、後でMCPサーバー経由でリポジトリ内のコーディングエージェントに渡したい場合はStitchを試しましょう。

コードベースとデザインシステムがすでにある場合

このルートはリポジトリの中で動き、エージェントがコンポーネントそのものを読み取ります。代償はセットアップの作業で、それでもドキュメント化された仕組みは再利用の確率を上げるだけです。再利用を保証するとドキュメントに書かれた仕組みは1つもありません。

Figma MCP

Figmaのヘルプセンターによると、Figma MCPサーバーはコンポーネント、変数、レイアウトデータ、FigJamのコンテンツ、Makeのリソースを読み取った上で、選択したフレームからコードを生成できます。Code Connectを使ってそのコードをコンポーネントと整合させ、リモートサーバーはキャンバスに書き戻すこともできます。

バージョンは2つあります。Figmaがほとんどのユーザーに推奨するリモートサーバーと、特定の組織やエンタープライズのケース向けのデスクトップサーバーです。

仕組みとしては、MCPはコーディングエージェントにデザインの構造化されたデータを渡します。エージェントがフレームを調べると、サーバーはそのフレームのコンポーネント、スタイル、変数を送ります。Figmaのブログによると、それらの要素がCode Connectでコードにマッピングされている場合、エージェントはコードのリソースから取り込めます。マッピングがない場合でもスタイルのコンテキストは得られますが、コンポーネントはゼロから書くことになります。

エージェントは自由に選べます。FigmaのセットアップガイドはClaude Code向けに書かれており、OpenCodeのMCPドキュメントはローカルとリモートの両方のサーバーを扱っています。Claude CodeとOpenCodeのどちらを選ぶかは、マネージドの手軽さとプロバイダーを自分で制御できることのどちらを取るかで決まり、その選択にデザイン作業特有の要素はありません。

Penpot MCP

Penpotはそのオープンソース版にあたり、ドキュメントでは3つの主要な構成要素が説明されています。MCPサーバー、Penpot内で動作して開いているファイルを接続するMCPプラグイン、そしてプロンプトを書くMCPクライアントです。設定はPenpotアカウントのIntegrationsページから、個人用のMCPキーを使って行います。これを通じて、エージェントはコンポーネント、スタイル、トークン、レイヤーを読み取り、変更できます。

プロジェクトの構成は最近変わりました。単独のpenpot-mcpリポジトリには、2026年2月にアーカイブされたという告知があり、その内容はメインのPenpotリポジトリに統合されています。旧リポジトリを前提に書かれたガイドは、異なるセットアップを説明している可能性があります。

Claude Design

Anthropicは2026年4月、Pro、Max、Team、Enterpriseの契約者向けに、Anthropic LabsのリサーチプレビューとしてClaude Designをリリースしました。オンボーディングの際、Claudeはコードベースとデザインファイルを読み込んでチームのデザインシステムを構築し、以後のプロジェクトにそれを適用して、完成したデザインをClaude Code向けのハンドオフバンドルにまとめます。

自社でもデザインツールを販売しているUXPinは、ローンチ週にこう書いています。

「今週Claude Designを試したデザイナーからは、最初の数セッションのうちに、フォントの誤り、ボタンの色の間違い、余白の不統一が報告されました。」

どのコードベース構成から始めるか

デザインシステムがFigmaにあり、Code Connectのマッピング作業をする気があるなら、Figma MCPとコーディングエージェントを使いましょう。インポートされたコンポーネントと、スタイルだけ付け直したコピーとを分けるのは、まさにそのマッピングだからです。

エージェントが読み取り・編集できるオープンソースのデザインツールが欲しいなら、Penpot MCPを使いましょう。Penpot自体はセルフホストできますが、MCPのドキュメントはPenpotアカウントを通じたセットアップを説明しているので、頼りにする前に自分のインスタンスでその手順を確認してください。

チームがClaudeに課金していて、セットアップを最小限にしたいならClaude Designを使いましょう。ただし、それが作ったデザインシステムを信頼する前に1画面テストを実施してください。

オープンソースの選択肢を自分のサーバーで動かす

これらのツールのうち3つは、自分で管理するサーバーで動かせます。ベンダーのホスティングの代わりに自分でメンテナンスすることになり、bolt.diyとscreenshot-to-codeではクレジット制の課金の代わりに自分のモデルキーを使うことになります。2026年10月時点で、それぞれにトレードオフがあります。

bolt.diy:リポジトリのコミット履歴によると、このプロジェクトは2026年2月7日から10月4日までコミットがなく、最後のタグ付きリリースであるv1.0.0は2025年5月に出たものです。プロジェクトはMITライセンスですが、依存しているWebContainers API(生成されたコードを実行するブラウザ内ランタイム)は、営利目的の商用環境での本番利用にライセンスが必要です。

プロトタイプや概念実証には、そのライセンスは必要ありません。実際のところ、bolt.diyは自分のキーでプロトタイピングするには妥当な選択です。その上に製品を構築する前に、開発状況を改めて確認してください。

screenshot-to-code:自分で動かすには、OpenAI、Anthropic、Geminiのいずれかのモデルプロバイダーのキーが少なくとも1つ必要で、加えて自分で保守するサーバーも必要です。運用コストは生成ごとのモデル使用料で、設定したキーのプロバイダーから請求されます。

Penpot:PenpotはDocker Compose、またはKubernetes、OpenShift、Rancher上の公式Helmチャートでセルフホストできます。ドキュメントには、セルフホスト版のDockerイメージはSaaSのアップデートから少し遅れて公開されるとあるので、クラウドの新機能は遅れて自分のインスタンスに届きます。

どこで動かすかは、誰が使うかによります。bolt.diyやscreenshot-to-codeを1人で試すならノートPCで十分です。チームでPenpotのインスタンスを共有するようになったら、あるいはノートPCを閉じている間もツールにアクセスできる必要が出てきたら、サーバーが向いています。

bolt.diyには公式の最小要件がないので、同種の単一のNodeアプリなら、NVMeストレージ付きで4 GB RAMと2 vCPUあたりを出発点と考えてください。Penpotのヘルプセンターによると、4 CPUと16 GBのRAMがあれば十分で、数千人のユーザーをサポートでき、リソースの割り当ては控えめにしてよいとされています。小規模チームのインスタンスに加えて同じサーバーでコーディングエージェントも動かすなら、8〜12 GB RAMに近い構成から始めるのが妥当です。そのマシン上でエージェントをブラウザIDEでも動かすなら、Claude Code用のCode Serverのサイジングは別途計算が必要です。

セルフホストとは、サーバーを運用し、アップデートを適用し、モデルキーを安全に保管するのが自分の仕事になるということです。インストールの手順を省きたいなら、当社ではroot権限付きのLinux VPS上に、プロトタイピング環境を立ち上げるbolt.diyと、共有デザインワークスペース用のPenpotをワンクリックでデプロイできます。Claude CodeやOpenCodeなどのコーディングエージェントも、別のアプリとして同じ方法でデプロイできます。メンテナンスは引き続きあなたの担当ですが、セットアップは不要です。

よくある質問

Figma Makeとv0、どちらが良いですか?

出発点で決まります。Figma MakeはFigmaの中で動き、フレームとプロンプトを受け取って、フロントエンドのプロトタイプ用にHTML、CSS、JavaScriptを出力します。v0はプロンプトだけから始まり、Vercelにデプロイし、GitHubと同期します。デザインがFigmaにあるならMake、説明文から始めるならv0を選びましょう。

AIはスクリーンショットを動くコードに変換できますか?

はい。オープンソースのscreenshot-to-codeプロジェクトは、OpenAI、Anthropic、GeminiのAPIキーを使って、スクリーンショットをHTML、React、Vueのコードに変換します。ただし結果は静的な1フレームの再現であり、コンポーネントの識別情報、インタラクションの状態、レスポンシブのブレークポイントは含まれません。Figmaファイルがあるなら、そちらの方が良い入力になります。

v0、Bolt、Lovableのオープンソースの代替はありますか?

はい。bolt.diyはBolt.newのオープンソース版で、この記事で取り上げたプロンプトからアプリを作るツールの中でセルフホストできる選択肢です。MITライセンスで、Ollama経由のローカルモデルを含め、自分のモデルキーで動作します。コミットは2026年2月から10月まで止まっていて、依存するWebContainersは営利目的の本番利用に商用ライセンスが必要です。その上に製品を構築する前に、開発状況とライセンスの両方を確認してください。

AIが生成したコードがデザインシステムを無視するのはなぜですか?

多くのツールはデザインをピクセルや平坦化されたフレームとして捉え、そこから色、フォント、余白を近似します。Figma MCPのように変数やコンポーネント構造を直接読み取るツールは、Code Connectでコードにマッピングされていれば、実際のコンポーネントをインポートできます。マッピングがない場合、エージェントはスタイルをコンテキストとして使い、新しいコンポーネントを書きます。