Helen Larkspur, Piano in Headingley

The brief

This is a worked example. Askmill wrote this prompt from a simulated client interview, in which a model answered the questions for an invented client. The line under the title is the opening request the interview started from; everything else came out of the answers.

The prompt

The complete text, exactly as it is handed to an AI builder.

Download (.txt)

A one-page website drawn as the inside of a front room in Headingley, Leeds: an old brown Bechstein upright against the wall with music piled on top, a rug, a lamp, and an armchair where a cat called Brahms lies curled up, watching. Helen Larkspur teaches about 30 pupils there one-to-one, mostly children and a few adults. Concept: everything a parent would ring to ask is answered before they ring, and all that is asked of them is to pick one of three times. The client's facts (example values), shown exactly: lessons last 30, 45 or 60 minutes depending on age and level; a term costs £192, £288 or £384 respectively and is roughly 12 lessons; ABRSM exams are prepared only for pupils who want them; two recitals a year, December and July, usually a Saturday, at a church hall in Headingley, dates not yet fixed; the free trial lesson lasts 30 minutes, on Tuesday 4:00 pm, Thursday 5:30 pm or Saturday 10:00 am. A trial is a request: it counts only once Helen has replied by email to confirm.

Mood: cosy, unhurried, trustworthy; a lamp-lit room at four on a winter afternoon, the opposite of a stiff music academy. Light page, so fees and times read easily on a phone outdoors. Palette: cream wall #F5ECD9 (page ground); ivory key #FBF6EA (cards, fields); walnut ink #2E1F16 (all text, about 13:1 on cream); polished wood #5A3A26 (drawing lines, rules, small labels, focus rings, at least 7:1 on cream); rug red #8E2A2A (at full strength only the trial button and the chosen time, carrying ivory key text at about 7.7:1; nothing else uses it); lamp amber #E2A84B (the lamp's glow and one "next" dot, never text). Tints allowed: walnut ink at 12% and 24% for hairlines and shadows, lamp amber up to 35% opacity, rug red at 35% only as hatching on the drawn rug.

Everything is drawn in inline SVG with a slightly uneven 2 px polished-wood line and flat fills: no photographs, interiors only, and the piano is always this upright. Six parts in one column of at most 1040 px, no menu: 1) top: name, subtitle, the room, the trial button; 2) "Fees for a term": three ivory cards shaped like music-book covers; 3) "The lessons", with Helen's hello; 4) "Recitals": two entries, the nearer month first with the amber dot; 5) "A free trial lesson": the times as cards standing on a drawn music desk, then a short form; 6) a foot. A commented SETTINGS block at the top of the script holds the email address (stand-in [email protected], marked "put Helen's real address here"), the trial times (one to five), the trial length, the three fees, and each recital's month, optional exact date and hall. The page renders only from it, so a new term is a two-minute edit; a recital without a date reads "a Saturday, date to be confirmed".

Typography: system fonts only. Headings and body in 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif: name at clamp(40px, 9vw, 72px), weight 400; section headings 28px; body 18px, line-height 1.6, at most 62 characters a line; fees in 32px tabular numerals. Labels in 'Gill Sans', 'Trebuchet MS', Verdana, sans-serif, 12px capitals, 0.1em letter-spacing. Voice: Helen in the first person, first-name terms, plain and warm. Exact copy: h1 "Helen Larkspur"; subtitle "Piano lessons in Headingley"; button "Ask for a free trial lesson", beneath it "30 minutes, free."; cards "30 minutes · £192 a term", "45 minutes · £288 a term", "60 minutes · £384 a term"; "A term is roughly 12 lessons. It shifts a little with half terms."; "ABRSM exams are there for pupils who want them. Nobody is pushed towards one."; "Hello, I'm Helen. I teach from my front room in Headingley. Lessons are friendly and go at each child's own pace. Most parents meet Brahms, the cat, before they meet me."; "Twice a year we borrow a church hall in Headingley and play for each other."; "Pick one of the times I keep free each week. I'll reply by email to confirm, and send the full address then."; foot "Helen Larkspur · Headingley, Leeds. No adverts, no tracking, no photographs of pupils."

