Slik bygde vi ny nettside med AI — fra research til lansering
Da vi bygde vår nye nettside brukte vi AI som støtteverktøy gjennom prosessen — ikke for å erstatte fagarbeidet, men for å frigjøre mer tid til design og strategi. Her er en konkret gjennomgang av hvordan.
Vi har nettopp lansert en ny nettside. Designet, kodet og skrevet innhold — med AI som støtteverktøy underveis. Ikke fordi AI gjør jobben for oss, men fordi det frigjør tid til det vi faktisk er best på: design og strategi.
Dette er ikke en artikkel om hva AI kan gjøre i teorien. Det er en konkret gjennomgang av hvordan vi faktisk brukte det. Hva som fungerte, hva vi måtte justere, og hva vi tar med oss videre.
Landskapet endrer seg mens du jobber
La oss starte med en viktig erkjennelse: AI-verktøyene utvikler seg raskere enn du klarer å lage rutiner for dem. Bare den siste måneden har vi endret arbeidsflyten vår flere ganger — ikke fordi den forrige var dårlig, men fordi nye muligheter dukket opp som gjorde prosessen bedre.
Det betyr at denne artikkelen beskriver hvordan vi jobbet nå. Om seks måneder vil deler av dette sannsynligvis se annerledes ut. Og det er greit. Poenget er ikke å finne én perfekt prosess — det er å bygge en kultur der du kontinuerlig evaluerer og forbedrer måten du jobber på.
Steg 1: Research — grunnlaget for alt
Før vi åpnet Figma eller skrev en eneste linje kode, startet vi med research. Vi bygde opp en kontekst som definerte:
- Tone of voice — Hvordan skal Big Fish høres ut? Direkte, kunnskapsrik uten å belære, konkret og menneskelig.
- Markedsstrategi — Hvem snakker vi til? Hva er smertepunktene deres? Hva skiller oss fra konkurrentene?
- SEO-analyse — Hvilke søkeord er viktige? Hvor har vi hull i innholdet? Hva rangerer konkurrentene på som vi ikke gjør?
- Innholdsstruktur — Hvilke sider trenger vi? Hvordan henger de sammen?
AI hjalp oss med å analysere konkurrentenes nettsider, identifisere innholdsgap og bygge en strukturert kontekst vi kunne bruke gjennom hele prosjektet. Denne konteksten — et dokument som beskriver merkevaren, målgruppen og strategien — ble referansepunktet for alt innhold vi produserte videre.
Det er her mange hopper over og går rett på design. Men uten dette grunnlaget skriver du tekster i blinde og designer uten retning.
Steg 2: Fra research til wireframe med ekte innhold
Med strategien på plass gikk vi til Figma. Men ikke på den tradisjonelle måten.
Vi brukte Claude sammen med Figma MCP til å generere wireframes som utgangspunkt. I stedet for å starte med et helt blankt lerret, fikk vi et fundament å jobbe videre fra — med reelle tekster basert på research-konteksten vår, ikke Lorem Ipsum.
Det ga oss et startpunkt vi kunne ta videre med en gang. Når du har faktisk innhold å forholde deg til fra dag én, ser du umiddelbart om en seksjon fungerer — ikke bare visuelt, men innholdsmessig. Det endrer dynamikken.
Alt designarbeid er gjort av oss — vi er profesjonelle grafiske designere, og design er ikke noe AI gjør bedre enn mennesker i dag. Men når vi designer med realistisk innhold i stedet for plassholdertekst, tar vi bedre beslutninger. AI ga oss grunnmuren. Vi bygde huset.
Steg 3: Fra design til kode
Når designet var klart, satte vi opp utviklingsmiljøet. Her brukte vi AI til å:
- Sette opp prosjektstrukturen — Next.js med App Router, Sanity CMS, Tailwind CSS
- Oversette designtokens — Farger, typografi og spacing fra Figma ble automatisk konvertert til CSS-variabler og Tailwind-konfigurasjon
- Bygge komponenter — Fra Figma-design til React-komponenter med riktige klasser og struktur
Den tekniske oversettelsen fra design til kode er tradisjonelt en av de mest tidkrevende delene av et nettsideprosjekt. Med AI som sparringspartner frigjorde vi tid vi ellers ville brukt på oppsett og boilerplate — tid vi i stedet brukte på å finjustere design, forbedre brukeropplevelsen og styrke innholdsstrategien.
Steg 4: Innholdsmigrasjon — den store testen
Her kom den virkelige prøven. Vi hadde en eksisterende nettside med prosjekter, artikler og tjenestesider som alle skulle over på den nye plattformen. Manuelt ville dette tatt uker.
Prosessen vår så slik ut:
- Hente innhold fra den gamle nettsiden — Vi koblet oss til WordPress-backenden via GraphQL og hentet all eksisterende tekst, bilder og metadata.
- Prosessere med kontekst — Hvert innholdselement ble kjørt gjennom vår research, SEO-analyse og markedsstrategi. Tekster ble omskrevet til vår nye tone of voice, SEO-metadata ble generert, og innholdet ble strukturert etter den nye informasjonsarkitekturen.
- Publisere i Sanity — Det prosesserte innholdet ble automatisk lagt inn i Sanity CMS med riktige referanser, kategorier og relasjoner.
- Sette opp redirects — Alle gamle URL-er fikk 301-redirects til de nye, slik at vi bevarte SEO-verdien og unngikk døde lenker.
For prosjektene våre betydde dette at to gamle prosjektsider for samme klient ble slått sammen til én — med oppdatert tekst, ny struktur og riktige koblinger til tjenester og sitat. For artikler ble gamle tekster oppgradert med ny vinkling og bedre SEO-optimalisering.
Denne prosessen frigjør tid vi ellers ville brukt på manuelt kopier-og-lim-arbeid. Tid vi heller bruker på å kvalitetssikre innholdet og forbedre presentasjonen.
Hva vi lærte
AI er et verktøy, ikke en erstatning
Det høres kanskje opplagt ut, men det er verdt å understreke. AI-en tok ikke beslutninger for oss. Den ga oss bedre utgangspunkt og frigjorde tid fra repetitivt arbeid — tid vi brukte på design, strategi og kvalitetssikring. Den kreative retningen, den visuelle utformingen og den strategiske tenkningen var vårt ansvar hele veien. AI gjorde oss mer effektive, ikke overflødige.
