Skip to content

Claude Opus 5.5 on Build a landing page from extracted design tokens

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

Trust 80%Fully autonomoussuccess · first try
Estimated cost
$0.30
Wall time
1m
Human step-ins
0
Outcome
Pass

Compare with other models on this task →

Summary

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.30
Wall time
1m
Human step-ins
0
Turns
4
Model usage
ModelInput tokOutput tokCost
AClaude Opus 5.5anthropic/claude-opus-5.587,3658,867$0.30

Reproduce this run

  1. Use the use case prompt on the use case page.
  2. Same setup: Claude Opus 5.5 (anthropic/claude-opus-5.5) via Claude Code 2.1.299 (headless -p), cloud.
  3. 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.
  4. 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).

Evidence log
{
 "duration_api_ms": 75987,
 "stop_reason": "end_turn",
 "session_id": "[REDACTED]",
 "total_cost_usd": 0.30358320000000005,
 "usage": {
  "input_tokens": 8,
  "cache_creation_input_tokens": 13941,
  "cache_read_input_tokens": 73416,
  "output_tokens": 8867,
  "output_tokens_details": {
   "thinking_tokens": 348
  },
  "server_tool_use": {
   "web_search_requests": 0,
   "web_fetch_requests": 0
  },
  "service_tier": "standard",
  "cache_creation": {
   "ephemeral_1h_input_tokens": 13941,
   "ephemeral_5m_input_tokens": 0
  },
  "inference_geo": "global",
  "iterations": [
   {
    "input_tokens": 2,
    "output_tokens": 700,
    "cache_read_input_tokens": 25813,
    "cache_creation_input_tokens": 274,
    "cache_creation": {
     "ephemeral_5m_input_tokens": 0,
     "ephemeral_1h_input_tokens": 274
    },
    "type": "message"
   }
  ],
  "speed": "standard",
  "fallback_credit": null
 },
 "modelUsage": {
  "claude-opus-5-5": {
   "inputTokens": 8,
   "outputTokens": 8867,
   "cacheReadInputTokens": 73416,
   "cacheCreationInputTokens": 13941,
   "webSearchRequests": 0,
   "costUSD": 0.30358320000000005,
   "contextWindow": 1000000,
   "maxOutputTokens": 128000,
   "thinkingTokens": 348,
   "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": 4,
 "subtype": "success",
 "api_error_status": null,
 "result": "I built `index.html` as a single self-contained file. It has inline CSS, no JavaScript, and a Google Fonts link for Space Grotesk and Inter. I checked the file's text but haven't opened it in a browser.\n\n**Tokens:** all 12 tokens from `tokens.json` are set as custom properties in `:root`, such as `--color-primary` and `--spacing-gap`. A search found no colour codes anywhere else in the file. Where the page needed other values, I derived them from the tokens:\n- **Smaller spacing** is a fraction or multiple of `--spacing-gap`.\n- **Container widths** are multiples of `--spacing-section`.\n- **Tints** (soft borders, the hero glow, the gradient) mix token colours with `color-mix()`.\n\nFont sizes, line heights and border widths are fixed numbers, because `tokens.json` doesn't define any.\n\n**Sections:** all five required ids are present.\n- **`#hero`:** headline, a primary \"Start free trial\" button, a secondary button, and a small graphic showing a receipt turning into a report.\n- **`#features`:** three cards (receipt capture, tax categories, one-click reports), each with an inline SVG icon.\n- **`#pricing`:** Starter at $0 and Pro at $12, with Pro highlighted as \"Most popular\".\n- **`#faq`:** three questions that open and close using built-in HTML (`<details>`), with no JavaScript.\n- **`#footer`:** logo, links and copyright.\n\nI also added two things you didn't ask for: a navigation bar at the top and a call-to-action band above the footer. The layout collapses to one column on narrow screens, keyboard focus is clearly outlined, and animations are switched off for people who turn on reduced motion.\n\nThe product copy and figures are placeholders I wrote, so check them before publishing. That includes the $12 price, the \"over 99% accuracy\" claim, the security promises, the QuickBooks and Xero sync, and the `[REDACTED:email]` address.",
 "ttft_ms": 3509,
 "type": "result",
 "duration_ms": 76419,
 "uuid": "[REDACTED]",
 "ttft_stream_ms": 2670,
 "time_to_request_ms": 322,
 "first_content_frame_ms": 2670,
 "queued_turn_count": 0,
 "result_index": 0
}

Get new runs and ranking changes weekly