PostAI

How I built a booking page with AI tools, round by round

A studio booking page for a London vintage store, mocked up with Claude Code in 1 hour 42 minutes and then changed with the owner's own words. What the AI showed me each round, what I said back, and where it went wrong.

Ben PowerCo-founder

21 October 20265 min read

Ksenia runs Circular Groove, a London concept store for vintage and pre-loved designer fashion. She's opening a studio for personal dressing appointments. On 21 October I asked Claude Code to mock up a booking page for it.

It's on an unpublished copy of her theme, so it isn't live yet. Ksenia has seen it, sent me her changes and they're in. It goes live when she says. Click any screenshot to see it full size.

The starting point

The agent pulled her live theme, read-only. It found she had already installed Cowlendar, a booking app, and published a studio appointment on 14 October. So we built on her tool.

Circular Groove's live Studio appointment page: a tall photo of a woman browsing a clothes rail on the left, a heading, short text and a black Book now button on the right, above a dark footer. — 10:39. Ksenia's live Studio appointment page, as the agent first saw it.

Round 1: three concepts

The first board came 21 minutes in: concepts A, B and C, desktop and mobile. The agent leaned towards C.

My reply:

I like the hero from A. maybe the booking flow should have some options? We could make it clear we also approve group appointments? We could include a photoshoot? (any other ideas?) I like the 'try them in the studio' block - with the ecommerce links to specific pieces - they should be from the top 30% of most expensive items on shop - prefer shots with models...

Board of three concepts side by side, A Editorial invitation, B Book on the page and C Shop to studio, each shown as a 1440 desktop page and a 390 phone page. — 10:54. Shown to me, board 1: concepts A, B and C at desktop and phone width.

Concept A as a tall page: a dark hero reading Personal dressing at the studio, a three-step how it works row, a studio photo with text, an FAQ list and a closing Book your hour button. — 10:52. Concept A, Editorial invitation, after the invented promise was removed. I picked its hero.

Concept C as a tall page: a slideshow hero reading From the site to the studio, a grid of eight products under Try them in the studio, and a Book an hour, try it all on block above the footer. — 10:53. Concept C, Shop to studio. I picked its Try them in the studio block.

10:49. Concept C's first slideshow, where a mark baked into the theme banner shows through the heading.

I asked how we'd take bookings. The agent compared Cowlendar with Cal.com and said keep Cowlendar.

I asked for studio call-outs (pieces, rough hours, toilets, hot drinks) and FAQs on lift access and parking. The agent had no facts, so it wrote "tell us when you book". I told it to fill them in as if we'd checked, so I could judge the page. They were all placeholders, and Ksenia's own details replaced them in round 4.

Round 2: three heroes

Three hero options over one page body. The agent picked hero 2, the booking card. I said "v good - we're getting there", then "I like hero 1". I also said yes to Cowlendar.

Second board: three hero options, Blobs, Booking card and Info strip, at desktop and phone width, above the same full page body shown with the first hero. — 11:31. Shown to me, board 2: three hero treatments over one shared page body.

I pasted in a block from her shop's homepage to copy, and asked for a small map and a less dull "ways to visit" section.

Collage block from the homepage: a large Collectors Edit photo of a person in a brown suede coat lying on grey carpet, with Bags and Accessories photos stacked on the right. — 11:33. The block from her shop's homepage that I pasted in and asked for. The final page's collage copies it.

Round 3: three ways to visit

Collage, image cards or tabs. The agent liked the collage. I went with tabs and asked for the collage as a collection block at the bottom.

Third board: three ways to show the visit types, W1 Collage, W2 Image cards and W3 Tabs, each at desktop and phone width. — 12:01. Shown to me, board 3: three ways to show the visit types, collage, image cards and tabs.

Round 2 had dropped Ksenia's own words from her live page, so I pasted them back in. I also asked for the group line to be toned down. It now reads "Come with a friend or a small group and discover the collection together."

Round 4: Ksenia's changes

Ksenia sent her changes on 4 November: she wanted it more chic and less salesy. They went into the same unpublished copy of her theme on 6 November. Her hero and intro words are in, and so are her names for the visits and her own six FAQs. The page now says the studio is open by appointment on Tuesday, Wednesday and Saturday, and shows her address.

Everything I had guessed came out: the hero tags, tea and coffee, step-free access and parking. Her words won wherever they differed from ours.

Top of the page after Ksenia's changes at desktop width: a hero reading Visit the Circular Groove studio over a photo of a woman browsing a clothes rail, Book a studio visit and Bring a group buttons, and an intro under the heading Come and spend an hour at the Circular Groove studio in W10. — 6 November. The hero and intro, now in Ksenia's words.

The studio block and FAQ list after Ksenia's changes: a photo on the left, the heading The studio, 500+ pieces, open by appointment Tuesday, Wednesday and Saturday, fitting room and WC, the address at 85 Barlby Road, a map link and four photos, then six questions. — 6 November. The studio block with her opening days and address.

The final page

This is the page as it stands now, after Ksenia's changes. The booking calendar doesn't show up in a screenshot, so the shots stop above it.

The final page at phone width, from the hero down to the FAQ list: hero with a Book a studio visit button, the intro, two-row Ways to visit tabs, the pieces, the steps, the studio block and the questions. — 6 November. The final page at 390, from the hero to the questions.

Shop the collection block on a phone: a tall Collectors Edit photo beside Bags and Accessories photos, followed by the dark footer links and a round WhatsApp button. — The collection collage on mobile, as built on 21 October and unchanged since: same layout as desktop, smaller.

The numbers

Counted from the transcripts for the whole 21 October session. Round 4 isn't counted. The same chat also ran a docs review, a tracking check and the cold read below.

My prompts	17
Words I typed	457
All AI output	232,907 tokens
Wall clock	1 h 42 min
Agent waiting on me	43 min
Agent working	30 min

The 457 words leave out about 168 I typed earlier in the coordinator chat, the Claude Code chat that hands work out to the others.

What it cost

At API list prices on 21 October (Opus 5.5 for the main agent, Sonnet 5.5 for the subagents), the session comes to about $17. $9.30 of that is the models re-reading context they had already cached. The two subagents that built the page come to about $4.60. Those are US prices.

What it got wrong

It wrote three promises into the draft copy that Ksenia never made, like "we will have ideas ready". It caught two itself. The coordinator chat caught the third.

It said "I've added it" about the address. It meant a line in a notes file. I wrote "woah it's not live right?". It wasn't.

It drafted a message to Ksenia I hadn't asked for. It also went quiet for 18 minutes while round 3 built, and I sent "?".

The final-page subagent hadn't checked the mobile page, so the main agent did. Cowlendar ignores a normal link, so the first Book button opened an "Invalid calendar" error. The subagent rewrote every Book link and clicked 11 of them. Three are still untested.

A cold read before it went to Ksenia

A subagent read the page cold, as Ksenia or her own AI would. It found 13 issues, five of them blockers. Four got fixed on the page. The studio details I had guessed at were left for Ksenia, and her changes in round 4 replaced them. A few smaller points were left as they were.

What I decided

I picked the hero from A, the product block from C, hero 1 and the tabs. In rounds 2 and 3 the agent would have picked differently.

I shared the preview with Ksenia on WhatsApp myself the same day. She said she'd send a doc of changes, and she did. They're in, and it goes live when she says.