Kan AI erstatte et designsystem?

Nei. Etter Funbits egen test vil vi si at designsystemet ble viktigere, ikke mindre viktig. Maskinen ble ikke overflødig, men designsystemet ble målestokken som avgjorde om AI-resultatet var til å stole på.

Hva er AI-generert UI?

Grensesnitt som et AI-verktøy lager fra en tekstbeskrivelse eller en skisse, i stedet for at en designer tegner hver skjerm manuelt i Figma. Du skriver inn hva siden skal gjøre, og ut kommer et ferdig grensesnitt med farger, knapper og avstander.

Hva er design-tokens?

Navngitte verdier for farge, avstand og typografi, for eksempel color-primary eller spacing-md, som brukes i stedet for faste tall. Endrer du tokenet ett sted, endres alt som peker på det.

Klarer AI å holde seg innenfor et designsystem?

Delvis. I Funbits test traff maskinen strukturen og de store linjene raskt, men detaljene skled. Der tokens hadde gode navn holdt AI-en seg pent innenfor. Der navngivningen var upresis, gjettet den, og gjettet feil.

Hvor mye raskere er AI enn å tegne UI manuelt?

Mye. Der en designer bruker en halv dag på å sette opp en førsteversjon, hadde Funbit noe å se på nesten med en gang. Strukturen satt og komponentene var gjenkjennelige.

Lønner det seg å investere i et designsystem i 2026?

Ja, og etter denne testen mer enn før. Et ryddig, godt navngitt system er verdt enda mer nå, ikke bare fordi mennesker bygger etter det, men fordi maskinene som hjelper til leser det bokstavelig.

Hvorfor er gode navn på tokens viktig når du bruker AI?

Fordi maskinen leser navnet, ikke pikselverdien. Der Funbit hadde vært slappe med navngivningen, gjettet AI-en. Et løst system gir løse resultater, uansett hvor smart verktøyet er.

Hva glapp da Funbit testet AI-generert UI mot eget designsystem?

Detaljene. Avstander som var litt for stramme, og en knappevariant Funbit egentlig hadde faset ut. Maskinen vet ikke hvilke valg dere har tatt og hvorfor, med mindre reglene er skrevet så tydelig at de ikke kan misforstås.

Hvorfor trenger jeg designsystem hvis AI kan lage skjermer på sekunder?

Fordi AI-en trenger noe å måles mot. Jo bedre oppskriftsboka er skrevet, jo mer nytte hadde maskinen av den. Designsystemet ble ikke overflødig, det ble det som avgjorde om verktøyet traff.

Hvordan tester jeg om AI klarer å bygge etter designsystemet mitt?

Funbit ga AI-verktøyet tilgang til komponentene, fargene og avstandene fra designsystemet i Figma, og ba det bygge kjente skjermer som et skjema, et kort og en oversiktsside. Så sjekket de om maskinen holdt seg innenfor rammene.

Hva er forskjellen på et designsystem og pene skjermbilder?

Et designsystem er ikke en samling pene skjermbilder. Det er reglene under, altså farger, avstander, typografi og oppførsel definert ett sted. Skjermbildene er resultatet, systemet er oppskriften.

Forside
|
Blogg
|
Designsystem møter AI-ge…

Vi ga et AI-verktøy vårt eget designsystem

Verktøy som spytter ut ferdig grensesnitt fra en setning har blitt gode. Så gode at flere kunder spør oss om de trenger et designsystem lenger. Vi matet vårt eget Figma-oppsett inn i et slikt verktøy for å se hva som faktisk skjer.

Tett og smidig samarbeid mellom utvikling og design hos Funbit, med en smilende UX-designer i forgrunnen

Av

Marianne Lyssand

Publisert

31. august 2026

Tjenester

Ferdigheter

Kan en maskin tegne grensesnittet ditt?

Så sitter du der, da. En knapp, en skjermbeskrivelse, tre setninger om hva siden skal gjøre. Du skriver det inn i et AI-verktøy, trykker enter, og ut kommer et ferdig grensesnitt. Farger, knapper, avstander, det hele. Magisk? Litt, faktisk.

Men så begynner spørsmålene å melde seg. Er knappene like høye som de skal være? Bruker den fargen dere faktisk har bestemt dere for, eller en nabo som er nesten lik? Og viktigst av alt: trenger dere i det hele tatt et designsystem lenger, når en maskin kan spytte ut skjermbilder på sekunder?

Det er dette vi ville finne ut av. Vi tok vårt eget designsystem i Figma, matet det inn i et AI-verktøy, og så etter én ting: klarer maskinen å holde seg innenfor rammene vi allerede har satt?

