Claude Fable 5.1 on Turn a local brief into a page

Passed in 46s. Attempt 1. Run 20260904T132117Z-fable-5-1-brief-to-page-1.

Task

Build the local business page

Read brief.md and assets/logo.svg. Build site/index.html as a complete single-file page with inline CSS. Do not create other output files.

Use only the supplied business facts. Make the hours and phone number immediately findable, show all four services with their exact prices, and do not imply the shop offers the excluded service. The page must be readable as one column on a phone.

Do not use external scripts, stylesheets, fonts, or other network resources. Keep the HTML under 80 KB and include a useful <title>.

Command

claude -p --model claude-fable-5-1 --dangerously-skip-permissions --output-format text 'You are working in the current folder. Do the task in TASK.md and write the outputs to the exact paths it names.
Do not ask questions. When done, stop.

# Build the local business page

Read `brief.md` and `assets/logo.svg`. Build `site/index.html` as a complete single-file page
with inline CSS. Do not create other output files.

Use only the supplied business facts. Make the hours and phone number immediately findable,
show all four services with their exact prices, and do not imply the shop offers the excluded
service. The page must be readable as one column on a phone.

Do not use external scripts, stylesheets, fonts, or other network resources. Keep the HTML under
80 KB and include a useful `<title>`.'

Output

The page is built and saved at `site/index.html`. It is one file, about 6.5 KB, with inline styles only.

The phone number and hours sit in a boxed panel right under the logo, before anything else. The phone is a tap-to-call link.

All four services show with their exact prices. The e-bike note says plainly that battery repair is not offered, and only mentions ordinary mechanical work the way the brief allows.

Nothing loads from the network. The only web address in the file is the SVG namespace, which browsers never fetch.

The layout is a single column at every width, with slightly larger type on wider screens.

Files produced

site/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Harbor Wheel Bicycle Repair | Hours, Prices &amp; Phone | SE Alder St, Portland</title>
<meta name="description" content="Harbor Wheel is a neighborhood bicycle repair counter at 418 SE Alder Street, Portland. Open Tuesday to Saturday. Call (503) 555-0148. Tune-ups, flat repair, brake adjustment, boxed bike assembly.">
<style>
  :root {
    --ink: #173d38;
    --accent: #d96f45;
    --paper: #fbf8f2;
    --card: #ffffff;
    --line: #dcd6c8;
    --muted: #54615e;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
  }
  a { color: var(--ink); }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .wrap { max-width: 680px; margin: 0 auto; padding: 0 20px 48px; }

  header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0 12px;
    border-bottom: 3px solid var(--ink);
  }
  header svg { width: 120px; height: 36px; flex-shrink: 0; }
  header .name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
  header .name small { display: block; font-weight: 400; color: var(--muted); font-size: 0.9rem; }
[... preview capped at 40 lines ...]

Checker

{"passed": true, "score": 1.0, "notes": "hard checks passed; rival judge: pass", "judge": {"model_id": "gpt-5-6-sol", "verdict": "pass", "reason": "The phone number and complete hours are prominent near the top, all four services and exact prices are present, the e-bike battery exclusion is explicit, and no unsupported claims or filler appear. The supplied logo is reproduced faithfully, the styling credibly suits a neighborhood repair shop, and the responsive max-width layout remains a readable single column without horizontal scrolling."}}

Judge

{
  "model_id": "gpt-5-6-sol",
  "verdict": "pass",
  "reason": "The phone number and complete hours are prominent near the top, all four services and exact prices are present, the e-bike battery exclusion is explicit, and no unsupported claims or filler appear. The supplied logo is reproduced faithfully, the styling credibly suits a neighborhood repair shop, and the responsive max-width layout remains a readable single column without horizontal scrolling."
}