Design med AI fungerer best som en loop: du beskriver, AI-utkastene, du bedømmer og foredler, og du gjentar. AI er rask til å produsere alternativer. Du er ansvarlig for å velge den rette.
Trinn 1: Skriv en kort. Beskriv brukeren, oppgaven, innholdet og eventuelle begrensninger. "En innstillingsskjerm for en budsjetteringsapp, for personer på telefoner, med seksjoner for konto, varsler og personvern, ved bruk av våre eksisterende komponenter" vil gi et langt bedre resultat enn "lag en innstillingsside".
Trinn 2: generer utkast. Spør-til-UI-verktøy som Google Stitch eller UXPins AI-assistent gjør en beskrivelse eller en skisse til skjermer. Be om flere varianter og sammenlign dem, i stedet for å godta den første.
Trinn 3: avgrens i et designverktøy. Ta med det beste utkastet til Figma, Penpot eller et annet redigeringsprogram. Fiks hierarki, mellomrom og kopier, og utform tilstandene AI-en vanligvis hopper over: lasting, tom, feil og deaktivert.
Trinn 4: koble til kode. AI-kodingsverktøy som Claude Code og Cursor kan bygge grensesnittet. Resultatene er mye bedre når de kan lese designet ditt gjennom en MCP-server. Figma og Penpot har begge en. For interaktive og animerte deler har ExodeUI, som vi lager, en MCP-server som lar AI-en lage og redigere animasjoner med tilstander og springfysikk fra enkle spørsmål, lagret i en åpen .exode-fil som appen din spiller av.
Trinn 5: gjennomgå før du sender. Sjekk bruk av tastatur og skjermleser, kontrast, redusert bevegelse, små og store skjermer og lang eller oversatt tekst. Behandle AI-utgang som arbeid fra en rask, men ny lagkamerat: nyttig, men alltid gjennomgått.