Claude Opus 5.5 on Build a 4-page bakery-cafe website (HTML/CSS)

AClaude Opus 5.5 · Claude Code 2.1.299 (headless -p) · cloud · 2026-10-14 · by @bobsiopener

Trust 80%Fully autonomoussuccess · first tryCompare

Estimated cost: $0.91
Wall time: 4m
Human step-ins: 0
Outcome: Pass

Compare with other models on this task →

Exact prompt

Build a complete static website for "Harbor & Pine", a family-run bakery-cafe in Portland, Maine. Output files in this directory: index.html, menu.html, about.html, contact.html, and styles.css (shared). Every page shares the same nav (links to all 4 pages) and footer (address: 41 Fore St, Portland, ME 04101; hours Tue-Sun 7am-3pm). index.html: hero, 3 signature items, testimonial section. menu.html: at least 3 categories (Breads, Pastries, Coffee) with at least 4 items each including prices. about.html: story and a team section with 3 people. contact.html: a form with name, email, message fields and an embedded-map placeholder. Responsive (mobile media query). No JS frameworks, no external images (use CSS or inline SVG). Do it in one pass.

Task prompt given to the agent (headless, offline, synthetic fixture inputs): Build a complete static website for "Harbor & Pine", a family-run bakery-cafe in Portland, Maine. Output files in this directory: index.html, menu.html, about.html, contact.html, and styles.css (shared). Every page shares the same nav (links to all 4 pages) and footer (address: 41 Fore St, Portland, ME 04101; hours Tue-Sun 7am-3pm). index.html: hero, 3 signature items, testimonial section. menu.html: at least 3 categories (Breads, Pastries, Coffee) with at least 4 items each including prices. about.html: story and a team section with 3 people. contact.html: a form with name, email, message fields and an embedded-map placeholder. Responsive (mobile media query). No JS frameworks, no external images (use CSS or inline SVG). Do it in one pass. Inspired by https://x.com/He1s_Sammy/status/2082864146010275884 (unverified; not checked with the author). This is an independent re-run on a reproducible synthetic task; it does not report or reproduce the original post's numbers. Cost shown is a list-price API-equivalent estimate (run on a Claude Pro subscription, not billed).

Success criteria: All automated rubric checks pass: index.html exists; menu.html exists; about.html exists; contact.html exists; styles.css exists and linked on all pages; nav links to all 4 pages on every page; footer address+hours on every page; menu has Breads/Pastries/Coffee with prices (>=12 prices); contact form name/email/message; mobile media query; no external images.

Setup notes: Cost is an ESTIMATE: Claude Code's list-price API-equivalent figure. The run used a Claude Pro subscription, so nothing was billed. input_tokens = all input incl. cache-creation and cache-read tokens; cached_tokens = cache reads (subset of input). Claude Code's cost bills cache writes at the 1h cache-write premium, so it can differ from a flat input-price recompute. Web disabled; tools Read/Write/Edit/Glob/Grep/Bash; single run; scored automatically (11/11 checks).

Estimated cost List-price estimate; not actually billed.

Metrics

Estimated cost: $0.91
Wall time: 4m
Human step-ins: 0
Turns: 8

Model usage
Model	Input tok	Output tok	Cost
AClaude Opus 5.5anthropic/claude-opus-5.5	264,458	29,367	$0.91

Reproduce this run

Use the use case prompt on the use case page.
Same setup: Claude Opus 5.5 (anthropic/claude-opus-5.5) via Claude Code 2.1.299 (headless -p), cloud.
It counts as a success only if it meets every success criterion: All automated rubric checks pass: index.html exists; menu.html exists; about.html exists; contact.html exists; styles.css exists and linked on all pages; nav links to all 4 pages on every page; footer address+hours on every page; menu has Breads/Pastries/Coffee with prices (>=12 prices); contact form name/email/message; mobile media query; no external images.
Log model, tokens, wall time, human step-ins and the evidence log, then submit it as a reproduction. A different model? Submit a head-to-head rerun.

How runs are scored: Methodology.

Was this useful?

⇄ Rerun on another model

Automated checks

Trust 80% comes from these checks (how Trust % works).

Run date is not in the future : passed
Model is in the dated pricing table : passed
Cost recomputed from tokens matches : passed
Cached tokens are consistent : passed
Output throughput is plausible : passed
Autonomy matches step-ins : passed
Step-ins do not exceed turns : passed
Retries agree with first-try result : passed
Evidence log SHA-256 matches : passed
Evidence log is substantial : passed

Evidence log

