Gothlin.no var klar innan jag skrev en enda rad kod. Inte sajten i sig – men bilden av sajten. Mockups, brand guide, färgpalett, typografi, tonalitet. Allt det som avgör om en sajt känns genomtänkt eller hopslängd. Det togs fram i dialog med Claude, utifrån en logotyp och några enkla meningar om vad jag ville att sajten skulle utstråla.

Det är den delen av bygget som förvånade mig mest. Inte att AI kunde hjälpa till med kod – det hade jag redan erfarenhet av. Utan att hela den visuella grunden kunde växa fram ur en konversation.

En logotyp och några meningar

Vad jag faktiskt gav AI:n att jobba med var inte särskilt mycket. En befintlig logotyp – i stort sett oförändrad sedan tidigare – och ett par riktlinjer. Direkt, lugnt, praktiskt. Skandinavisk känsla. Kompetens som visas genom arbetet, inte genom att skryta.

Det som kom tillbaka var en komplett brand guide. Typografival med DM Serif Display för rubriker – varmt och auktoritativt utan att bli stelt. DM Sans för brödtext, JetBrains Mono för kodexempel och metadata. Ett färgsystem byggt kring Nordblå som primärfärg och Signal Yellow som accent, med ett accentgrönt för framgångsstatus och bullet points. Till och med fördelningen var specificerad – runt 70 procent ljust, 20 procent mörkt, 7 procent gult, 3 procent grönt.

Jag jobbade inte med ett ”generera allt åt mig”-angreppssätt. Det var dialog. Jag fick ett förslag, reagerade, justerade, fick ett nytt. Ibland sa jag ”för kallt” eller ”rubrikerna behöver mer personlighet” och fick anpassningar tillbaka. Processen påminde mer om att jobba med en designer som lyssnar bra än om att trycka på en knapp och hoppas på det bästa.

Brand guiden inkluderade till slut inte bara färger och typsnitt utan också tonalitet, positionering och content-strategi. ”Struktur som virker. Digitalt som holder.” Två meningar som sammanfattar hela sajtens löfte – formulerade i dialogen, inte på förhand. Samma sak med lead magnet-strategin: en gratis checklista via e-post, ett nyhetsbrev varannan vecka med praktiska tips, och en direkt kontakt-CTA genom hela sajten. Allt det växte fram ur konversationen.

Det som fick det att fungera var att jag visste vad jag ville ha – men inte exakt hur det skulle se ut. Jag hade riktningen. AI:n hade verktygen att ge den form.

Från brand guide till fungerande sajt

Projektet startade inte från noll rent tekniskt. Det fanns redan ett starter kit – en WordPress-grund jag byggt för ett annat projekt, med 20 custom block, ett eget plugin med 8 moduler, och ett Blocksy-barntema. Allt byggt med CSS custom properties istället för hårdkodade färger. Tanken var att hela arkitekturen skulle kunna rebrandas genom att ändra tre filer.

gothlin.no blev det första riktiga testet av om den teorin höll.

