Jackson & Coil

Jackson & Coil is a fictional Oslo hair salon for curly hair. I used it as a case to see how far two AI agents can take me from a brand brief to a finished, deployed website.

Problem

I needed a portfolio project where I could drive Claude Code and Codex all the way from brand brief to deployed code. The case became a fictional curl salon in Grünerløkka that I called Jackson & Coil.

Curly hair is under-served by Norwegian salons. Many Norwegian hairdressers aren't trained on natural patterns, and clients with curls often fly to London or Stockholm for dry cuts. Curl types are measured from 2A through 4C on the Andre Walker scale, and that scale became useful context when I wrote the brand brief.

Solution

I started with research. Read teardowns of curl salons I liked (Hair Rules in New York, Curl Bar in London, Curl Up in Amsterdam, Hare & Bone in London, Capella in LA), noted design patterns worth borrowing and a handful of anti-patterns, and wrote a brand brief covering personas, tone of voice, photography rules and a full service menu. That brief became the ground both agents worked from.

Then I built two Next.js prototypes of the same salon side by side in the same project tree. Both got the same brand brief and the same audience, the difference was in how the agents interpreted it. Website 1 came out cream and terracotta, Fraunces serif, an editorial feel with Vanessa Jackson's founder story up front. Website 2 came out paper and clay with deep teal for the booking flow, IBM Plex, a tighter photographic register and a shortcut where returning clients can rebook the same cut in one tap.

Both have ten routes, a full five-step booking flow (service, stylist, time, curl-type intake, confirmation), and a shop with 36 products filterable by curl type, porosity and price. The booking state lives in the browser's sessionStorage, and the email confirmation uses an EmailJS stub with a mailto fallback. The whole thing is a prototype, so nothing reaches a real backend.

Claude Code was the main agent for code and structure. Codex handled image generation, and Playwright through MCP took the screenshots and performance measurements. I typically dispatched three to five sub-agents in parallel, each with its own focused task: one for the homepage, one for booking, one for the shop. That roughly halved the wait on most tasks.

Decisions I made

Parallel prototypes. The original alternative was to ship one finished, polished version. I ran two Claude Code sessions against two different design directions at the same time, so I could see where the agents land when given freedom, and how much divergence actually shows up in tone, typography and image choices.

To keep the tone in check I added a PORTFOLIO-CONTEXT.md at the project root with a list of forbidden words, phrases and patterns, and asked each sub-agent to check its output against the list before delivering. I still had to edit by hand, but it removed most of the AI-feel before I saw it.

All booking state in the browser. This is a prototype with no real salon to book against, so Supabase or Postgres would have cost a day without demonstrating anything extra. State lives in sessionStorage, the email confirmation goes out through an EmailJS stub that falls back to mailto if the keys are missing, and the calendar invite is a .ics file generated in the browser.

When the sub-agent delivered five different filter-bar designs for the shop, I built a small HTML picker with thumbnails of all five and chose the simplest one: a left sidebar with category checkboxes and a price slider. The other four looked good, but would have needed extra work to behave below 480 pixels wide.

What I learned

Images are the hardest part. Codex image generation is workable for the looser curl types, but 4C coils often come out with irregular textures that look artificial. I ended up using real product photos from Pattern, Innersense and Boucléme for 30 of the 36 shop products, and Codex-generated images only for the six house brands. I would rather have skipped it, but it was the only way to get a consistent catalog.

How I framed the prompt decided what the sub-agent returned. "Build a hero section" produced generic Tailwind gloss. "Build the hero for a curl-specialist salon, Type 4 first, no stock glamour shots, with these two images as anchors" produced something usable on the first pass.

One thing I took away: agents often treat URLs you give them as instructions, not as data. When I asked a sub-agent to open a competitor salon's website for tone-of-voice research, I watched it try, several times, to obey text that was hidden in the HTML as if it were a command. I now treat all external web content as data and say so explicitly in the prompt before I send links in.