Gothlin.no var ferdig før jeg skrev en eneste linje kode. Ikke selve nettsiden – men bildet av den. Mockups, brand guide, fargepalett, typografi, tonalitet. Alt det som avgjør om en nettside føles gjennomtenkt eller sammenslengt. Det ble utviklet i dialog med Claude, ut fra en logo og noen enkle setninger om hva jeg ville at nettsiden skulle utstråle.
Det er den delen av bygget som overrasket meg mest. Ikke at AI kunne hjelpe til med kode – det hadde jeg allerede erfaring med. Men at hele det visuelle grunnlaget kunne vokse frem fra en samtale.
En logo og noen setninger
Det jeg faktisk ga AI-en å jobbe med var ikke spesielt mye. En eksisterende logo – stort sett uendret fra tidligere – og et par retningslinjer. Direkte, rolig, praktisk. Skandinavisk følelse. Kompetanse som vises gjennom arbeidet, ikke gjennom å skryte.
Det som kom tilbake var en komplett brand guide. Typografivalg med DM Serif Display til overskrifter – varmt og autoritativt uten å bli stivt. DM Sans til brødtekst, JetBrains Mono til kodeeksempler og metadata. Et fargesystem bygget rundt Nordblå som primærfarge og Signal Yellow som aksent, med en aksentgrønn for suksessstatus og bullet points. Til og med fordelingen var spesifisert – rundt 70 prosent lyst, 20 prosent mørkt, 7 prosent gult, 3 prosent grønt.
Jeg jobbet ikke med en «generer alt for meg»-tilnærming. Det var dialog. Jeg fikk et forslag, reagerte, justerte, fikk et nytt. Noen ganger sa jeg «for kaldt» eller «overskriftene trenger mer personlighet» og fikk tilpasninger tilbake. Prosessen minnet mer om å jobbe med en designer som lytter godt enn om å trykke på en knapp og håpe på det beste.
Brand guiden inkluderte til slutt ikke bare farger og skrifttyper, men også tonalitet, posisjonering og innholdsstrategi. «Struktur som virker. Digitalt som holder.» To setninger som oppsummerer hele nettsidens løfte – formulert i dialogen, ikke på forhånd. Det samme gjaldt lead magnet-strategien: en gratis sjekkliste via e-post, et nyhetsbrev annenhver uke med praktiske tips, og en direkte kontakt-CTA gjennom hele nettsiden. Alt vokste frem fra samtalen.
Det som fikk det til å fungere var at jeg visste hva jeg ville ha – men ikke nøyaktig hvordan det skulle se ut. Jeg hadde retningen. AI-en hadde verktøyene til å gi den form.
Fra brand guide til fungerende nettside
Prosjektet startet ikke fra null rent teknisk. Det fantes allerede et starter kit – et WordPress-fundament jeg hadde bygget for et annet prosjekt, med 20 egendefinerte blokker, en egen plugin med 8 moduler, og et Blocksy-barnetema. Alt bygget med CSS custom properties i stedet for hardkodede farger. Tanken var at hele arkitekturen kunne rebrandes ved å endre tre filer.
gothlin.no ble den første skikkelige testen på om den teorien holdt.
Og det er her koblingen blir interessant. Brand guiden som Claude hadde laget matet direkte inn i de tre filene som styrer hele designsystemet. Fargekodene havnet i theme.json. Typografivalgene i Blocksy-eksporten. Fallback-verdiene ble oppdatert i 22 CSS-filer. Hver var(--theme-palette-color-3, #1A2A3A) i koden peker på en plass i paletten – bytt paletten, og hver blokk tilpasser seg.
I praksis betydde det at gull ble gult, at Lora ble DM Serif Display, og at tonen skiftet fra generell til skandinavisk direkte. De 20 eksisterende blokkenes PHP-templates trengte ikke røres i det hele tatt. Plugin-modulene forble uendret. Det eneste som endret seg var det visuelle laget.
Teorien holdt.
14 nye blokker med Claude Code
Med brandet på plass begynte selve byggingen av de nettside-spesifikke delene. Hjemmesidens hero-seksjon, en lead magnet-blokk med blurrede forhåndsvisninger av en sjekkliste, en kontaktside med sidebar, bloggblokker for arkiv og enkeltinnlegg. 14 nye blokker totalt, pluss de 20 som ble rebrannet.
Nøkkelen i det arbeidet var en CLAUDE.md-fil – drøyt 500 linjer som beskriver hele prosjektets arkitektur. Filstruktur, navnekonvensjoner, CSS-variabler, kodestandarder, plugin-økosystem. I stedet for å forklare de samme tingene i hver ny samtale leser Claude Code den filen og forstår umiddelbart hvor filer skal ligge, hvilke mønstre som gjelder, hvordan blokker skal escapes.
Det er ikke «AI skrev koden for meg.» Det er mer at AI forsto arkitekturen og jeg guidet løsningene. Jeg beskrev hva en blokk skulle gjøre, hvilke felt den trengte, hvordan den skulle oppføre seg responsivt. Claude Code genererte templaten, stylingen og eventuell JavaScript. Jeg gjennomgikk, testet, ga tilbakemelding. Ny iterasjon.
Et konkret eksempel: hero-seksjonen på forsiden. Jeg beskrev en tokolonners layout med overskrift, undertekst, to CTA-knapper og et visuelt element. Claude Code opprettet blokken med støtte for <em>-tagger i overskriften (slik at enkeltord kan farges i Signal Yellow), en toggle mellom sentrert og tokolonners layout, og en animert SVG-diamant som flyter rundt med CSS-keyframes. Responsivt flyttes det visuelle elementet over teksten på mobil. Det hadde tatt meg en hel dag å bygge manuelt. Med AI som medbygger var det én økt.
Et annet eksempel: lead magnet-blokken. Venstre side med overskrift, bullet points og et Fluent Forms-skjema for e-postinnsamling. Høyre side med en forhåndsvisning av sjekklisten – men med deler som er blurret for å skape nysgjerrighet. Bullet points med uthevet tittel og beskrivelse, med støtte for linjeskift via wp_kses(nl2br()). Små detaljer, men detaljer som utgjør forskjellen mellom «fungerende» og «gjennomtenkt.»
Totalt gjennom prosjektet: 14 nye blokker bygget fra bunnen av, 20 eksisterende rebrannet, 2 nye plugin-moduler (scroll-animasjoner og miljøhåndtering), 7 ytelsesoptimaliseringer og 4 større feilrettinger.
Hva som gikk galt
AI-assistert betyr ikke problemfritt. Ting gikk i stykker. Flere ganger.
CTA-knapper mistet tekstfargen ved hover – teksten ble usynlig mot den gule bakgrunnen. Årsaken var at <a>-elementer ikke arver color ved hover slik man kanskje forventer. Enkel fiks når man først forstår årsaken, men det påvirket knapper i fire forskjellige blokker.
Skjemafelt fra Fluent Forms hadde ulik høyde avhengig av hvilken side de ble vist på. Spesifisitetskrig i CSS der blokkspesifikke !important-regler slo ut den globale fiksen. Løsningen ble ikke pen – flere !important-deklarasjoner – men nødvendig når en tredjeparts-plugin allerede bruker !important overalt.
Bildblokker krasjet gjentatte ganger fordi koden prøvde å aksessere $image[0]['url'] når Blockstudio returnerer bildedata direkte som $image['url']. En subtil forskjell som brakk tre blokker før mønsteret ble dokumentert i CLAUDE.md slik at det ikke gjentok seg.
Og editoren ble treg. Hver gang man endret et felt i en blokk rendret Blockstudio alle blokker på siden via REST-kall. Skjemablokker kjørte fullstendig Fluent Forms-rendering. Bloggblokker kjørte databasespørringer. Hvert tastetrykk genererte en kaskade av unødvendige operasjoner. Det krevde en gjennomgang av hele stacken – editor-guards som viser placeholdere i stedet for å rendre skjemaer, deaktivert lasting for databasetunge blokker, ekstern JavaScript i stedet for inline-script.
Feilsøkingen gikk raskere med AI som sparringspartner. Men problemene krevde fortsatt at jeg forsto hvorfor noe ikke fungerte – ikke bare hva som var feil.
Det som faktisk tok tid
Koden var ikke den vanskelige delen. Det var beslutningene. Hva skal nettsiden kommunisere? Hvilken følelse skal den gi? Hvordan skal besøkende ledes fra interesse til kontakt?
Brand guiden og mockup-arbeidet – det som skjedde før en eneste linje kode ble skrevet – var det som formet alt annet. Fargevalgene, typografien, tonaliteten, hele innholdsstrategien. Det arbeidet ble gjort i dialog med Claude, og det var der grunnlaget ble lagt. Uten det grunnlaget hadde kodingen gått like raskt, men resultatet hadde blitt en nettside som ser bra ut uten å bety noe.
Det finnes en lærdom i dette som jeg tror gjelder bredere enn bare nettprosjekter. AI akselererer eksekvering. Men eksekvering uten retning gir bare raskere kaos. Verdien ble ikke skapt av at Claude kunne generere kode eller fargepaletter – den ble skapt av at jeg visste nok om hva jeg ville til å kunne styre dialogen.
Nettsiden er live. Arkitekturen fungerer. Starter kit-konseptet beviste seg – bytt tre filer, og alt tilpasser seg. Nå gjenstår det som alltid gjenstår etter et bygg: å fylle det med innhold som betyr noe. Lead magnet, nyhetsbrev, publiseringsrytme.
Byggingen fortsetter. Jeg kommer tilbake med hvordan det går.
