The skills that built this site

The teach sub-command sets up the project's context. It noticed there was no usable brief, researched the real pizzeria from our shared research files, asked us a few clarifying questions, and wrote a single strategy document that anchored every later decision.

Loading the file…

Before any layout, the agent wrote a copy brief: the tone of voice and the exact words for every section, drawn only from verified facts. This is also where house rules were set, like no em dashes and dietary info always stated in text.

Loading the file…

The first generated image is a brand style tile, deliberately not a webpage. It commits the entire visual world at once. The agent wrote the prompt from the strategy doc, generated the image, checked it against a rubric, then stopped for our approval.

The exact prompt sent to Geminiinput

A brand style tile (designer's specimen board, NOT a website) for an organic pizzeria called 'Redwood Pizzeria'. Aesthetic: psychedelic 1970s gig-poster energy reimagined as a refined modern brand system. Landscape. Grainy silkscreen / risograph print texture throughout. Deep cosmic twilight background. Four zones: 1. TOP LEFT large display wordmark 'Redwood Pizzeria' in fat high-contrast retro display in warm cream with radiating cosmic sun; 2. TOP RIGHT tagline 'A SLICE OF THE REDWOODS' in same face, marigold gold; 3. CENTER BAND six color swatches: 'Twilight Indigo', 'Deep Plum', 'Marigold Sun', 'Hot Coral', 'Pine Teal', 'Warm Cream'; 4. BOTTOM LEFT type specimen 'Aa' + body lines; 5. BOTTOM RIGHT motif: redwood tree silhouette + radiating cosmic sun + tiny Bigfoot. No browser chrome, no nav, not a webpage. Spell all text exactly as written.

The shape sub-command turns the visual world into an engineering contract: named colors in OKLCH (a color space where contrast is predictable), a type pairing, spacing, and depth created by lightness instead of drop shadows. The code is built strictly from these tokens.

Loading the file…

One generated full-page mock set the composition for all six sections at once. It took several rounds of feedback. This is a clear example of the human-in-the-loop: the agent generated, you reacted, it revised. The playbook also has each section's lane decided here, so the mock reflects them.

The hero was generated as a focused illustration, then literally measured. The add-rulers.py tool overlays a pixel ruler so the hand-written CSS can place the headline, the text-safe zone, and the sun in exactly the right spots. The four pizzas were generated from one shared style probe so they read as a set. In the playbook's terms the hero is the run's single Lane 1 section, the one lane where the probe is a precise build target, which is exactly why it gets ruled.

A Lane 1 hero is generated with the headline and buttons baked into the image, which is perfect for measuring but wrong for the web, where text must stay live, selectable, and translatable HTML. So the playbook runs an untext pass: a second image-to-image edit that removes the overlaid headline, kicker, and buttons and paints in the illustration underneath, leaving a clean opaque background plate. The real text is then layered over it in CSS, so it stays sharp and accessible.

Redwoodstyle probe

Bigfootmatched

Whitematched

Cowellmatched

Scene: giant center redwood with glowing marigold/coral root-veins, radiant cosmic sun behind the crown, pizza slice at the heart, comets on a twilight-indigo/plum sky, riso/silkscreen grain. Palette locked to the six toolkit colors. Bright sun upper, dark plum text-zone lower-center. Headline 'A SLICE OF THE REDWOODS' (2 lines, fat display serif, cream, ~80% width); kicker 'FELTON, CALIFORNIA · ORGANIC SINCE 2005' (marigold); CTAs 'See the Menu' (marigold pill) + 'Call (831) 335-1500' (outline). Preserve composition; no chrome, nav, or letterbox.

Remove all text overlays and UI from this design mockup: the navigation, the headline 'A SLICE OF THE REDWOODS', the subtext, and the buttons. Reveal and complete the cosmic-grove illustration underneath (the redwood, the radiant sun behind the crown, the pizza slice at the heart, comets on a twilight sky). The result is a pure background illustration: no text, no UI, no buttons. The full-frame illustration is intrinsic; do not crop or strip it. Keep the bright sun in the upper region and keep the central text zone dark for contrast.

Now it becomes a real website. The agent wrote a skeleton shell, then built each section in hand-written HTML and CSS from the tokens and copy, dropping the illustrations in. Playwright checked every section at three screen widths before moving on. Story, Menu, and Visit are Lane 0, built straight from tokens and copy; the footer's Bigfoot and treeline are inline SVG (Lane 3).

The critique sub-command runs two independent reviews, a design-director assessment and an automated pattern scan, then scores the page. We chose the scope, polish made the fixes, and a re-score confirmed the lift.

32 → 36Design Health / 40

• Global keyboard focus ring (accessibility)
• Sticky in-menu category strip with scroll tracking
• Hand-drawn "on Highway 9" location cue
• Live Open now / Closed badge from the real hours

critique-2026-05-29.md  the full design review10.7 KB

Loading the file…

Finally it went live behind HTTPS on a small VPS. The agent followed the server's own conventions, claimed a free port, wrote the configs, and reloaded the proxy gracefully. You made the one real decision here: the URL.