Slik designer du en pen app med AI

For å få en pen app fra AI må du slutte å be den om å «lage det fint» og begynne å gi den det en designer ville ønsket: to eller tre referanser du liker, en navngitt designretning og konkrete regler for typografi, farger og avstand. Bygg så én skjerm, finpuss den til den er riktig, og be AI-en bruke det samme systemet overalt ellers. Mye av det som kalles «AI-look» kommer av vage forespørsler som gir gjennomsnittlige svar. Spesifikt input gir spesifikk design.

Hvorfor AI-design ser generisk ut

Be en AI om «et moderne, rent SaaS-dashbord» og den gir deg den statistiske midten av alle dashbord den har sett: den samme sans-serif-skriften, en overgang fra lilla til blått, avrundede kort med myke skygger, ikoner i sirkler som ligner emojis og en sentrert hero som sier «Din arbeidsflyt, forenklet». Ingen av valgene er feil i seg selv. Problemet er at ingen av dem er valgt for ditt produkt.

God design består først og fremst av beslutninger. Jobben din er å ta de håndfull beslutningene som gir appen en karakter, og la AI-en ta de tusen små konsekvent.

Steg 1: Samle referanser før du spør

Bruk tjue minutter på å samle to til fire referanser — apper eller nettsider med et utseende som passer produktet ditt. Gode kilder er produkter målgruppen allerede bruker, designgallerier og nettsidene til selskaper i nærliggende bransjer.

For hver av dem skriver du ned hva du liker, med vanlige ord:

«Mye luft, innhold i en smal kolonne, små grå etiketter over store tall.»
«Tette tabeller med tynne skillelinjer, ingen skygger på kort, én aksentfarge for handlinger.»
«Store serif-overskrifter, varm off-white bakgrunn, fotografier i stedet for illustrasjoner.»

Gi disse beskrivelsene til AI-en, og legg ved skjermbilder hvis verktøyet tar imot bilder. Hent inspirasjon fra kvalitetene, ikke fra produktet: å kopiere et annet selskaps layout, merkevare eller tekst rett av er både en juridisk og en troverdighetsrisiko.

Steg 2: Velg en designretning og gi den et navn

En designretning er en kort beskrivelse av stemningen. Den gir AI-en et filter for alle beslutningene den tar. Noen som fungerer godt:

Retning	Typiske valg	Passer til
Rolig og minimalistisk	Nøytral palett, romslig avstand, én aksent, tynne kanter	Produktivitetsverktøy, økonomi, helse
Redaksjonell	Serif-overskrifter, sterk kontrast i typografien, store bilder, smale tekstkolonner	Porteføljer, publikasjoner, premiumtjenester
Tett og funksjonell	Kompakte rader, liten skrift, tabeller, tastaturvennlig	Interne verktøy, dashbord, admin-paneler
Varm og vennlig	Avrundede former, myke farger, illustrasjoner, større berøringsflater	Forbrukerapper, fellesskap, utdanning
Dristig og grafisk	Høy kontrast, store bokstaver, flate fargeblokker	Arrangementer, lanseringer, kreative merker

Legg den i den første prompten, sammen med hvem appen er for:

Bygg en bookingapp for et uavhengig yogastudio. Designretning: rolig og minimalistisk, som et trykt timeplan fra et studio. Varm off-white bakgrunn, nesten svart tekst og én dempet salviegrønn aksent for knapper og valgte tilstander. En serif til overskrifter, en ren sans-serif til brødtekst. Romslig avstand, ingen overganger, ingen skygger, ingen emojis. Mobil først.

Steg 3: Sett reglene — typografi, farger og avstand

Disse tre bærer mesteparten av den visuelle kvaliteten. Å være eksplisitt om dem er den største enkeltforbedringen du kan gjøre.

Typografi

