AIプログラミングツールのクロスレビュー：誰が本当に忠実度の高いプロトタイピングを行うのか？

AIプログラミングは、現在のAIの波の中で最も混雑しているトラックのひとつとなっている。以下より CursorそしてWindsurf まで v0 ヴェルセルによって、数多くのプログラミング・エージェントが誕生した。その背景には Anthropic ClaudeそしてOpenAI GPTそしてGoogle Gemini のようなビッグモデルのコード生成能力が飛躍的に向上した。

しかし、2025年6月現在、これらのAIプログラミングツールの本当の実力はどうなのか？機種間のコード生成品質の差はどの程度あるのか？このレビューでは、直感的で有益な観察を提供するために、統一された実際の開発要件を通じて、市場で主流のAIプログラミング製品とその統合モデルを並べて比較する。

ベンチマーク：「My MBTI Circle of Friends」というアプリ。

これらのツールの組み合わせ能力を効果的にテストするために、私たちは中程度の複雑さのタスクを設計しました：「My MBTI AI Circle of Friends」というアプリケーションの忠実度の高い設計プロトタイプを生成することです。

このアプリの核となるコンセプトは、ユーザーに感情的な伴侶を提供することだ。ユーザーはカードを使って、日記を書くようにタイムライン上に人生の瞬間を記録することができ、システムに組み込まれたMBTIの異なる性格を持つ一連のAI友達が、それぞれの「ペルソナ」に従ってユーザーの投稿に反応する。このタスクは、機能的なロジックに対するAIの理解をテストするだけでなく、UIデザイン、コード構造、フロントエンド・エンジニアリング能力に対する明確な要件を提示するものでもある。

今回のレビューで使用したコアプロンプトはこちら：

我想开发一款名为“我的MBTI AI朋友圈”的中文情感陪伴 App，功能需求如下：
1.  **核心功能**：用户可以通过卡片+时间线的交互方式，记录想法、计划、待办事项、情绪、链接等生活点滴。本质上，它首先是一款 AI 日记软件。
2.  **AI 交互**：系统预设了一系列不同 MBTI 性格的 AI Agent。这些 Agent 会根据各自的性格特点，对用户的记录做出不同的回应。
3.  **社交关系**：用户可以选择并关注不同的 AI Agent。
4.  **分享功能**：用户可以分享自己的记录以及 AI Agent 的回应。
5.  **核心价值**：通过 AI 的回应和分享功能，为用户提供情感陪伴。
现在，需要输出该 App 的高保真原型图。请通过以下方式完成所有界面的原型设计，并确保这些原型可以直接用于前端开发：
1.  **用户体验分析**：分析 App 的主要功能和用户需求，确定核心交互逻辑。
2.  **产品界面规划**：作为产品经理，定义关键界面，确保信息架构合理。
3.  **高保真 UI 设计**：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4.  **HTML 原型实现**：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件库）让界面更加精美。代码文件需要拆分，保持结构清晰。
5.  **文件结构要求**：
-   每个界面作为一个独立的 HTML 文件存放，例如 `home.html`、`profile.html`、`settings.html`。
-   `index.html` 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 `iframe` 的方式嵌入其他 HTML 页面，并将所有页面在 `index` 页面中平铺展示，而非通过链接跳转。
6.  **真实感增强**：
-   界面尺寸模拟 iPhone 15 Pro，并进行圆角化处理。
-   使用真实的 UI 图片（可从 Unsplash、Pexels 等图库选取），而非占位符。
-   添加模拟 iOS 顶部状态栏和底部 TabBar 导航栏。
请按照以上要求，在 `design-trae-DeepSeekR1` 文件夹中生成完整的 HTML 代码。

このプロンプトの課題は、AIが単なるコード生成者ではなく、プロダクトマネージャー、UI/UXデザイナー、フロントエンドエンジニアの役割を果たす必要があることだ。これは特に iframe タイル化されたプレゼンテーションと個別のファイル構造が要求されるのは、プロジェクト・レベルでコードを整理するAIの能力が直接試されるからだ。

