Image to HTML / CASE 01 / 2026-08-16
同一张参考图，两个 Agent Harness 能做出什么？
让 Gemini 3.7 Flash 在 Pi Harness 与 DeepSeek Harness 中，使用同一张参考图和相同任务生成可交互的拉面点餐网页。
- Model
- Gemini 3.7 Flash
- Input
- 同一张参考图
- Prompt
- 相同
- Variable
- Agent Harness
EXPERIMENT SETUP / 01
共同任务
基于同一张拉面订餐参考设计和相同 Prompt，生成一个响应式、可交互的订餐网页。两次运行只更换 Agent Harness，模型与输入保持一致。
Prompt 记录说明
素材包记录了两组使用相同 Prompt，但没有单独保存可公开展示的逐字 Prompt，因此本页不补写或猜测原文。
RESULTS / 02
两次运行，两个完整产品
点击结果会在新窗口打开未经站点外壳包裹的完整 HTML，可以直接操作搜索、定制、购物车与结账流程。
COMPARISON / 03
时间、成本与结果
评分来自对实际交互、响应式表现、视觉还原、信息架构和工程完成度的综合检查。
| Harness | Model | 耗时 | 成本 | 得分 | 结论 |
|---|---|---|---|---|---|
| Pi Harness | Gemini 3.7 Flash | 22 min | $0.38 | 73/100 | 继续迭代主分支 |
| DeepSeek Harness | Gemini 3.7 Flash | 28 min | $1.18 | 70/100 | 吸收部分能力 |
VERDICT / 04
Pi Harness 胜出，但两组都还不是正式成品
Pi Harness 版本以 73 分胜出，信息架构、搜索筛选、商品定制和结账摘要更接近可产品化方向；DeepSeek Harness 版本在移动端导航、下单跟踪和状态反馈方面更完整。
- 01
两组都完成了搜索、筛选、商品定制、购物车和模拟结账，已经达到可交互高保真原型水平。
- 02
两组都把参考 UI 截图片段当成了菜品素材，出现明显的“网页里嵌网页”，这是共同的 P0 问题。
- 03
两组都把五个独立任务页面改造成深色长单页，与参考设计的信息架构和视觉方向存在明显偏差。
- 04
若继续迭代，应以 Pi Harness 版本为主分支，并吸收 DeepSeek Harness 版本的移动端抽屉和持续订单跟踪能力。
KEEP EXPLORING