Design med AI fungerer bedst som en loop: du beskriver, AI-udkastene, du bedømmer og forfiner, og du gentager. AI er hurtig til at producere muligheder. Du er ansvarlig for at vælge den rigtige.
Trin 1: Skriv et kort. Beskriv brugeren, opgaven, indholdet og eventuelle begrænsninger. "En indstillingsskærm til en budgetapp, for folk på telefoner, med sektioner for konto, notifikationer og privatliv, ved at bruge vores eksisterende komponenter" vil give et langt bedre resultat end "lav en indstillingsside".
Trin 2: generer kladder. Prompt-to-UI-værktøjer såsom Google Stitch eller UXPin's AI-assistent forvandler en beskrivelse eller en skitse til skærmbilleder. Bed om flere varianter og sammenlign dem i stedet for at acceptere den første.
Trin 3: forfin i et designværktøj. Bring det bedste udkast til Figma, Penpot eller en anden editor. Ret hierarki, mellemrum og kopier, og design de tilstande, som AI normalt springer over: indlæsning, tom, fejl og deaktiveret.
Trin 4: Opret forbindelse til kode. AI-kodningsværktøjer såsom Claude Code og Cursor kan bygge grænsefladen. Resultaterne er meget bedre, når de kan læse dit design gennem en MCP-server. Figma og Penpot har begge en. Til interaktive og animerede dele har ExodeUI, som vi laver, en MCP-server, der lader AI'en skabe og redigere animationer med tilstande og springfysik fra almindelige prompter, gemt i en åben .exode-fil, som din app afspiller.
Trin 5: Gennemgå før du sender. Tjek brug af tastatur og skærmlæser, kontrast, reduceret bevægelse, små og store skærme og lang eller oversat tekst. Behandl AI-output som arbejde fra en hurtig, men ny holdkammerat: nyttigt, men altid gennemgået.