Så designar du en snygg app med AI
För att få en snygg app av AI ska du sluta be den att ”göra det snyggt” och börja ge den det en designer skulle vilja ha: två eller tre referenser du gillar, en namngiven designriktning och konkreta regler för typografi, färg och avstånd. Bygg sedan en skärm, fixa den tills den är rätt och låt AI:n tillämpa samma system på resten. Mycket av ”AI-looken” kommer från vaga prompter som ger genomsnittliga svar. Specifik input ger specifik design.
Varför AI-design ser generisk ut
Be AI:n om ”en modern, ren SaaS-instrumentpanel” och du får den statistiska mitten av alla instrumentpaneler den har sett: samma sans-serif-typsnitt, en lila-till-blå gradient, rundade kort med mjuka skuggor, emoji-liknande ikoner i cirklar och en centrerad hero med texten ”Your workflow, simplified”. Inget enskilt val är fel. Problemet är att inget av dem valts för just din produkt.
Bra design handlar främst om beslut. Ditt jobb är att fatta de få beslut som ger appen en karaktär, och låta AI:n göra de tusentals små besluten konsekvent.
Steg 1: Samla referenser innan du prompter
Lägg tjugo minuter på att samla två till fyra referenser: appar eller webbplatser vars utseende passar din produkt. Bra källor är produkter din målgrupp redan använder, designgallerier och webbplatser från närliggande branscher.
Skriv för varje referens ner vad du gillar, med egna ord:
- ”Mycket vitt utrymme, innehåll i en smal kolumn, små grå etiketter ovanför stora siffror.”
- ”Täta tabeller med tunna avdelare, inga kortskuggor, en accentfärg för åtgärder.”
- ”Stora serifrubriker, varmt off-white bakgrund, fotografi i stället för illustrationer.”
Skicka sedan beskrivningarna till AI:n och bifoga skärmbilder om verktyget tar emot bilder. Hämta inspiration från kvaliteterna, inte från produkten. Att kopiera en annan företags layout, varumärke eller text rakt av är både en juridisk och en trovärdighetsrisk.
Steg 2: Välj en designriktning och ge den ett namn
En riktning är en kort beskrivning av känslan. Den ger AI:n ett filter för varje beslut. Några som fungerar bra:
| Riktning | Typiska val | Passar |
|---|---|---|
| Lugn och minimal | Neutral palett, generöst utrymme, en accent, tunna kanter | Produktivitetsverktyg, ekonomi, hälsa |
| Redaktionell | Serifrubriker, stark typkontrast, stora bilder, smala textkolumner | Portfolios, publikationer, premiumtjänster |
| Tät och funktionell | Kompakta rader, liten text, tabeller, tangentbordsvänlig | Interna verktyg, instrumentpaneler, adminpaneler |
| Varm och vänlig | Rundade former, mjuka färger, illustrationer, större träffytor | Konsumentappar, gemenskaper, utbildning |
| Djärv och grafisk | Hög kontrast, stor text, platta färgblock | Evenemang, lanseringar, kreativa varumärken |
Ta med den i första prompten, tillsammans med vem appen är till för:
Bygg en bokningsapp för en oberoende yogastudio. Designriktning: lugn och minimal, som ett tryckt studioschema. Varmt off-white bakgrund, nästan svart text och en dämpad salviagrön accent för knappar och valda tillstånd. En serif för rubriker och en ren sans-serif för brödtext. Generöst avstånd, inga gradienter, inga skuggor, ingen emoji. Mobile first.
Steg 3: Sätt reglerna för typografi, färg och avstånd
Dessa tre bär största delen av den visuella kvaliteten. Att vara tydlig med dem är den enskilt största förbättringen du kan göra.
Typografi
- Ett eller två typsnitt. Ett rubrik- och ett brödtextsnitt, eller en familj i flera vikter.
- En typografisk skala. Några storlekar som används konsekvent, till exempel 14, 16, 20, 28 och 40 px, i stället för att varje komponent väljer själv.
- Läsbar brödtext. Runt 16 px på webben, en radhöjd på ungefär 1,5 och en radlängd på cirka 60–75 tecken i längre text.
- Hierarki genom vikt och storlek, inte färg. Rubriker tjockare och större, sekundär text mindre och mjukare grå.
Färg
- Mestadels neutrala färger. Bakgrunder, ytor, kanter och textgråtoner gör större delen av jobbet.
- En accentfärg för åtgärder och valda tillstånd. En andra bara om den har ett tydligt syfte.
- Semantiska färger för lyckat, varning och fel, och bara för just det.
- Kontrast. WCAG 2 kräver ett kontrastförhållande på minst 4,5:1 för normal brödtext och 3:1 för stor text. Ljusgrå text på vitt klarar ofta inte det. Be AI:n kontrollera.
- Mörkt läge, om du vill ha det, designat medvetet i stället för att bara inverteras.
Avstånd och layout
- En avståndsskala, till exempel 4, 8, 12, 16, 24, 32, 48, 64 px. Allt hamnar på skalan.
- Justering. Kanter linjerar; innehåll sitter på ett rutnät eller i en konsekvent maxbredd.
- Närhet. Relaterade saker nära varandra, orelaterade längre bort. Den regeln ensam löser de flesta röriga skärmar.
- Färre behållare. Allt behöver inte ett kort. Kanter, avdelare och vitt utrymme kan gruppera innehåll mer tyst.
En prompt som sätter upp systemet en gång:
Innan du bygger fler skärmar, sätt upp ett litet designsystem och använd det överallt: en typografisk skala på 14/16/20/28/40 px, radhöjd 1,5 för brödtext, en avståndsskala på 4/8/12/16/24/32/48 px, neutrala färger från nästan vitt till nästan svart, en accentfärg (#3F6B5A) enbart för primära åtgärder och rött enbart för fel. Knappar, fält och kort ska dela samma hörnradie. Kontrollera att all text uppfyller WCAG AA-kontrast.
Om du arbetar i ett kodmedvetet verktyg blir detta oftast designtokens, CSS-variabler eller ett Tailwind-tema, vilket betyder att senare ändringar görs på ett enda ställe.
Steg 4: Bygg först en skärm ordentligt
Generera inte tolv skärmar för att sedan försöka fixa dem alla. Välj skärmen användarna ser mest, ofta instrumentpanelen eller huvudlistan, och iterera tills den är rätt. Sedan:
Använd instrumentpanelen som referens för alla andra sidor: samma sidhuvud, avstånd, textstorlekar, knappstilar och tabellstil. Uppdatera sidorna Inställningar och Bokningar så att de matchar.
En färdig referensskärm förmedlar din smak mycket bättre än några adjektiv.
Steg 5: Iterera med specifika, små önskemål
Feedback till en AI fungerar som feedback till en junior designer: specifik, ett område i taget och tydlig med vad som ska behållas.
| Vagt | Specifikt |
|---|---|
| ”Gör det snyggare.” | ”Öka avståndet mellan sektionerna till 64 px, gör sidrubriken 40 px och mjukare, mellangrå sekundär text.” |
| ”Det ser rörigt ut.” | ”Ta bort kantlinjerna på statistikraden, vänsterjustera siffrorna och placera etiketterna ovanför i små versaler.” |
| ”Få det att sticka ut.” | ”Använd accentfärgen enbart på den primära knappen. Gör sekundära knappar konturerade.” |
| ”Förbättra mobilvyn.” | ”På telefonbredd: lägg filtren i ett blad som öppnas från en Filter-knapp, och gör tabellraderna till kort.” |
Lägg alltid till vad som ska behållas, till exempel ”behåll alla rutter, all text och alla funktioner oförändrade”, så att en visuell genomgång inte tyst tar bort funktionalitet. Kontrollera varje ändring på en skärm i telefonstorlek innan du ber om nästa. Se så bygger du en mobilvänlig webbapp för hur något bra ser ut på små skärmar.
Steg 6: Detaljerna som skiljer bra från generiskt
När strukturen är rätt gör dessa små saker att en app känns färdig:
- Tomma tillstånd. Vad en ny användare ser utan data: en kort förklaring och en tydlig åtgärd, inte en tom tabell.
- Laddningstillstånd. Skelett i samma form som innehållet, inte snurrande ikoner överallt.
- Feltillstånd. Begripliga meddelanden bredvid fältet som orsakade felet.
- Hover-, fokus- och nedtryckt-tillstånd på varje interaktivt element. Fokusringar är viktiga för användare som navigerar med tangentbord.
- Verkligt innehåll. Ersätt ”Lorem ipsum” och ”John Doe” med realistisk text och data. Platshållarinnehåll döljer layoutproblem.
- Ikoner från ett set, i en eller två storlekar, med jämn linjetjocklek.
- Bilder med ett syfte. Riktiga bilder på din produkt, plats eller personer slår generiska stockbilder. Om du använder stock eller genererade bilder, håll en konsekvent stil.
- Text. Korta, specifika etiketter (”Boka pass”, inte ”Skicka”) bidrar lika mycket till upplevd kvalitet som något färgval.
Vanliga misstag
- Att designa om allt i en prompt. Stora omskrivningar introducerar regressioner. Gå sida för sida.
- För många accentfärger. Om allt är markerat syns ingenting.
- Att centrera allt. Centrerad text är svår att skumma förbi rubriken; vänsterjustera det mesta av innehållet.
- Liten, lågkontrastig text som ser elegant ut på en stor skärm men är oläslig på en telefon i starkt solljus.
- Dekoration före hierarki. Gradienter och skuggor kan inte rädda en skärm där den viktigaste åtgärden inte är uppenbar.
- Att ignorera landningssidan. För många produkter är den första intrycket; se så bygger du en landningssida som konverterar.
För fler promptmönster utöver design, läs så skriver du prompter för AI-appbyggare. Om ditt arbete är produkten — en design- eller fotoportfolio — går så bygger du en portfoliowebbplats djupare på presentation.
Design med Mythex
I Mythex beskriver du designen i chatten, ser den i förhandsvisningen och kontrollerar telefonramen innan nästa ändring. Dokumentationen har korta mönster för detta: design- och UI-prompter om hur du anger vad som ska ändras och vad som ska behållas, och redesigna ditt UI för att förnya en sida i taget utan att tappa funktioner. Mythex kan också söka efter stockfoton eller generera en bild i chatten — en hero-bild, en bakgrund, en delningsbild — och placera den i appen när du ber om det. Om en omgång går fel, gå tillbaka till checkpointen från före den. Du kan också bläddra bland mallarna om du hellre vill börja från en befintlig design och justera den.
Frågor
Varför ser alla AI-designade appar likadana ut?
För att en vag prompt ger det mest genomsnittliga svaret: samma typsnitt, gradienter, rundade kort och en centrerad hero. Ge AI:n referenser, en namngiven designriktning och konkreta regler för typografi, färg och avstånd, så slutar resultatet se generiskt ut.
Kan jag ge AI:n en skärmbild för att kopiera en stil?
Många AI-byggare accepterar bilder, och en skärmbild är ett av de tydligaste sätten att visa en stil. Beskriv vad du gillar i den — avstånden, typsnittet, hur färgen används — i stället för att be om en kopia av någon annans produkt.
Behöver jag en designer om jag bygger med AI?
Inte för en första version. En designer gör mest nytta när du har ett varumärke att skydda eller en komplex produkt där layoutbeslut påverkar hur väl människor kan använda den. Tills dess får du ett rent, användbart gränssnitt med tydliga referenser och små iterationer.
Vad gör att en app ser professionell ut?
Konsekvens snarare än dekoration: en typografisk skala, en liten färgpalett som används med syfte, avstånd på en fast skala, jämna kanter och tydlig hierarki så att det viktigaste på varje skärm är uppenbart.