Én eller to skrifttyper. En til overskrifter og en til brødtekst, eller én familie i flere vekter.
En typografisk skala. Et lite sett størrelser brukt konsekvent — for eksempel 14, 16, 20, 28 og 40 px — i stedet for at hver komponent velger sitt eget.
Lesbar brødtekst. Rundt 16 px på nett, en linjehøyde på omtrent 1,5 og en linjelengde på 60–75 tegn i lange tekster.
Hierarki gjennom vekt og størrelse, ikke farge. Overskrifter er fetere og større; sekundærtekst er mindre og en mykere grå.

Farger

Stort sett nøytrale. Bakgrunner, flater, kanter og gråtoner for tekst gjør mesteparten av jobben.
Én aksentfarge for handlinger og valgte tilstander. En andre bare hvis den har en tydelig oppgave.
Semantiske farger for suksess, advarsel og feil — og bare til det.
Kontrast. WCAG 2 krever et kontrastforhold på minst 4,5:1 for vanlig brødtekst og 3:1 for stor tekst. Lys grå tekst på hvit bakgrunn feiler ofte. Be AI-en sjekke.
Mørk modus, hvis du vil ha den, designet bevisst i stedet for bare invertert.

Avstand og layout

En avstandsskala, for eksempel 4, 8, 12, 16, 24, 32, 48, 64 px. Alt følger den.
Justering. Kanter står på linje; innhold ligger på et rutenett eller i en kolonne med konsekvent maksbredde.
Nærhet. Relaterte ting ligger nær hverandre, urelaterte lenger fra hverandre. Denne ene regelen løser de fleste rotete skjermer.
Færre containere. Ikke alt trenger et kort. Kanter, skillelinjer og luft kan gruppere innhold mer diskret.

En prompt som setter opp systemet én gang:

