Image to HTML / CASE 01 / 2026-08-16
同じ参考画像から、2 つの Agent Harness は何を作れるか？
Gemini 3.7 Flash を Pi Harness と DeepSeek Harness で動かし、同じ参考画像と同じタスクから、操作できるラーメン注文ページを生成させました。
- Model
- Gemini 3.7 Flash
- Input
- 同じ参考画像
- Prompt
- 同一
- Variable
- Agent Harness
EXPERIMENT SETUP / 01
共通タスク
同じラーメン注文の参考デザインと同じ Prompt をもとに、レスポンシブで操作できる注文ページを生成します。2 回の実行で変えたのは Agent Harness だけで、モデルと入力は同じです。
素材一式には 2 つの実行が同じ Prompt を使ったことが記録されていますが、公開できる形で Prompt の原文そのものは別途保存されていません。そのため、このページでは原文を書き足したり推測したりしていません。
RESULTS / 02
2 回の実行、2 つの完成したプロダクト
結果をクリックすると、サイトの外枠なしの完全な HTML が新しいウィンドウで開き、検索、カスタマイズ、カート、決済フローをそのまま操作できます。
RecommendedRUN 01 / Pi Harness
YAMATO RAMEN
- Time
- 22 分
- Cost
- $0.38
- Score
- 73/100
強み情報設計、絞り込み、カスタマイズの深さ、全体のブランド感がより成熟している。
課題モバイルのヘッダーが窮屈で、決済フォームとデフォルトのチップはまだ修正が必要。
RUN 02 / DeepSeek Harness
RAMENYA
- Time
- 28 分
- Cost
- $1.18
- Score
- 70/100
強み購入までの一連の流れ、モバイルのドロワー、注文の追跡、状態のフィードバックがより充実している。
課題ビジュアルの方向性が参考から外れ、ページが長すぎ、商品素材の問題もより目立つ。
COMPARISON / 03
所要時間、コスト、結果
スコアは、実際のインタラクション、レスポンシブの挙動、ビジュアルの再現度、情報設計、エンジニアリングの完成度を総合的に確認した結果です。
| Harness | Model | 所要時間 | コスト | スコア | 結論 |
|---|---|---|---|---|---|
| Pi Harness | Gemini 3.7 Flash | 22 分 | $0.38 | 73/100 | メインブランチとして改善を続ける |
| DeepSeek Harness | Gemini 3.7 Flash | 28 分 | $1.18 | 70/100 | 一部の機能を取り入れる |
VERDICT / 04
Pi Harness の勝ち。ただしどちらもまだ正式な完成品ではない
Pi Harness 版が 73 点で上回りました。情報設計、検索と絞り込み、商品のカスタマイズ、決済サマリーが、プロダクト化できる方向により近いです。DeepSeek Harness 版は、モバイルのナビゲーション、注文の追跡、状態のフィードバックがより充実しています。
- 01
どちらも検索、絞り込み、商品のカスタマイズ、カート、模擬決済を実装しており、操作できる高忠実度プロトタイプの水準に達しています。
- 02
どちらも参考 UI のスクリーンショットの一部を料理の素材として使ってしまい、「Web ページの中に Web ページ」がはっきり現れました。これは共通の P0 の問題です。
- 03
どちらも 5 つの独立したタスクページを暗い色の長い 1 ページに作り替えており、参考デザインの情報設計とビジュアルの方向性から明らかにずれています。
- 04
改善を続けるなら、Pi Harness 版をメインブランチとし、DeepSeek Harness 版のモバイルドロワーと継続的な注文追跡を取り入れるのがよいでしょう。
KEEP EXPLORING