Och det är här kopplingen blir intressant. Brand guiden som Claude hade tagit fram matade direkt in i de tre filerna som styr hela designsystemet. Färgkoderna hamnade i theme.json. Typografivalen i Blocksy-exporten. Fallback-värdena uppdaterades i 22 CSS-filer. Varje var(--theme-palette-color-3, #1A2A3A) i koden pekar på en plats i paletten – byt paletten, och varje block anpassar sig.

I praktiken innebar det att guld blev gult, att Lora blev DM Serif Display, och att tonen skiftade från generell till skandinaviskt direkt. De 20 befintliga blockens PHP-templates behövde inte röras alls. Plugin-modulerna förblev oförändrade. Det enda som ändrades var det visuella skiktet.

Teorin höll.

14 nya block med Claude Code

Med brandet på plats började själva byggandet av de sajt-specifika delarna. Hemsidans hero-sektion, ett lead magnet-block med blurrade förhandsvisningar av en checklista, en kontaktsida med sidebar, bloggblock för arkiv och enskilda inlägg. 14 nya block totalt, plus de 20 som rebrandades.

Nyckeln i det arbetet var en CLAUDE.md-fil – drygt 500 rader som beskriver hela projektets arkitektur. Filstruktur, namnkonventioner, CSS-variabler, kodstandarder, plugin-ekosystem. Istället för att förklara samma saker i varje ny konversation läser Claude Code den filen och förstår omedelbart var filer ska ligga, vilka mönster som gäller, hur block ska escapas.

Det är inte ”AI skrev koden åt mig.” Det är mer att AI förstod arkitekturen och jag guidade lösningarna. Jag beskrev vad ett block skulle göra, vilka fält det behövde, hur det skulle bete sig responsivt. Claude Code genererade templaten, stylingen och eventuell JavaScript. Jag granskade, testade, gav feedback. Ny iteration.

Ett konkret exempel: hero-sektionen på startsidan. Jag beskrev en tvåkolumnslayout med rubrik, undertext, två CTA-knappar och ett visuellt element. Claude Code skapade blocket med stöd för <em>-taggar i rubriken (så att enstaka ord kan färgas i Signal Yellow), en toggle mellan centrerad och tvåkolumnslayout, och en animerad SVG-diamant som flyter runt med CSS-keyframes. Responsivt lyfts det visuella elementet ovanför texten på mobil. Det hade tagit mig en hel dag att bygga manuellt. Med AI som medbyggare var det en session.

Ett annat exempel: lead magnet-blocket. Vänster sida med rubrik, bullet points och ett Fluent Forms-formulär för e-postinsamling. Höger sida med en förhandsvisning av checklistan – men med delar blurrade för att skapa nyfikenhet. Bullet points med fetstilad titel och beskrivning, med stöd för radbrytningar via wp_kses(nl2br()). Små detaljer, men detaljer som gör skillnaden mellan ”fungerande” och ”genomtänkt.”

Totalt under projektet: 14 nya block byggda från scratch, 20 befintliga rebrandade, 2 nya plugin-moduler (scroll-animationer och miljöhantering), 7 prestandaoptimeringar och 4 större buggfixar.

Vad som gick fel

AI-assisterat betyder inte problemfritt. Saker gick sönder. Flera gånger.

CTA-knappar tappade sin textfärg vid hover – texten blev osynlig mot den gula bakgrunden. Anledningen var att <a>-element inte ärver color vid hover som man kanske förväntar sig. Enkel fix när man väl förstår orsaken, men det påverkade knappar i fyra olika block.

Formulärfält från Fluent Forms hade olika höjd beroende på vilken sida de visades på. Specificitets-krig i CSS där block-specifika !important-regler slog ut den globala fixen. Lösningen blev inte vacker – fler !important-deklarationer – men nödvändig när ett tredjeparts-plugin redan använder !important överallt.

Bildblock kraschade upprepade gånger för att koden försökte komma åt $image[0]['url'] när Blockstudio returnerar bilddata direkt som $image['url']. En subtil skillnad som bröt tre block innan mönstret dokumenterades i CLAUDE.md så att det inte upprepades.

Och editorn blev seg. Varje gång man ändrade ett fält i ett block renderade Blockstudio om alla block på sidan via REST-anrop. Formulärblock körde fullständig Fluent Forms-rendering. Bloggblock körde databasfrågor. Varje knapptryck genererade en kaskad av onödiga operationer. Det krävde en genomgång av hela stacken – editor-guards som visar placeholders istället för att rendera formulär, inaktiverad laddning för databastunga block, extern JavaScript istället för inline-script.

Felsökningen gick snabbare med AI som bollplank. Men problemen krävde fortfarande att jag förstod varför något inte fungerade – inte bara vad som var fel.

Det som faktiskt tog tid

Koden var inte den svåra delen. Det var besluten. Vad ska sajten kommunicera? Vilken känsla ska den ge? Hur ska besökaren ledas från intresse till kontakt?

Brand guiden och mockups-arbetet – det som hände innan en enda rad kod skrevs – var det som formade allt annat. Färgvalen, typografin, tonaliteten, hela content-strategin. Det arbetet gjordes i dialog med Claude, och det var där grunden lades. Utan den grunden hade kodandet gått lika snabbt, men resultatet hade blivit en sajt som ser bra ut utan att betyda något.

Det finns en lärdom i det som jag tror gäller bredare än just webbprojekt. AI accelererar exekvering. Men exekvering utan riktning ger bara snabbare kaos. Värdet skapades inte av att Claude kunde generera kod eller färgpaletter – det skapades av att jag visste tillräckligt om vad jag ville för att kunna styra dialogen.

Sajten är live. Arkitekturen fungerar. Starter kit-konceptet bevisade sig – byt tre filer, och allt anpassar sig. Nu återstår det som alltid återstår efter ett bygge: att fylla det med innehåll som betyder något. Lead magnet, nyhetsbrev, publiceringsrytm.

Bygget fortsätter. Jag återkommer med hur det går.