Før du bygger flere skjermer, sett opp et lite designsystem og bruk det overalt: en typografisk skala på 14/16/20/28/40 px, linjehøyde 1,5 for brødtekst, en avstandsskala på 4/8/12/16/24/32/48 px, nøytrale farger fra nesten hvitt til nesten svart, én aksentfarge (#3F6B5A) kun for primære handlinger, og rødt kun for feil. Knapper, inputfelt og kort skal dele samme kantradius. Sjekk at all tekst oppfyller WCAG AA-kontrast.

Hvis du jobber i et kodebevisst byggeverktøy, blir dette vanligvis til designtokens — CSS-variabler eller et Tailwind-tema — noe som betyr at senere endringer skjer på ett sted.

Steg 4: Bygg én skjerm skikkelig først

Ikke generer tolv skjermer og prøv deretter å fikse dem alle. Velg skjermen brukerne ser mest — ofte dashbordet eller hovedlisten — og finpuss den til den er riktig. Deretter:

Bruk dashbordet som referanse for alle andre sider: samme header, avstand, skriftstørrelser, knappestiler og tabellstil. Oppdater innstillings- og bookingsidene slik at de matcher.

En ferdig referanseskjerm formidler smaken din langt bedre enn noen adjektiver.

Steg 5: Iterer med spesifikke, små forespørsler

Tilbakemelding til en AI fungerer som tilbakemelding til en junior-designer: spesifikk, ett område om gangen og tydelig på hva som skal beholdes.

Vagt	Spesifikt
«Gjør det penere.»	«Øk plassen mellom seksjonene til 64 px, gjør sidetittelen 40 px og mykgjør sekundærteksten til en middels grå.»
«Det ser rotete ut.»	«Fjern kantene på statistikkraden, venstrejuster tallene og sett etikettene over dem i små kapitaler.»
«Få det til å poppe.»	«Bruk aksentfargen kun på primærknappen. Gjør sekundærknapper med kontur.»
«Forbedre mobilvisningen.»	«På telefonbredder: legg filtrene i et ark som åpnes fra en Filter-knapp, og gjør tabellrader om til kort.»

Legg alltid til hva som skal beholdes — «behold alle ruter, tekst og funksjoner likt» — slik at en visuell runde ikke stille fjerner funksjonalitet. Sjekk hver endring på en skjerm i telefonstørrelse før du ber om neste, og se hvordan du bygger en mobilvennlig webapp for hva som er bra på små skjermer.

Steg 6: Detaljene som skiller godt fra generisk

Når strukturen er riktig, gjør disse små tingene at en app føles ferdig:

Tomme tilstander. Det en ny bruker ser uten data: en kort forklaring og én tydelig handling, ikke en tom tabell.
Lastetilstander. Skjeletter som ligner innholdet, ikke spinnere overalt.
Feiltilstander. Feilmeldinger i klartekst, ved feltet som forårsaket dem.
Hover-, fokus- og trykkede tilstander på alle interaktive elementer. Fokusringer betyr mye for brukere som navigerer med tastatur.
Ekte innhold. Bytt ut «Lorem ipsum» og «Ola Nordmann» med realistisk tekst og data. Plassholderinnhold skjuler layoutproblemer.
Ikoner fra ett sett, i én eller to størrelser, med jevn linjetykkelse.
Bilder med et formål. Ekte bilder av produktet, stedet eller folk slår generiske stockbilder. Der du bruker stock eller genererte bilder, hold en konsekvent stil.
Tekst. Korte, presise knapper («Bestill time», ikke «Send») gjør like mye for oppfattet kvalitet som et fargevalg gjør.

Vanlige feil

Å redesigne alt i én forespørsel. Store omskrivinger gir regresjoner. Gå side for side.
For mange aksentfarger. Hvis alt er uthevet, er ingenting uthevet.
Å sentrere alt. Sentrert tekst er vanskelig å skumme utover en overskrift. Venstrejuster det meste av innholdet.
Liten tekst med lav kontrast som ser elegant ut på en stor skjerm og er uleselig på en telefon i sollys.
Dekor framfor hierarki. Overganger og skygger kan ikke rette opp en skjerm der den viktigste handlingen ikke er tydelig.
Å ignorere landingssiden. For mange produkter er den første inntrykket. Se hvordan du bygger en landingsside som konverterer.

For flere promptmønstre utenfor design, les hvordan du skriver prompts for AI-appbyggere. Hvis arbeidet ditt er produktet, for eksempel en design- eller fotoportefølje, går hvordan du bygger en porteføljenettside dypere på presentasjon.

Design med Mythex

I Mythex beskriver du designet i chatten, ser det i den levende forhåndsvisningen og sjekker rammen i telefonstørrelse før neste endring. Dokumentasjonen har korte mønstre for dette: design- og UI-prompts om å navngi hva som skal endres og hva som skal beholdes, og redesign av UI-en for å oppdatere én side om gangen uten å miste funksjoner. Mythex kan også søke etter stockbilder eller generere et bilde i chatten, for eksempel et heltebilde, en bakgrunn eller et delingsbilde, og legge det inn i appen når du ber om det. Hvis en runde går galt, gå tilbake til sjekkpunktet fra før den. Bla gjennom malene hvis du heller vil starte fra et eksisterende design og justere det.

Spørsmål

Hvorfor ser alle AI-designede apper like ut?

Fordi en vag prompt gir det mest gjennomsnittlige svaret: de samme skriftene, overgangene, avrundede kortene og den sentrerte heltedelen. Gi AI-en referanser, en navngitt designretning og konkrete regler for skrift, farger og avstand, så slutter resultatet å se generisk ut.

Kan jeg gi AI-en et skjermbilde for å kopiere en stil?

Mange AI-byggere tar imot bildevedlegg, og et skjermbilde er en av de tydeligste måtene å vise en stil på. Beskriv hva du liker med det — avstanden, skriften, bruken av farger — i stedet for å be om en kopi av andres produkt.

Trenger jeg en designer hvis jeg bygger med AI?

Ikke for en første versjon. En designer gir mest verdi når du har et merke å beskytte, eller et komplekst produkt der layoutvalg påvirker hvor godt folk kan bruke det. Inntil da gir tydelige referanser og små iterasjoner deg et rent, brukbart grensesnitt.

Hva får en app til å se profesjonell ut?

Konsistens mer enn dekor: én typografisk skala, en liten fargepalett brukt med hensikt, avstand på en fast skala, justerte kanter og tydelig hierarki, slik at det viktigste på hver skjerm er åpenbart.