{
 "duration_api_ms": 230819,
 "stop_reason": "end_turn",
 "session_id": "[REDACTED]",
 "total_cost_usd": 0.9134094,
 "usage": {
  "input_tokens": 16,
  "cache_creation_input_tokens": 35015,
  "cache_read_input_tokens": 229427,
  "output_tokens": 29367,
  "output_tokens_details": {
   "thinking_tokens": 1011
  },
  "server_tool_use": {
   "web_search_requests": 0,
   "web_fetch_requests": 0
  },
  "service_tier": "standard",
  "cache_creation": {
   "ephemeral_1h_input_tokens": 35015,
   "ephemeral_5m_input_tokens": 0
  },
  "inference_geo": "global",
  "iterations": [
   {
    "input_tokens": 2,
    "output_tokens": 780,
    "cache_read_input_tokens": 46192,
    "cache_creation_input_tokens": 969,
    "cache_creation": {
     "ephemeral_5m_input_tokens": 0,
     "ephemeral_1h_input_tokens": 969
    },
    "type": "message"
   }
  ],
  "speed": "standard",
  "fallback_credit": null
 },
 "modelUsage": {
  "claude-opus-5-5": {
   "inputTokens": 16,
   "outputTokens": 29367,
   "cacheReadInputTokens": 229427,
   "cacheCreationInputTokens": 35015,
   "webSearchRequests": 0,
   "costUSD": 0.9134094,
   "contextWindow": 1000000,
   "maxOutputTokens": 128000,
   "thinkingTokens": 1011,
   "canonicalModel": "claude-opus-5-5",
   "provider": "firstParty",
   "costBasis": "list"
  }
 },
 "permission_denials": [],
 "terminal_reason": "completed",
 "fast_mode_state": "off",
 "fast_mode_disabled_reason": "sdk_opt_in_required",
 "subagent_stats": {
  "spawned": 0,
  "requested": {
   "background": 0,
   "foreground": 0,
   "unset": 0
  },
  "started_in_background": 0,
  "max_depth": 0,
  "spawned_by_subagents": 0,
  "completed": 0,
  "failed": 0,
  "killed": {
   "parent": 0,
   "user": 0,
   "system": 0
  },
  "refused": {
   "depth_limit": 0,
   "concurrency_limit": 0,
   "budget": 0
  },
  "by_type": {}
 },
 "safety_stops": 0,
 "is_error": false,
 "num_turns": 8,
 "subtype": "success",
 "api_error_status": null,
 "result": "I've built all five files in `./usecase-runner/runs/14-opus/work/`. My checks were limited: every tag closes properly on all four pages, and there are no external URLs. I haven't opened the pages in a browser, so how they look on desktop or mobile isn't confirmed.\n\n**Shared across all pages**\n- The same header nav (Home, Menu, About, Contact), with the current page highlighted.\n- The same footer with **41 Fore St, Portland, ME 04101** and **Tue\u2013Sun 7am\u20133pm**, plus repeat links to all four pages.\n- An inline SVG logo (a pine tree over harbor waves).\n- No JavaScript, no frameworks and no external images. All artwork is CSS gradients or inline SVG.\n\n**Pages**\n- **`index.html`**: a hero with a drawn loaf and coffee cup, three signature items (Casco Bay Sourdough $9, Wild Blueberry Morning Bun $5.50, Maple Sea-Salt Latte $6), and three customer reviews.\n- **`menu.html`**: Breads, Pastries and Coffee with 6 priced items each, buttons that jump to each category, and the three signature items tagged.\n- **`about.html`**: the family's story with a drawn storefront, a short timeline of milestones, and a team section with three people (Ruth, Sam and Lena), each with a drawn portrait.\n- **`contact.html`**: a form with required name, email and message fields, a drawn placeholder map with a pin on Fore St, and an info panel with address, hours, email and parking.\n\n**Responsive layout:** at 960px wide, the three-column sections drop to two columns. At 720px, everything goes to a single column, the nav wraps and centers, and the hero stacks.\n\n**Before going live**\n- **The form can't send messages by itself.** It opens the visitor's email app addressed to `[REDACTED:email]`, which is an address I made up. Replace it with the real one, or connect the form to a service like Formspree.\n- **Most of the content is invented.** That includes the team names and bios, the story and dates, the reviews, the menu prices and the parking details. All of it needs replacing with real information.\n- **Check the tax note.** The bottom of the menu says \"Prices include tax\"; confirm that's true or remove it.",
 "ttft_ms": 2102,
 "type": "result",
 "duration_ms": 231354,
 "uuid": "[REDACTED]",
 "ttft_stream_ms": 1003,
 "time_to_request_ms": 294,
 "first_content_frame_ms": 1003,
 "queued_turn_count": 0,
 "result_index": 0
}