Sådan designer du en flot app med AI

For at få en flot app fra AI skal du holde op med at bede den om at "gøre det pænt" og begynde at give den det, en designer ville have brug for: to eller tre referencer, du godt kan lide, en navngivet designretning og konkrete regler for typografi, farver og afstand. Byg derefter en skærm, ret den, til den er rigtig, og bed AI'en anvende det samme system alle andre steder. Det meste "AI-look" kommer af vage prompts, der giver gennemsnitlige svar; specifikt input giver specifikt design.

Hvorfor AI-design ser generisk ud

Bed en AI om "et moderne, rent SaaS-dashboard", og den giver dig det statistiske midtpunkt af alle dashboards, den har set: den samme sans-serif-skrifttype, en lilla-til-blå gradient, afrundede kort med bløde skygger, ikoner i cirkler, der minder om emojis, og en centreret hero-sektion med teksten "Din arbejdsgang, forenklet". Intet valg er forkert i sig selv. Problemet er, at ingen af dem er valgt til dit produkt.

Godt design handler mest om beslutninger. Din opgave er at træffe de håndfulde beslutninger, der giver appen en karakter, og lade AI'en tage de tusinde små beslutninger konsekvent.

Trin 1: Saml referencer, før du prompter

Brug tyve minutter på at finde to til fire referencer — apps eller hjemmesider, hvis look passer til dit produkt. Gode kilder er produkter, din målgruppe allerede bruger, designgallerier og hjemmesider fra virksomheder i tilstødende brancher.

Skriv for hver af dem, hvad du kan lide, med almindelige ord:

• "Masser af luft, indhold i en smal kolonne, små grå labels over store tal."
• "Tætte tabeller med tynde skillelinjer, ingen kortskygger og én accentfarve til handlinger."
• "Store serif-overskrifter, varm off-white baggrund, fotografier frem for illustrationer."

Giv derefter AI'en disse beskrivelser, og vedhæft skærmbilleder, hvis dit værktøj accepterer billeder. Lad dig inspirere af kvaliteterne, ikke af produktet: at kopiere en anden virksomheds layout, brand eller tekst i sin helhed er både en juridisk og en troværdighedsmæssig risiko.

Trin 2: Vælg en designretning, og giv den et navn

En designretning er en kort beskrivelse af følelsen. Den giver AI'en et filter for alle de beslutninger, den træffer. Nogle, der fungerer godt:

Sæt den i den første prompt sammen med, hvem appen er til:

Byg en bookingapp til et uafhængigt yogastudie. Designretning: rolig og minimal, som et trykt studieskema. Varm off-white baggrund, næsten sort tekst og én dæmpet salvie-grøn accent til knapper og valgte tilstande. En serif til overskrifter og en ren sans-serif til brødtekst. God luft, ingen gradienter, ingen skygger, ingen emojis. Mobilfokuseret.

Trin 3: Sæt reglerne — typografi, farver og afstand

Disse tre bærer det meste af den visuelle kvalitet. At være eksplicit om dem er den enkeltstørste forbedring, du kan lave.

Typografi

• En eller to skrifttyper. En overskriftsskrift og en brødtekstskrift, eller én familie i flere vægte.
• En typografisk skala. Et par størrelser brugt konsekvent — for eksempel 14, 16, 20, 28 og 40 px — i stedet for at hver komponent vælger, hvad den vil.
• Læsbar brødtekst. Omkring 16 px på nettet, en linjehøjde på cirka 1,5 og en linjelængde på 60–75 tegn i længere tekst.
• Hierarki gennem vægt og størrelse, ikke farve. Overskrifter fede og større; sekundær tekst mindre og blødere grå.

Farver

• Overvejende neutrale farver. Baggrunde, flader, kanter og tekstgråtoner gør det meste af arbejdet.
• Én accentfarve til handlinger og valgte tilstande. En anden kun hvis den har en klar opgave.
• Semantiske farver til succes, advarsel og fejl — og kun brugt til netop dem.
• Kontrast. WCAG 2 kræver et kontrastforhold på mindst 4,5:1 for normal brødtekst og 3:1 for stor tekst. Lysegrå tekst på hvid fejler ofte; bed AI'en om at tjekke.
• Mørk tilstand, hvis du ønsker den, designet bevidst og ikke blot inverteret.

Afstand og layout

• En afstandsskala som 4, 8, 12, 16, 24, 32, 48, 64 px. Alt flugter med den.
• Justering. Kanter flugter; indhold ligger på et grid eller i en fast maksbredde-kolonne.
• Nærhed. Relaterede ting tæt sammen, urelaterede ting længere fra hinanden. Denne ene regel retter de fleste rodede skærme.
• Færre containere. Ikke alt behøver et kort. Kanter, skillelinjer og hvidt rum kan ofte gruppere indhold mere roligt.

