Jackson & Coil

Jackson & Coil er en fiktiv frisørsalong i Oslo som spesialiserer seg på krøllete hår. Jeg brukte den som case for å se hvor langt to AI-agenter kan ta meg fra brand-brief til ferdig, deployet nettside.

Problem

Jeg trengte et porteføljeprosjekt der jeg kunne styre Claude Code og Codex hele veien fra brand-brief til deployet kode. Caset ble en fiktiv krøll-salong på Grünerløkka som jeg kalte Jackson & Coil.

Krøllete hår er underrepresentert i norske salonger. Mange norske frisører er ikke trent på naturmønster, og kunder med krøller reiser ofte til London eller Stockholm for tørrklipp. Krølltyper måles fra 2A til 4C på Andre Walker-skalaen, og den skalaen ble nyttig kontekst da jeg skrev brand-briefen.

Løsning

Jeg startet med research. Leste teardowns av krøll-salonger jeg likte (Hair Rules i New York, Curl Bar i London, Curl Up i Amsterdam, Hare & Bone i London, Capella i LA), noterte design-mønstre verdt å låne og noen anti-mønstre, og skrev en brand-brief som dekket personas, tone-of-voice, fotografi-regler og tjenestemeny. Den briefen ble grunnlaget begge agentene fikk å jobbe fra.

Deretter bygde jeg to Next.js-prototyper av samme salong side om side i samme prosjektmappe. Begge fikk samme brand-brief og samme målgruppe, forskjellen lå i hvordan agentene tolket den. Website 1 ble cream og terracotta, Fraunces-serif, en redaksjonell stil med Vanessa Jackson sin grunderhistorie fremme. Website 2 ble paper og clay med dyp blågrønn for booking, IBM Plex, et strammere fotografisk uttrykk og en snarvei der returnerende kunder kan rebooke samme klipp på ett trykk.

Begge har ti ruter, en full booking-flyt i fem steg (tjeneste, stylist, tid, krølltype-intake og bekreftelse), og en butikk med 36 produkter filtrerbare på krølltype, porositet og pris. Booking-staten lever i nettleserens sessionStorage, og e-postbekreftelsen bruker en EmailJS-stub med mailto-fallback. Dette er en prototype, så ingenting går mot en faktisk backend.

Claude Code var hovedagent for kode og struktur. Codex tok bilde-genereringen, og Playwright via MCP gjorde skjermbilder og ytelsesmålinger. Jeg dispatchet typisk tre til fem subagenter parallelt, hver med sin avgrensede oppgave: én for hjemmesiden, én for booking, én for butikken. Det halverte ventetiden på de fleste oppgaver.

Beslutninger jeg tok

Parallelle prototyper. Det opprinnelige alternativet var å bygge én versjon ferdig polert. Jeg kjørte to Claude Code-sessions mot to ulike design-retninger samtidig, så jeg kunne se hvor agentene lander når de har frihet, og hvor mye divergens som faktisk oppstår i tone, typografi og bilde-valg.

For å holde tonen i sjakk la jeg en PORTFOLIO-CONTEXT.md i prosjektroten med en liste over forbudte ord, fraser og mønstre, og spurte hver subagent om å sjekke outputen sin mot lista før den leverte. Selv da måtte jeg redigere manuelt, men det fjernet det meste av det AI-aktige før jeg så det.

All booking-state i nettleseren. Dette er en prototype uten ekte salong å booke hos, så Supabase eller Postgres ville tatt en dag uten å demonstrere noe ekstra. State lever i sessionStorage, e-postbekreftelsen sendes via EmailJS-stub som faller tilbake til mailto hvis nøklene mangler, og kalender-invitasjonen er en .ics-fil generert i nettleseren.

Da subagenten leverte fem ulike filter-bar-design for butikken, laget jeg en HTML-velger med thumbnails av alle fem og valgte den enkleste: en venstre-sidebar med checkboxes for kategori og en pris-slider. De fire andre var pene, men ville krevd ekstra arbeid for å funke responsivt under 480 piksler.

Hva jeg lærte

Bilder er den vanskeligste delen. Codex sin bildegenerering produserer brukbart for de letteste krølltypene, men 4C-krøller får ofte uregelmessige teksturer som ser kunstige ut. Jeg endte med å bruke ekte produktbilder fra Pattern, Innersense og Boucléme for 30 av 36 shop-produkter, og lagde Codex-bilder bare for de seks hus-merkene. Jeg hadde gjerne sluppet, men det var den eneste måten å få en konsekvent katalog på.

Hvordan jeg formulerte prompten bestemte hva subagenten leverte. "Lag en hero-seksjon" ga generisk Tailwind-glansbilde. "Lag hero-seksjonen til en krøll-spesialisert salong, Type 4-først, ingen stock-glamorshots, med disse to bildene som anker" ga noe brukbart i første runde.

En ting jeg tok med meg: agenter behandler ofte URL-er du gir dem som instruks, ikke som data. Da jeg ba en subagent åpne en konkurrent-salongs nettside for tone-of-voice-research, observerte jeg flere ganger at den prøvde å adlyde tekst som lå skjult i HTML-en, som om det var en kommando. Jeg behandler nå all ekstern web-innhold som data og sier det eksplisitt i prompten før jeg sender lenker inn.