Cedar & Salt screenshot to HTML
We wrote these prompts and ran each one once, identically, on Gemini 4 Hydrogen, Gemini 3.8 Flash, and Gemma 4 31B through the Gemini API free tier on 14 November 2026 (America/Denver). Hydrogen and 3.8 Flash used thinking_level=MEDIUM; Gemma 4 has no thinking level. We did not edit the models’ code. Playable frames show the raw HTML or SVG (Three.js CDN URLs were rewritten to a local copy so the iframe does not call the public internet). Dollar figures are equivalent paid-tier list prices — labelled “equivalent paid cost; ran on free tier.” A 429 or quota error stops that model for the rest of the batch; leftover tests wait until the free-tier quota resets at midnight Pacific. Free-tier prompts may be used by Google to improve products. This is not a benchmark: one run per prompt, our tasks, our settings.
The prompt (copyable)
Source image we designed (public on this site, original work).
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>.
Side-by-side playable results
Each frame is sandboxed (scripts allowed, no same-origin). External network is blocked by CSP, except our local Three.js copy where needed.
Gemini 4 Hydrogen
ran50.6s · 7,010 tokens · $0.0452 equiv. paid cost; ran on free tier
maxOutputTokens=24576 · thinking_level=MEDIUM
Closely matches the source layout, including a two-line headline, both buttons, the sesame-loaf graphic, the three product cards, and the footer “18 Harbor Street, Port Ellen · cedarandsalt.example”.
Gemini 3.8 Flash
errorThe API returned an error, including after one extra attempt. No output this session.
HTTP 503
No output this session. The Gemini 3.8 Flash API returned HTTP 503 (“high demand”) or dropped the connection. We tried once more after the first failure and did not retry in a loop. This was not a quota / 429 error.
Gemma 4 31B
ran2m 1s · 3,679 tokens · $0.0000 equiv. paid cost; ran on free tier
maxOutputTokens=24576 · thinking_level=n/a
Recreates the header, hero copy, both buttons, the sesame-loaf graphic, the three product cards with the same prices and blurbs, and the footer address. The main headline wraps onto three lines instead of two, and the footer line is centered rather than left-aligned.
Metrics
| Model | Status | Wall time | Input | Thinking | Output | Equiv. paid cost | Finish |
|---|---|---|---|---|---|---|---|
| Gemini 4 Hydrogen | ran | 50.6s | 1,225 | 2,621 | 3,164 | $0.0452 * | STOP |
| Gemini 3.8 Flash | error | — | — | — | — | — | — |
| Gemma 4 31B | ran | 2m 1s | 358 | 914 | 2,407 | $0.0000 * | STOP |
* Equivalent paid cost; ran on free tier. Hydrogen $1.50 / $7.50 per 1M; 3.8 Flash $0.75 / $3.75 per 1M through 31 Dec 2026; Gemma listed free ($0.00). Output price includes thinking tokens.
What we observed
- Gemini 4 Hydrogen: Closely matches the source layout, including a two-line headline, both buttons, the sesame-loaf graphic, the three product cards, and the footer “18 Harbor Street, Port Ellen · cedarandsalt.example”.
- Gemini 3.8 Flash: No output this session. The Gemini 3.8 Flash API returned HTTP 503 (“high demand”) or dropped the connection. We tried once more after the first failure and did not retry in a loop. This was not a quota / 429 error.
- Gemma 4 31B: Recreates the header, hero copy, both buttons, the sesame-loaf graphic, the three product cards with the same prices and blurbs, and the footer address. The main headline wraps onto three lines instead of two, and the footer line is centered rather than left-aligned.
Observed facts only; we did not score the models and we did not fix their code.