ラウンド1：ネイティブIDE統合ツールレビュー

私たちはまず、ローカルIDEに統合されたAIプログラミング・プラグインについて調べた。 Cursor 歌で応える Trae はこの種のツールの代表である。このようなツールの利点は、開発者の既存のワークフローに深く統合されていることだ。

カーソル

カーソル＋クロード3.5ソネット

• スコア：60
• 評価：適格なラフハウジング

Cursor とともに Claude 3.5 Sonnet この2つの組み合わせは、基本的にタスクを完了させるものだった。UI面では、インターフェイスの骨格は完成しているが、アイコンがウェブから必要なだけ読み込めず、全体的なスタイルも地味だ。欠点はあるが、プロトタイプの最初のバージョンとしては合格ラインを満たしている。

カーソル＋クロード4ソネット

• スコア：90
• 評価：仕上げでお届け

素晴らしい組み合わせだ。Claude 4 Sonnet このプロジェクトの性能は予想をはるかに超えており、機能実装は極めて正確で、「作成」ページでも、投稿タイプやムード選択などのインタラクティブ要素を丁寧に追加しています。UIデザインは美しく、素材の充填も整っており、視覚効果は抜群です。UIデザインも美しく、素材もしっかり充填され、視覚効果も抜群。 完成度が非常に高いので、ほとんどそのままフロントエンドに納品して、その後の開発につなげることができる。

カーソル + ジェミニ 2.5 プロ

• スコア：59
• 評価：致命的な欠点のある短いセット

Gemini 2.5 Pro プロンプトのパフォーマンスは、それほど良いとは言えない。基本的な機能とUI要素は問題なかったが、プロンプトが明示的に求めていた「直接タイル表示」効果を達成できず、代わりに手動でクリックしないと切り替えられないページが生成された。これはプロトタイプの使い勝手に重大な影響を与える機能上の欠陥であり、失敗の原因となった。

カーソル＋GPT-4o

• スコア：70
• 爽やかにシンプルに はコメントを受け付けていません。

GPT-4o (sic o3)の出力は機能的に要求通り正確で、インターフェイスは完全で、アイコンは正しく表示される。そのデザインスタイルはさわやかでミニマリスト的であり、全体的な効果は(sic o3)よりも優れている。 Claude 3.5 Sonnetこれは、短いセットとしては良質なプロトタイプと言えるだろう。

トレー

トレイ＋クロード 3.5 ソネット

• スコア：80
• 絶妙なシンプルさ はコメントを受け付けていません。

興味深いことに、同じ Claude 3.5 Sonnet モデルでは Trae プラットフォームでのパフォーマンスは Cursor UIはより美しく、素材に富んでいる。に比べるとデザインはやや見劣りするものの、すべてを正確にこなすだけでなく、UIははるかに美しく、素材に富んでいる。 Claude 4 Sonnet バージョンだが、すでに質の高いデリバリーだ。

トレイ＋クロード 3.7 ソネット

• スコア：59
• 評価：同じ重大な欠陥

意外なことに、更新された Claude 3.7 Sonnet バージョンのパフォーマンスはむしろ後退している。バージョン Gemini 2.5 Pro 同じミスを犯したが、それは気づかなかった。 iframe フラットなディスプレイというのも致命的な欠点だ。美しいUIデザインとは裏腹に、核となる要件が満たされていないため、以下のような用途にしか使えない。 Gemini 本のバージョンと並置されている。

トレイ＋クロード 4 ソネット

• スコア：90
• 評：今回も仕上がりは上々。

Trae とともに Claude 4 Sonnet このモデルの組み合わせがまた決定的であることが証明された。その出力は Cursor このプラットフォームのバージョンも素晴らしく、充実した機能、美しいUI、そして作成機能に添付ファイルのアップロード詳細まで追加されている。改めて、これは Claude 4 Sonnet そのような仕事においてリーダーシップを発揮する。

