バイブコーディングでWebデザイン勝負! どのAIエージェントが一番「刺さる」モックアップを作れるか

AIによるコーディングエージェント(AIエージェント)のおかげで、ちょっとしたツールなら誰でも簡単に作れるようになりました。スマホやパソコンを使っているなかで、かゆいところに手が届かないな、と思ったときに文章でお願いすれば、プログラミングコードにほとんど触れることなく自分の望むものが手に入ります。

ただ、そうした自分専用のツールは「とりあえず動くこと」重視で、デザインには特にこだわっていないという人が多いのではないでしょうか。どんなに単純なツールでも、見た目がきれいな方が使うときのテンションも上がるはず。それに、もし他の人にも使ってもらうのなら「デザインの良さ」や「使いやすさ」は機能以上に大事な要素だったりもします。

であるならば、コーディング能力とは別に、AIエージェントがデザイン能力をどれだけもっているのかも知っておきたいところ。というわけで、いくつかのAIエージェントに同じ指示を出してみて、どれが最も「刺さる」デザインを作ってくれるのか、確かめてみることにしました。

使用したAIエージェントと与えたプロンプト

今回比較に用いるAIエージェント(AIモデル)は下記の4つとしました。

• Anthropic Claude Code(Opus 4.5)
• Google Antigravity(Gemini 3 Pro High)
• Cline(OpenAI GPT-5.2-Codex)
• Figma Make

Claude CodeとAntigravityはデスクトップアプリを利用し、GPT-5.2-Codexはテキストエディタ「Visual Studio Code」の拡張機能「Cline」からAPI経由で使う形にしました。

最後の「Figma Make」は、Webサイトやアプリ、UI要素などを作成するためのデザインプラットフォームとして知られる「Figma」に含まれるツールの1つです。デザイン作業に特化しており、テキストや画像などで指示を出すことで静的・動的なプロトタイプを作成してくれます。

Claude Code(デスクトップアプリ)

Antigravity(デスクトップアプリ)

Cline(Visual Studio Codeの拡張機能)

Figma Make

これら4つのAIエージェントに作成してもらうのは、筆者が日常業務ですでに使っている「音声ファイルから文字起こしするWebアプリ」のUIです。もともとは自力で作り、その後AIエージェントの力を借りて機能を追加してきたものですが、このUIをゼロから考えてもらいます。

既存のコードを参考にしてもらうとイメージが固定されてしまいそうなので、いったん現状のコードを元にOpenAI Codexに要件定義書(OkoshiKunWeb_requirements.md)を作成させました。この要件定義書のみを資料として、あえてデザインの方向性は示さずに、下記プロンプトを各AIエージェントに投げます。

既存の「音声ファイルから文字起こしするWebアプリ」のUI

OpenAI Codexに作成してもらった要件定義書(の一部)

【プロンプト】

OkoshiKunWeb_requirements.md の内容をもとに、このWebツールを実現するのに十分な要素をもつUIデザインを検討します。
下記に挙げる項目を考慮に入れ、見た目をひと通り確認できるモックアップを作成してください。
- OkoshiKunWeb_requirements.md に書かれている情報以外は一切参考にしないこと
- 比較検討できるように、テイストやコンセプトの異なる3パターンのデザインを作成する
- 実際の文字起こし処理などは実装する必要はない。ガワのみ
- 使用するUI用のライブラリ・フレームワークは問わない
- デザインの方向性に合わせて生成した画像を使用してもよい
- メインとテストの2つあるページは、2ページ構成のままでも、1ページにまとめてもかまわない
- なぜそのUI、デザインにしたのか、理由や根拠をmdファイルに出力すること
- モックアップに必要なファイルは mockup/ に出力すること
質問は受け付けません。
あなたのセンスと想像力で最高のデザインモックアップを提案してください。

ちなみに、Figma Makeは要件定義書のMarkdown(md)ファイルを参照する機能はないため、要件定義書の内容を上記プロンプトの末尾に貼り付け、それを確認するように指示しました。

他のAIエージェントは現在開いている(もしくは指定した)フォルダ内で作業するので、その中にある要件定義書ファイルの名前だけ教えればきちんと認識してくれます。

完成した4ツール×3パターンのデザインを比較しよう

では、さっそくどんなデザインができあがったのか見てみましょう。各AIエージェントに3つずつバリエーションを出してもらいましたので、それらのスクリーンショットを並べてみたいと思います(縦に長いページは省略していることがあります)。

Anthropic Claude Code(Opus 4.5)

Google Antigravity(Gemini 3 Pro High)

Cline(OpenAI GPT-5.2-Codex)

Figma Make

それぞれに3パターンずつ提示してもらったわけですが、ぱっと見では1つ1つ色合いが異なることもあってバリエーション豊かなデザインが揃っているように思うかもしれません。しかし、よくよく見てみるとそうではないことがわかります。

Claude CodeとCline、それとFigma Makeが作成したものは、細部のパーツや色合いが変わっているだけで、レイアウトにはほとんど変化がありません。「ベースを1つ用意してテーマカラーの異なる派生版を作った」みたいな印象で、どれを選んでも同じ、と感じてしまいます。

もちろん、それぞれにAIエージェントなりの性格みたいなものが出ている雰囲気はあります。Claude Codeは情報量多めで、上級者向けというか、作った本人だけが使うのであれば合理的なデザインに思えます。

Clineもそれと似た方向性ですが、実は作業の速さは群を抜いています。他のAIエージェントがモックアップ作成に7～10分かかっていたのに対し、わずか3分で完了していました。これはClineのチューニング、もしくはAPI経由であることが要因かもしれません。