Hva et designsystem egentlig er

Før vi går videre er det verdt å ha med seg hva vi snakker om. Et designsystem er ikke en samling pene skjermbilder. Det er reglene under. Hvilke farger som finnes og hva de heter, hvor mye luft det skal være rundt en knapp, hvilke skriftstørrelser som er lov, hvordan et skjema oppfører seg når noen skriver feil.

Tenk på det som en oppskriftsbok. Ikke selve kaken, men målene og trinnene som gjør at kaken blir lik hver gang, uansett hvem på kjøkkenet som lager den. En designer i Bergen og en utvikler i Stavanger skal kunne bygge samme knapp uten å ringe hverandre. Det er hele poenget.

Og det er nettopp her spørsmålet blir interessant. For hvis en AI kan generere hele grensesnitt fra en beskrivelse, hva skjer med oppskriftsboka? Blir den overflødig, eller blir den viktigere enn før?

Tre begreper før vi går videre

Designsystem: Samlingen av regler, komponenter og verdier som holder et grensesnitt konsistent. Farger, avstander, typografi og oppførsel, definert ett sted.
Design tokens: Navngitte verdier for ting som farge og avstand, for eksempel farge-primær eller avstand-medium. Maskiner leser navnet, ikke pikselverdien, og det gjør reglene mulig å håndheve.
AI-generert UI: Grensesnitt som et AI-verktøy lager fra en tekstbeskrivelse eller en skisse, i stedet for at en designer tegner hver skjerm manuelt i Figma.

Vi matet maskinen vårt Figma-system

Så til selve testen. Vi ga AI-verktøyet tilgang til komponentene, fargene og avstandene fra designsystemet vårt, og ba det bygge noen skjermer vi kjenner godt fra før. Et skjema, et kort, en oversiktsside. Ting vi har laget for hånd mange ganger.

Første inntrykk? Fart. Det gikk unna. Der en designer bruker en halv dag på å sette opp en førsteversjon, hadde vi noe å se på nesten med en gang. Strukturen satt, komponentene var gjenkjennelige, og det lignet påfallende mye på noe vi kunne ha tegnet selv.

Men jo lenger vi kikket, jo mer så vi. Maskinen kom langt på egen hånd, og så stoppet det litt opp. Den traff strukturen og de store linjene, men detaljene begynte å skli. En avstand som var litt for stram her. En knappevariant vi egentlig hadde faset ut der. Vår erfaring var at verktøyet gjorde grovarbeidet raskt, men at en god del rydding lå igjen og ventet på oss.

Der det skled ut

Hva var det som glapp, konkret? Etter vår vurdering handlet det meste om detaljene et menneske ikke tenker over, men som en bruker merker uten å vite hvorfor.

Avstandene var typiske. Designsystemet vårt har et sett faste verdier for luft rundt elementer, og de skal brukes slik de er, ikke omtrent. Maskinen valgte gjerne noe som var nesten riktig. Nesten er ikke godt nok når to kort ligger side om side og det ene puster litt annerledes enn det andre. Øyet ser det, selv om ingen klarer å sette ord på det.

Det samme gjaldt komponentvalg. AI-en grep av og til etter en variant vi hadde bestemt oss for å ikke bruke lenger. Ikke feil i seg selv, men feil for oss. Og det er kjernen: en maskin vet ikke hvilke valg dere har tatt og hvorfor, med mindre reglene er skrevet ned så tydelig at de ikke kan misforstås. Der navnene på tokens satt godt, holdt maskinen seg pent innenfor. Der vi hadde vært litt slappe med navngivningen, gjettet den, og gjettet feil.

AI-generert UI oppå et designsystem

Fordeler

Grovarbeidet går unna, du har en førsteversjon å reagere på nesten med en gang
Strukturen og de store linjene treffer ofte godt
Fungerer best som et startpunkt en designer bygger videre på, ikke et sluttprodukt
Tvinger deg til å rydde i designsystemet, siden maskinen avslører hvor reglene er utydelige

Ulemper

Detaljene sklir, avstander blir nesten riktige i stedet for riktige
Maskinen kjenner ikke historikken deres, og griper etter varianter dere har faset ut
Krever en runde med rydding etterpå, tiden dere sparer er ikke gratis
Uten tydelig navngitte tokens gjetter den, og den gjetter ikke alltid rett

Så trenger du systemet fortsatt?

Her er den korte versjonen: ja. Og etter denne testen vil vi si mer enn før, ikke mindre.