トレ＋ジェミニ2.5プロ

• スコア：50
• 評：大雑把で欠陥のあるグロス

Gemini 2.5 Pro ある Trae でのパフォーマンスよりもさらに優れている。 Cursor トップは最悪だ。タイル表示に失敗するという核心的な欠陥に加え、インターフェイスはアイコンの欠落に苦しみ、全体的なスタイルも非常に渋い。

トレ＋ディープシークR1

• スコア：40
• 評価：放棄されたラフ

DeepSeek R1 パフォーマンスはローカルIDEグループの中で最悪だ。タイルに失敗するだけでなく、基本的なページ切り替えでさえバグがあり、Tabをクリックした後にエラーページが表示される。機能もUIも不完全で、プロトタイプは基本的に使い物にならなかった。

第2ラウンド：クラウド型AIプログラミング・プラットフォームのレビュー

次はクラウドベースの製品だ。これらはローカルにインストールすることなく、ブラウザ上で直接動作するツールであり、もうひとつのAIプログラミング・パラダイムである。

リプリット

• スコア：50
• 評：シンプルさが欠点

ベテランのクラウドIDE Replit (モデル不明）はこのテストでは平凡だった。また、タイル表示という核心的な要件も満たしていない。インターフェイスの基本的な枠組みやアイコンは継承されているものの、全体的なデザインは初歩的で、主流のAIツールの世代クオリティとは明らかな隔たりがある。

愛すべき

• スコア：95
• レビュー：見事なオーダーメイド仕上げ

Lovable その結果は目を見張るもので、今回のレビューで最大のダークホースとなった。を含むプロンプトのすべての要件を完璧に実装している。 iframe タイル表示。機能的には、基本的な機能がすべて実装されているだけでなく、作成ページでプライバシー設定などの高度なオプションも追加されている。 Claude 4 Sonnet バージョンである。これは、フロントエンドのプロトタイプ生成のような特定のタスクに深く最適化されたAI製品が、汎用モデルを凌駕できることを示している。

v0

ヴェルセルから発売 v0 はフロントエンドのコンポーネント生成に特化したツールである。その v0-1.5-md 歌で応える v0-1.5-lg 2つのモデル。

v0 + v0-1.5-md

• スコア：55
• 評価：欠陥のあるラフ

v0-1.5-md このモデルのパフォーマンスは平均的だ。また、タイル表示も実現できておらず、インターフェースのアイコンも欠けている。デザインはミニマルだが、機能的な欠陥とコンテンツ不足がプロトタイプとしての価値を下げている。

v0 + v0-1.5-lg

• スコア：65
• 評価：適格なラフハウジング

パラメトリック v0-1.5-lg モデルのパフォーマンスが向上した。UIインターフェイスは完成しているが、アイコンはまだ手動で入力する必要がある。全体的な効果は Cursor + Claude 3.5 Sonnet この組み合わせは、さらなる改修を待つ、有能な初版プロトタイプに匹敵する。

ボルト・ニュー

• スコア：40
• 評価：放棄されたラフ

Bolt.new パフォーマンス指標 DeepSeek R1 これもひどい。タイル状の表現に失敗しているだけでなく、その結果、UI要素はひどいレイアウトの崩れとコンテンツの欠落に悩まされ、基本的に使い物にならない。

レビュー・スコアカード

このレビューは1つのユースケースに基づくものであり、結果はややランダムであるが、AIプログラミング・ツール市場の現在の状況を明らかにするものである。

フロントエンドプロトタイピングのようなタスクでは、モデルの選択が最終的なアウトプットの質を決定する上で中心的な役割を果たす。Claude 4 Sonnet は驚くべきコンビネーションを発揮した。 Lovable このような業種は、深い最適化によって最高の体験を提供する。