Figma Makeは他よりもシンプルで、とにかく使いやすさを意識したような作り。パターンの変化こそ少なめですが、一番実用性の高いUIに思えます。画面右上に見えるポップアップのようなものは、3パターンのデザインをボタンクリックで切り替えて確認できる機能を自発的に追加してくれたもので、このような実務作業まで考慮したコーディングの仕方はデザイン特化型ツールの良さと言えるでしょう。

Figma Makeはプレビュー画面右上にデザインパターンを簡単に切り替えられるボタンを追加してくれた

一方で、(あくまでも筆者の個人的な感覚として)頭1つ抜きん出ているのがAntigravityです。オーソドックスに使えるパターン、システムコンソールを思わせるダークテーマのパターン、親しみやすい見た目で直感的に使えるパターンと、しっかりバリエーションを作り込んでいます。

自分だけが使うのであれば、オーソドックスに使えるパターン1になりそうですが、見た目の面白さでパターン2も捨てがたい。しかし、このツールを他の人にも使ってもらうものにするなら、親しみやすいパターン3を選ぶかもしれません。

余談ですが、筆者はかつてクライアント企業のWebサイトディレクションの仕事をしていたこともあります。その時の経験も踏まえると、このようにまるっきり方向性の異なるデザイン案を(デザイナーが)作ることは大変重要なことでした。

似たり寄ったりなデザイン案しかないと、どれも同じに見えてクライアントは選びにくくなりますが、明確に違いのあるデザインになっていれば1つに絞ってもらいやすくなります。クライアントに提案する側としては「本命のパターンに誘導しやすい」メリットもあります。

その意味でも、Antigravityが出してきたものは個人的に「刺さる」ものでした。とはいえ現実的には、普段から使うツールであることを考えて、結局のところ一番実用性の高そうなFigma Makeの案を無難に採用してしまう気もします。

プロンプトを工夫すると「よりよいデザイン」になる？

ところで、Claude CodeやClineについて言えば、プロンプトにも問題があった可能性があります。なぜなら、プログラムのコーディングエージェントとして設計されたツールのため、ツール側のシステムプロンプトなどで「エンジニア」のような役割が与えられているとも考えられるからです(Antigravityもそうかもしれないので不思議ではありますが)。

そこで、この2つのAIエージェントについては、OpenAIのプロンプトエンジニアリングのガイドにある程度沿った形でプロンプトを調整し、もう一度モックアップを作成してもらうことにしました。そのプロンプトは下記にある通りですが、ポイントは「役割」を「UI/UXデザイナー」として明確に定義したことです。それ以外の「命令」や「出力形式」に当たる項目については、先ほどのものから全く手を入れていません。

Prompt engineering | OpenAI API
https://platform.openai.com/docs/guides/prompt-engineering

【調整後のプロンプト】

# 役割
あなたはクリエイティブなUI/UXデザイナーです。

# 文脈・背景
音声ファイルから文字起こしするためのWebツールを開発しようとしています。

# 命令
OkoshiKunWeb_requirements.md の内容をもとに、このWebツールを実現するのに十分な要素をもつUIデザインを検討します。
下記に挙げる項目を考慮に入れ、見た目をひと通り確認できるモックアップを作成してください。
- OkoshiKunWeb_requirements.md に書かれている情報以外は一切参考にしないこと
- 比較検討できるように、テイストやコンセプトの異なる3パターンのデザインを作成する
- 実際の文字起こし処理などは実装する必要はない。ガワのみ
- 使用するUI用のライブラリ・フレームワークは問わない
- デザインの方向性に合わせて生成した画像を使用してもよい
- メインとテストの2つあるページは、2ページ構成のままでも、1ページにまとめてもかまわない

質問は受け付けません。
あなたのセンスと想像力で最高のデザインモックアップを提案してください。

# 出力形式
- モックアップに必要なファイルは mockup/ に出力すること
- なぜそのUI、デザインにしたのか、理由や根拠をmdファイルに出力すること

プロンプトの体裁を少し変えただけですが、これだけで違いが出てくるものなのでしょうか。さっそく作り始めてもらいます。なお、いずれも先ほどの作業時のやりとりや出力ファイルは全て削除(参照できない別フォルダに移動)し、Claude Codeのデスクトップアプリでは設定で「メモリー」機能をオフにして、作業履歴などからの影響がないようにしています。

Anthropic Claude Code(Opus 4.5)

Cline(OpenAI GPT-5.2-Codex)

結果は明らかに改善しています。先ほどは変わり映えのしないレイアウトパターンしかなかったのに対し、1つ1つ違うデザイナーが担当したのではないかと思えるほど変化に富んでいます。これならちゃんと「選べる」のではないでしょうか。

これらの中から筆者が採用するとすれば、Claude Codeのパターン2でしょうか。本人だけで使うのも、誰かに使ってもらうのにも、ちょうどいいバランスのように思います。AntigravityやFigma Makeが出してきた先ほどのものと甲乙つけがたい感じです。

AIエージェントは使い方次第で実力を引き出せる

以上の比較は、筆者の自作ツールを題材にした一例に過ぎません。作ろうとしているものがどういう要件をもつものなのか、Webサイトなのかアプリなのか、といった違いによっても、AIエージェントごとに得意・不得意が出てくる可能性があります。

今回はAntigravityの汎用性の高さが際立つ結果にはなったものの、プロンプトをしっかり作り込めば、他のAIエージェントもそれと同等の能力を発揮できることも分かりました。

また、Figma Makeのようにユーザーが指示しなくても作業効率を高められる機能を追加してくれるツールは、現場レベルでは非常に重宝されるに違いありません。こうしたツールごとの違いを頭に入れつつ、見た目にもこだわったWeb・アプリづくりをみなさんも楽しんでみてください。