Cedar & Salt 截图转 HTML
这些提示词由本站撰写,于 2026年11月14日(America/Denver)在 Gemini API 免费档上,对 Gemini 4 Hydrogen、Gemini 3.8 Flash 和 Gemma 4 31B 各跑一次,设置相同。Hydrogen 与 3.8 Flash 使用 thinking_level=MEDIUM;Gemma 4 没有思考等级。我们没有改模型写出的代码。可玩窗口展示的是原始 HTML 或 SVG(Three.js 的 CDN 地址被改到本站本地副本,避免 iframe 访问外网)。美元数字是按官方付费档标价折算的,并标明“折算付费费用;实际跑在免费档”。遇到 429 或额度错误就停止该模型、不再重试;剩下的题会等免费档额度在太平洋时间午夜重置后再跑。免费档提示词可能被 Google 用来改进产品。这不是基准测试:每题只跑一轮,任务和设置都是我们自己的。
提示词(可复制)

本站自己画的源图(原创,发布在本站)。
The attached image is an original landing-page screenshot that we designed, named Cedar & Salt, a fictional neighborhood bakery. Recreate it as a single self-contained HTML file that matches the layout, colors, type hierarchy, and wording as closely as you can. Do not load external images, fonts, or frameworks. HTML and CSS only, plus optional vanilla JavaScript so the Order for pickup button shows a short thank-you note. Return only the HTML document, starting with <!DOCTYPE html>.
并排可玩结果
每个窗口都在沙箱里(允许脚本,不同源)。CSP 会拦截外网请求;需要 Three.js 时改用本站本地副本。
Gemini 4 Hydrogen
已跑完50.6s · 7,010 tokens · $0.0452 折算付费费用;实际跑在免费档
maxOutputTokens=24576 · thinking_level=MEDIUM
和源图布局很接近,包括两行主标题、两个按钮、芝麻面包图形、三张产品卡片,以及页脚 “18 Harbor Street, Port Ellen · cedarandsalt.example”。
Gemini 3.8 Flash
出错接口返回错误,含加试一次后仍无结果。本次没有得到输出。
HTTP 503
本次没有得到输出。Gemini 3.8 Flash 接口返回 HTTP 503(“需求高峰”)或中途断开。第一次失败后我们只加试了一次,没有循环重试。这不是 429 / 额度用尽。
Gemma 4 31B
已跑完2m 1s · 3,679 tokens · $0.0000 折算付费费用;实际跑在免费档
maxOutputTokens=24576 · thinking_level=无
复现了页头、主标题文案、两个按钮、芝麻面包图形、三张价格和说明都相同的产品卡片,以及页脚地址。主标题折成了三行而不是两行,页脚文字居中而不是靠左。
数据
| 模型 | 状态 | 耗时 | 输入 | 思考 | 输出 | 折算付费费用 | 结束原因 |
|---|---|---|---|---|---|---|---|
| Gemini 4 Hydrogen | 已跑完 | 50.6s | 1,225 | 2,621 | 3,164 | $0.0452 * | STOP |
| Gemini 3.8 Flash | 出错 | — | — | — | — | — | — |
| Gemma 4 31B | 已跑完 | 2m 1s | 358 | 914 | 2,407 | $0.0000 * | STOP |
* 折算付费费用;实际跑在免费档。Hydrogen 每百万 token 1.50 / 7.50 美元;3.8 Flash 至 2026年12月31日为 0.75 / 3.75 美元;Gemma 标为免费(0.00 美元)。输出单价含思考 token。
我们看到的情况
- Gemini 4 Hydrogen: 和源图布局很接近,包括两行主标题、两个按钮、芝麻面包图形、三张产品卡片,以及页脚 “18 Harbor Street, Port Ellen · cedarandsalt.example”。
- Gemini 3.8 Flash: 本次没有得到输出。Gemini 3.8 Flash 接口返回 HTTP 503(“需求高峰”)或中途断开。第一次失败后我们只加试了一次,没有循环重试。这不是 429 / 额度用尽。
- Gemma 4 31B: 复现了页头、主标题文案、两个按钮、芝麻面包图形、三张价格和说明都相同的产品卡片,以及页脚地址。主标题折成了三行而不是两行,页脚文字居中而不是靠左。
只记录观察到的事实;我们没有给模型打分,也没有改它们的代码。
