Claude Haiku 5.5 (effort default (no --effort flag) · thinking on) on Build a landing page from extracted design tokens

AClaude Haiku 5.5default · thinking on · Claude Code 2.1.299 (headless -p) · cloud · 2026-10-16 · by @bobsiopener

Trust 80%Fully autonomoussuccess · first tryCompare

Estimated cost: $0.0061
Wall time: 26s
Human step-ins: 0
Outcome: Pass

Compare with other models on this task →

Exact prompt

Using ONLY the design tokens in tokens.json, build a landing page for "Ledgerly", an app that turns receipts into tax-ready expense reports. Output a single self-contained file index.html (inline CSS, no JS frameworks, Google Fonts link allowed). Required sections, each with the given id: hero (headline + CTA button), features (3 feature cards), pricing (2 plans), faq (3 questions), footer. Define every token as a CSS custom property in :root and use them. Do it in one pass.

Task prompt given to the agent (headless, offline, synthetic fixture inputs): Using ONLY the design tokens in tokens.json, build a landing page for "Ledgerly", an app that turns receipts into tax-ready expense reports. Output a single self-contained file index.html (inline CSS, no JS frameworks, Google Fonts link allowed). Required sections, each with the given id: hero (headline + CTA button), features (3 feature cards), pricing (2 plans), faq (3 questions), footer. Define every token as a CSS custom property in :root and use them. Do it in one pass. Inspired by https://x.com/micahtid/status/2082297045818175717 (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: section id=hero present; section id=features present; section id=pricing present; section id=faq present; section id=footer present; all 6 color tokens used; both fonts used; radius/spacing token values used; tokens defined as :root custom properties; no off-token hex colors; no JS framework / renders without console errors.

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.0061
Wall time: 26s
Human step-ins: 0
Turns: 4

Model usage
Model	Input tok	Output tok	Cost
AClaude Haiku 5.5anthropic/claude-haiku-5.5effort default (no --effort flag) · thinking on	81,482	5,940	$0.0061

Reproduce this run

Use the use case prompt on the use case page.
Same setup: Claude Haiku 5.5 (anthropic/claude-haiku-5.5, effort default (no --effort flag) · thinking on) 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: section id=hero present; section id=features present; section id=pricing present; section id=faq present; section id=footer present; all 6 color tokens used; both fonts used; radius/spacing token values used; tokens defined as :root custom properties; no off-token hex colors; no JS framework / renders without console errors.
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": 25563,
 "stop_reason": "end_turn",
 "session_id": "[REDACTED]",
 "total_cost_usd": 0.0060625,
 "usage": {
  "input_tokens": 8,
  "cache_creation_input_tokens": 11984,
  "cache_read_input_tokens": 69490,
  "output_tokens": 5940,
  "output_tokens_details": {
   "thinking_tokens": 1216
  },
  "server_tool_use": {
   "web_search_requests": 0,
   "web_fetch_requests": 0
  },
  "service_tier": "standard",
  "cache_creation": {
   "ephemeral_1h_input_tokens": 11984,
   "ephemeral_5m_input_tokens": 0
  },
  "inference_geo": "global",
  "iterations": [
   {
    "input_tokens": 2,
    "output_tokens": 492,
    "cache_read_input_tokens": 19217,
    "cache_creation_input_tokens": 5306,
    "cache_creation": {
     "ephemeral_5m_input_tokens": 0,
     "ephemeral_1h_input_tokens": 5306
    },
    "type": "message"
   }
  ],
  "speed": "standard",
  "fallback_credit": null
 },
 "modelUsage": {
  "claude-haiku-5-5": {
   "inputTokens": 8,
   "outputTokens": 5940,
   "cacheReadInputTokens": 69490,
   "cacheCreationInputTokens": 11984,
   "webSearchRequests": 0,
   "costUSD": 0.0060625,
   "contextWindow": 1000000,
   "maxOutputTokens": 128000,
   "thinkingTokens": 1216,
   "canonicalModel": "claude-haiku-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": 4,
 "subtype": "success",
 "api_error_status": null,
 "result": "I wrote `./usecase-runner/runs/09-haiku/work/index.html` as a single self-contained file. I haven't opened it in a browser, so the layout and the Google Fonts load are unchecked.\n\n- **Tokens:** All 12 values from `tokens.json` are defined in `:root` as custom properties (`--color-*`, `--font-*`, `--radius-*`, `--spacing-*`), and the page uses them for every color, font family, radius, and spacing value.\n- **Sections:** `#hero` has the headline and a \"Start free trial\" button. `#features` has three cards, `#pricing` has two plans (Solo and Team), and `#faq` has three questions in `<details>` elements. `#footer` has the brand, links, and copyright.\n- **No JS:** There is no JavaScript. The FAQ uses native `<details>` and the page uses CSS only.\n\nNot everything is a token. `tokens.json` has no type scale, max width, or border width, so I used relative units (`em`) for sizes and widths, a `1px` border, and `color-mix()` on the muted token for card borders. The Solo/Team prices, feature copy, and email address are placeholders I wrote.",
 "ttft_ms": 1666,
 "type": "result",
 "duration_ms": 25896,
 "uuid": "[REDACTED]",
 "ttft_stream_ms": 1381,
 "time_to_request_ms": 219,
 "first_content_frame_ms": 1381,
 "queued_turn_count": 0,
 "result_index": 0
}