Harness lab: GLM 5.3 effort low
One model, one brief, 4 ways. Same temperature, same token budget. Credits are what a client would pay (2× cost in A$). Run: 30-lab-glm53-driftwood. Generated 2026-11-05 09:52 UTC.
The brief given to the model
Build a modern, responsive one-page landing page for a fictional productivity app called Driftwood, a shared to-do and calendar app for small teams. Everything is fictional: invent the product details, plan names, prices, customer quotes and names freely. The page must have, in order: a hero with a headline, a one-line pitch and a primary call to action; a features section (4 to 6 features); a how-it-works section in three steps; pricing with three tiers; three customer testimonials; an FAQ with at least four questions; a final call-to-action strip with the enquiry form; and the contact details in the footer. No images or photos anywhere: use colour, typography, layout and spacing only. Choose the palette and fonts yourself and use custom CSS to make it as polished as you can. This is a single page: do not create other pages. Go all the way in this one reply.
Raw
One call, no help. The baseline.
0.0809 credits · US$0.0261 · 50.2s · 1 call(s) · 5911 tokens out · 20 KB
Checks: 0 issue(s) before
Steps
page: 5911 tokens out, US$0.0261
Brief first
The same model writes a design brief (palette, fonts, headline, section plan, one signature idea), then the page follows it.
0.1053 credits · US$0.0340 · 61.2s · 2 call(s) · 7337 tokens out · 22 KB
Checks: 0 issue(s) before
The brief it wrote
{
"direction": "Warm, calm and tactile: soft sand tones with deep teal anchors and a rounded, friendly typeface, echoing the app's name and making team planning feel approachable rather than corporate. Generous whitespace and gentle card layering keep the page feeling light and organised, mirroring what Driftwood does for a team's week.",
"palette": {
"primary": "#0F5E5B",
"secondary": "#E8DCC8",
"accent": "#E07A3F",
"background": "#FAF6EE",
"surface": "#FFFFFF",
"text": "#2B2B26",
"muted": "#6E6A5E"
},
"fonts": {
"heading": "Fraunces",
"body": "Nunito Sans",
"stylesheet": "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Nunito+Sans:wght@400;600;700&display=swap"
},
"headline": "Your team's week, finally in one place.",
"signature": "A CSS-built 'shared week' mock-up in the hero: a rounded card containing a 7-column mini calendar grid made of divs, where each day column holds 2–3 small task pills in the palette colours; one pill has a subtle CSS keyframe 'drift' animation (gentle horizontal bob), and one day column is highlighted with the accent colour to suggest today. Pure divs, borders, border-radius and box-shadows — no images.",
"sections": [
{
"name": "Hero",
"purpose": "Introduce Driftwood with the headline, one-line pitch and primary CTA.",
"layout": "Two-column on desktop (text left, CSS calendar mock-up right), stacked on mobile; oversized Fraunces headline, teal CTA button and accent underline on the word 'one'."
},
{
"name": "Features",
"purpose": "Show four to six capabilities that make shared planning easy.",
"layout": "Responsive grid of 4–6 surface cards (2 columns desktop, 1 mobile) with coloured top borders alternating teal/accent, icon-free — each card uses a large Fraunces numeral or glyph-like CSS shape as its visual anchor."
},
{
"name": "How it works",
"purpose": "Explain onboarding in three simple steps.",
"layout": "Three numbered steps in a horizontal row on desktop with a dashed CSS connector line between them; big Fraunces step numbers in accent, short body text beneath."
},
{
"name": "Pricing",
"purpose": "Present three tiers with clear prices and a highlighted plan.",
"layout": "Three pricing cards, middle 'Cove' plan elevated with teal background, white text and slight scale/shadow to stand out; checkmark lists built with CSS pseudo-elements."
},
{
"name": "Testimonials",
"purpose": "Build trust with three fictional customer quotes.",
"layout": "Three quote cards in a row (stacked on mobile), each with an oversized decorative quotation mark in secondary colour, quote in italic body font, name and role in muted text."
},
{
"name": "FAQ",
"purpose": "Answer at least four common questions and reduce hesitation.",
"layout": "Single-column list of details/summary accordions with a CSS plus-to-minus rotation on the marker; generous vertical rhythm, teal summary text on hover."
},
{
"name": "Final CTA + enquiry form",
"purpose": "Convert visitors with a full-width call-to-action strip and enquiry form.",
"layout": "Full-bleed teal band with white heading and a compact inline form (name, email, team size, message) in a white surface card; accent submit button."
},
{
"name": "Footer",
"purpose": "Provide contact details and close the page.",
"layout": "Dark text-on-background footer with three columns: contact email/phone/address, quick links (anchor links within the page), and a small tagline; thin muted top border."
}
]
}Steps
brief: 843 tokens out, US$0.0038 page: 6494 tokens out, US$0.0301
Checks + fix
The page, then deterministic checks (dead links, images, placeholders, missing sections, generic wording) and one round of exact find/replace edits.
0.1009 credits · US$0.0325 · 57.5s · 1 call(s) · 7379 tokens out · 25 KB
Checks: 0 issue(s) before
Steps
page: 7379 tokens out, US$0.0325
Brief + checks + fix
Both: brief, page, checks, one fix round.
0.1327 credits · US$0.0428 · 66s · 3 call(s) · 7454 tokens out · 20 KB
Checks: 2 issue(s) before → 0 after (5 edit(s) applied, 0 failed)
The brief it wrote
{
"direction": "Warm, calm and tactile: soft sand tones with deep teal anchors evoke driftwood on a shoreline, signalling an unhurried, human approach to team planning. Generous whitespace, rounded cards and a single bold serif headline give the page a crafted, editorial feel that stands apart from generic SaaS blue.",
"palette": {
"primary": "#1F5F5B",
"secondary": "#C7A17A",
"accent": "#E8734A",
"background": "#FAF6EF",
"surface": "#FFFFFF",
"text": "#2B2B26",
"muted": "#6E6A5E"
},
"fonts": {
"heading": "Fraunces",
"body": "Inter",
"stylesheet": "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap"
},
"headline": "Plans that hold. Teams that flow.",
"signature": "A CSS-only 'driftwood calendar strip' in the hero: a horizontal row of seven overlapping rounded day-cards (pure divs with box-shadows and slight rotate transforms), where the middle card is lifted and highlighted in accent colour with a small CSS-drawn checkbox tick (::before with border trick) — visually suggesting tasks getting done day by day.",
"sections": [
{
"name": "Hero",
"purpose": "Introduce Driftwood with headline, one-line pitch and primary CTA.",
"layout": "Two-column on desktop: left holds the serif headline, pitch line and a pill-shaped teal CTA button; right holds the signature driftwood calendar strip; generous vertical padding, headline dominates."
},
{
"name": "Features",
"purpose": "Show four to six capabilities that make shared planning easy.",
"layout": "Responsive grid of 3 columns (2 on tablet, 1 on mobile) of white surface cards with coloured top borders alternating teal/sand; each card has a small CSS icon shape, bold title and one-line description; even rhythm, hover lift."
},
{
"name": "How it works",
"purpose": "Explain onboarding in three simple steps.",
"layout": "Three numbered steps in a horizontal row connected by a dashed CSS line; large serif numerals in accent colour stand out; stacks vertically on mobile."
},
{
"name": "Pricing",
"purpose": "Present three tiers with clear prices and a highlighted plan.",
"layout": "Three pricing cards; the middle 'Cove' plan is elevated (larger, teal background, white text, 'Most popular' badge) while flanking plans sit on white surfaces; feature lists with CSS tick bullets."
},
{
"name": "Testimonials",
"purpose": "Build trust with three fictional customer quotes.",
"layout": "Three quote cards in a row, each with an oversized serif quotation mark in secondary colour, quote text, name and role; asymmetric slight vertical offsets for a hand-placed feel."
},
{
"name": "FAQ",
"purpose": "Answer at least four common questions and reduce friction.",
"layout": "Single narrow column of accordion items (details/summary) with teal summary text and thin dividers; quiet, readable rhythm."
},
{
"name": "Final CTA + enquiry form",
"purpose": "Convert visitors with a bold closing call and enquiry form.",
"layout": "Full-width teal band with white serif headline on the left and a compact white form card on the right (name, email, team size, message, accent submit button); the contrast band is the page's visual climax."
},
{
"name": "Footer",
"purpose": "Provide contact details and closing links.",
"layout": "Dark text-on-background footer with three columns: contact email/phone/address, quick links, and a small wordmark; muted colour, modest spacing."
}
]
}Steps
brief: 805 tokens out, US$0.0037 page: 5905 tokens out, US$0.0275 fix: 744 tokens out, US$0.0116 fix: 5 edit(s) applied, 0 could not be placed