Entrance: at 0 s name, subtitle and button are already in place. From 0 to 900 ms the room's lines draw themselves (ease-out, 60 ms stagger per object); from 600 to 1400 ms the lamp glow fades in; at 2 s Brahms's tail flicks once. Left alone, the glow breathes slowly and an ear twitches now and then. On a phone the first part fits one screen: drawing capped at 38% of its height, button 56 px tall and full width, the fees heading peeking below. From 900 px wide, text sits left and the room right, the fee cards form a row, and the times sit beside the form.

Interaction: the top button glides to part 5. The times form one radio group; the chosen card fills rug red with ivory text and a tick. Five labelled fields follow: "Your name", "Your email", "Pupil's first name", "Pupil's age" (hint "Write adult if it's for you"), "Have they played before?" ("No", "A little", "Yes"). "Send my request to Helen" validates, then opens a ready-written email to the SETTINGS address, subject "Trial lesson request: Tuesday 4:00 pm", listing the time and the five answers; beneath the button: "This asks for the time. It isn't booked until I've replied to confirm." Errors appear inline in walnut ink beside a drawn pencil mark: "Please pick a time first.", "I'll need a name to reply to.", "That email address doesn't look right. Could you check it?" With no times in SETTINGS: "No trial times are free just now. Email me and we'll find one." Targets are at least 44 px.

Signature moment, deliberately small: the request leaving. 0-200 ms the send button sinks and the email opens; 200-700 ms the form folds away and an ivory card rises 12 px into its place: "Got it, I'll reply soon.", "You've asked for Tuesday at 4:00 pm. It isn't booked until I've replied to confirm." and, because the page cannot see whether the email left, "If your email didn't open, copy your request and send it to [email protected]." with "Copy my request" and "Choose a different time"; 700-2200 ms a small Brahms beside the card does one slow stretch, paws forward, back arched, and curls up again. Any tap or key ends the motion. Resting state: the top button reads "Trial requested: waiting for my reply". Hidden detail: the music open on the piano is the first bar of Brahms's Lullaby, and tapping the cat makes him blink under the caption "Brahms. He attends most lessons."

Sound: none; the page is silent. Reduced motion: no line drawing, breathing, twitch, glide or stretch; Brahms stays curled and the card simply appears. Performance: text visible within 1 s on an old phone, file under 150 KB, no libraries, under 600 SVG nodes, only transform and opacity animated, idle motion paused when the tab is hidden. Accessibility: one h1, logical tab order, visible focus, a one-sentence description for each drawing, focus moved to the confirmation heading, no keyboard trap. Persistence: half-filled answers and the chosen time are kept in localStorage under "wren-trial-v1"; after sending only the requested time remains; without storage everything still works. Never: a price per lesson, a grand piano, a street name, map or house exterior, a phone number, a pupil's name, photo or quote, "Mrs Wren", urgency words, adverts, analytics, cookies or pop-ups. Deliver as a single self-contained HTML file with no external files, fonts, images or network requests. Done when: (1) on a 360 px phone the name, drawing and trial button show without scrolling and all three term fees are reached in one swipe; (2) choosing a time and sending produces an email to the SETTINGS address naming that time and all five answers; (3) "It isn't booked until I've replied to confirm" is visible before and after sending; (4) editing only SETTINGS changes times, recital dates and address everywhere; (5) no photograph or pupil's name appears anywhere.

DESCRIPTION
A cream page that opens on a lamp-lit front room drawn in brown line: an old Bechstein upright with music piled on top, a red-hatched rug, and a cat called Brahms curled on the armchair, one ear turned towards the visitor. Beside the room sits the name Helen Larkspur, beneath it "Piano lessons in Headingley" and a single deep red button asking for a free trial lesson. One swipe down, three ivory cards shaped like music-book covers give the term fees, £192, £288 and £384, with a note that a term is roughly 12 lessons. Then come a four-sentence hello in Helen's own voice, two recitals waiting for their Saturdays, and three times standing on a music desk: Tuesday 4:00 pm, Thursday 5:30 pm, Saturday 10:00 am. A parent picks one, fills five short fields and sends; a ready-written email opens, the form folds into a calm card saying it is not booked until Helen replies, and Brahms stretches once and goes back to sleep. No photographs, no pupils, no street, no sound.