Tenk på det slik. Jo bedre oppskriftsboka er skrevet, jo mer nytte hadde maskinen av den. Der reglene var tydelige og tokens hadde gode navn, holdt AI-en seg pent innenfor. Der vi hadde vært upresise, gjettet den. Designsystemet ble altså ikke overflødig av AI-verktøyet. Det ble målestokken som avgjorde om verktøyet var til å stole på.

Vi jobber med designsystemer i Figma for kunder som skal ha et grensesnitt som henger sammen over tid, ofte på tvers av utvikling og design i samme prosjekt. Erfaringen vår er at et ryddig, godt navngitt system er verdt enda mer nå enn for et par år siden. Ikke bare fordi mennesker skal bygge etter det, men fordi maskinene som hjelper til, leser det bokstavelig. Et løst system gir løse resultater, uansett hvor smart verktøyet er.

Vanlige spørsmål

Hva er et designsystem?: Et designsystem er reglene under grensesnittet. Hvilke farger som finnes og hva de heter, hvor mye luft det skal være rundt en knapp, hvilke skriftstørrelser som er lov, og hvordan et skjema oppfører seg når noen skriver feil. Tenk på det som en oppskriftsbok, ikke selve kaken.
Kan AI erstatte et designsystem?: Nei. Etter Funbits egen test vil vi si at designsystemet ble viktigere, ikke mindre viktig. Maskinen ble ikke overflødig, men designsystemet ble målestokken som avgjorde om AI-resultatet var til å stole på.
Hva er AI-generert UI?: Grensesnitt som et AI-verktøy lager fra en tekstbeskrivelse eller en skisse, i stedet for at en designer tegner hver skjerm manuelt i Figma. Du skriver inn hva siden skal gjøre, og ut kommer et ferdig grensesnitt med farger, knapper og avstander.
Hva er design-tokens?: Navngitte verdier for farge, avstand og typografi, for eksempel color-primary eller spacing-md, som brukes i stedet for faste tall. Endrer du tokenet ett sted, endres alt som peker på det.
Klarer AI å holde seg innenfor et designsystem?: Delvis. I Funbits test traff maskinen strukturen og de store linjene raskt, men detaljene skled. Der tokens hadde gode navn holdt AI-en seg pent innenfor. Der navngivningen var upresis, gjettet den, og gjettet feil.
Hvorfor bommer AI på avstander i grensesnitt?: Designsystemet har faste verdier for luft rundt elementer, og de skal brukes slik de er, ikke omtrent. Maskinen valgte gjerne noe som var nesten riktig. Men nesten holder ikke når to kort ligger side om side og det ene puster litt annerledes enn det andre.
Hvor mye raskere er AI enn å tegne UI manuelt?: Mye. Der en designer bruker en halv dag på å sette opp en førsteversjon, hadde Funbit noe å se på nesten med en gang. Strukturen satt og komponentene var gjenkjennelige.
Lønner det seg å investere i et designsystem i 2026?: Ja, og etter denne testen mer enn før. Et ryddig, godt navngitt system er verdt enda mer nå, ikke bare fordi mennesker bygger etter det, men fordi maskinene som hjelper til leser det bokstavelig.
Hvorfor er gode navn på tokens viktig når du bruker AI?: Fordi maskinen leser navnet, ikke pikselverdien. Der Funbit hadde vært slappe med navngivningen, gjettet AI-en. Et løst system gir løse resultater, uansett hvor smart verktøyet er.
Hva glapp da Funbit testet AI-generert UI mot eget designsystem?: Detaljene. Avstander som var litt for stramme, og en knappevariant Funbit egentlig hadde faset ut. Maskinen vet ikke hvilke valg dere har tatt og hvorfor, med mindre reglene er skrevet så tydelig at de ikke kan misforstås.
Hvorfor trenger jeg designsystem hvis AI kan lage skjermer på sekunder?: Fordi AI-en trenger noe å måles mot. Jo bedre oppskriftsboka er skrevet, jo mer nytte hadde maskinen av den. Designsystemet ble ikke overflødig, det ble det som avgjorde om verktøyet traff.
Hvordan tester jeg om AI klarer å bygge etter designsystemet mitt?: Funbit ga AI-verktøyet tilgang til komponentene, fargene og avstandene fra designsystemet i Figma, og ba det bygge kjente skjermer som et skjema, et kort og en oversiktsside. Så sjekket de om maskinen holdt seg innenfor rammene.
Hva er forskjellen på et designsystem og pene skjermbilder?: Et designsystem er ikke en samling pene skjermbilder. Det er reglene under, altså farger, avstander, typografi og oppførsel definert ett sted. Skjermbildene er resultatet, systemet er oppskriften.