En prompt, der opsætter systemet én gang:

Før du bygger flere skærme, så opsæt et lille designsystem og brug det overalt: en typografisk skala på 14/16/20/28/40 px, linjehøjde 1,5 til brødtekst, en afstandsskala på 4/8/12/16/24/32/48 px, neutrale farver fra næsten hvid til næsten sort, én accentfarve (#3F6B5A) kun til primære handlinger, og rød kun til fejl. Knapper, inputfelter og kort skal dele samme hjørneradius. Tjek at al tekst opfylder WCAG AA-kontrast.

Hvis du arbejder i en kodebevidst builder, bliver det typisk til designtokens — CSS-variabler eller et Tailwind-tema — hvilket betyder, at senere ændringer sker ét sted.

Trin 4: Byg én skærm ordentligt først

Generer ikke tolv skærme og prøv så at rette dem alle. Vælg den skærm, brugerne ser mest — ofte dashboardet eller hovedlisten — og itérér, til den er rigtig. Derefter:

Brug dashboardet som reference for alle andre sider: samme header, afstand, typografiske størrelser, knapstile og tabelstil. Opdater Indstillinger- og Bookinger-siderne, så de matcher.

En færdig referenceskærm udtrykker din smag langt bedre end ethvert adjektiv.

Trin 5: Itérér med specifikke, små anmodninger

Feedback til en AI fungerer som feedback til en junior-designer: specifik, ét område ad gangen og tydelig om, hvad der skal beholdes.

Tilføj altid, hvad der skal beholdes — "behold alle ruter, tekster og funktioner uændrede" — så et visuelt gennemsyn ikke stille og roligt fjerner funktionalitet. Og tjek hver ændring på en skærm i telefonstørrelse, før du beder om den næste; se sådan bygger du en mobilvenlig webapp for, hvordan god kvalitet ser ud på små skærme.

Trin 6: Detaljerne, der adskiller det gode fra det generiske

Når strukturen er rigtig, får disse små ting en app til at føles færdig:

• Tomme tilstande. Hvad en ny bruger ser uden data: en kort forklaring og én tydelig handling, ikke en tom tabel.
• Indlæsningstilstande. Skeletter formet som indholdet, ikke spinnere overalt.
• Fejltilstande. Beskeder i almindeligt sprog ved det felt, der forårsagede dem.
• Hover-, fokus- og trykket tilstand på alle interaktive elementer — fokusringe betyder noget for tastaturbrugere.
• Rigtigt indhold. Erstat "Lorem ipsum" og "John Doe" med realistisk tekst og data; pladsholderindhold skjuler layoutproblemer.
• Ikoner fra ét sæt, i én eller to størrelser, med ensartet stregtykkelse.
• Billeder med et formål. Rigtige fotos af dit produkt, sted eller mennesker slår generiske stockbilleder. Hvis du bruger stock eller genererede billeder, så hold en ensartet stil.
• Tekst. Korte, specifikke labels ("Book hold", ikke "Send") gør lige så meget for den opfattede kvalitet som ethvert farvevalg.

Almindelige fejl

• At redesigne alt i én prompt. Store omskrivninger introducerer regressioner. Gå side for side.
• For mange accentfarver. Hvis alt er fremhævet, er intet fremhævet.
• At centrere alt. Centreret tekst er svær at scanne ud over en overskrift; venstrejuster det meste indhold.
• Lille tekst med lav kontrast, der ser elegant ud på en stor skærm og er ulæselig på en telefon i solskin.
• Dekoration frem for hierarki. Gradienter og skygger kan ikke rette en skærm, hvor den vigtigste handling ikke er tydelig.
• At ignorere landingssiden. For mange produkter er den første indtryk; se sådan bygger du en landingsside, der konverterer.

For flere prompt-mønstre ud over design, læs sådan skriver du prompts til AI-app-builders. Hvis dit arbejde er selve produktet — en design- eller fotoportefølje — går sådan bygger du en porteføljehjemmeside dybere i præsentationen.

Design med Mythex

I Mythex beskriver du designet i chatten, ser det i den live forhåndsvisning og tjekker rammen i telefonstørrelse, før næste ændring. Dokumentationen har korte mønstre til det: design- og UI-prompts om at navngive, hvad der skal ændres, og hvad der skal beholdes, og redesign din UI til at opfriske én side ad gangen uden at miste funktioner. Mythex kan også søge stockfotos eller generere et billede i chatten — et hero-billede, en baggrund, et delingsbillede — og placere det i appen, når du beder om det. Hvis et forsøg går galt, så gå tilbage til checkpointet fra før. Kig i skabelonerne, hvis du hellere vil starte fra et eksisterende design og tilpasse det.

Spørgsmål