VISUAL TECHNIQUES
- Inline SVG room illustration with a hand-wobbled 2 px line (slight jitter baked into the path coordinates) and flat fills from the six palette colours
- Stroke-dash line drawing on entrance, 0-900 ms, 60 ms stagger per object, cubic-bezier(.2,.8,.2,1)
- Lamp glow as a radial gradient of lamp amber at up to 35% opacity, breathing between 85% and 100% over 8 s
- Brahms built as a small SVG rig (body, head, ear, tail, paws as separate groups) for the tail flick, an ear twitch about every 25 s, the slow blink and the 1.5 s stretch
- Rug drawn as an outline with diagonal hatching in 35% rug red, keeping full-strength red for the trial button and the chosen time
- Fee cards as music-book covers: ivory key fill, double ruled border in polished wood, a small drawn treble clef, 32 px tabular numerals
- Trial times as radio cards standing on a drawn music desk; chosen state filled rug red with ivory text and a tick
- Notation fragment on the piano's stand: the first bar of Brahms's Lullaby drawn as SVG noteheads, stems and a stave
- SETTINGS-driven rendering: fees, times, recitals and address generated from one commented object; recital order computed from today's date
- Email composition as a mailto link with encoded subject and body, plus clipboard copy with a select-the-text fallback
- Form state kept in localStorage under "wren-trial-v1" inside try/catch and restored on load
- Confirmation choreography on transform and opacity only: fold, 12 px rise, stretch; all removed under prefers-reduced-motion
- Two layouts from one switch at 900 px: a single column for phones, two-column top and trial parts on wide screens, content capped at 1040 px

INTERACTION MODEL
Tapping or clicking "Ask for a free trial lesson" glides to the trial part (a jump under reduced motion). The times are a radio group: tap or click a card, or Tab into the group, move with the arrow keys and choose with Space; the chosen card turns rug red. Tab then moves through "Your name", "Your email", "Pupil's first name", "Pupil's age", the three played-before choices (arrow keys) and "Send my request to Helen" (Enter or Space). Sending with something missing moves focus to the first problem and shows its message beside the field. A valid send opens the visitor's email with the request already written, replaces the form with the "Got it, I'll reply soon." card and moves focus to that heading; "Copy my request" puts the same text on the clipboard and answers "Copied."; "Choose a different time" restores the form with the answers cleared. Tapping, clicking or pressing Enter on Brahms makes him blink and shows his caption; Escape hides it. Returning visitors find their half-filled answers, or their requested time, as they left them. Focus order follows reading order, every target is at least 44 px, hover and focus thicken outlines to 3 px and pressed controls sink 1 px. With reduced motion nothing moves: the room is simply drawn, Brahms stays curled and the card appears in place.

What's inside this prompt

The sections of this prompt, in order, with their length.

1. Overview 180 words
2. Mood 303 words
3. Typography 214 words
4. Entrance 110 words
5. Interaction 310 words
6. Sound 235 words
7. Description 173 words
8. Visual techniques 286 words
9. Interaction model 224 words

More prompts from the library

• Website prompt · 2,281 words

  Falegnameria Valgrande

  A family joinery near Verona wants a site that shows its kitchens and stairs and lets people book the free measuring visit.

  Worked example (simulated interview)

• App prompt · 1,473 words

  Hearthbook

  An app where my partner and I write down what we spend on the house, so we can see each month whether the money will last.

  Example by Askmill

• Project prompt · 2,420 words

  Quanto basta, le ricette di nonna Titina

  My 91-year-old grandmother cooks without measures; we want her recipes as a family book to read on the phone and print for Christmas.

  Worked example (simulated interview)