Ontwerpen met AI werkt het beste als een lus: je beschrijft, de AI schetst, je beoordeelt en verfijnt, en je herhaalt. De AI is snel in het produceren van opties. U bent zelf verantwoordelijk voor het kiezen van de juiste.
Stap 1: schrijf een briefing. Beschrijf de gebruiker, de taak, de inhoud en eventuele beperkingen. "Een instellingenscherm voor een budgetapp, voor mensen op telefoons, met secties voor account, meldingen en privacy, met behulp van onze bestaande componenten" zal een veel beter resultaat opleveren dan "een instellingenpagina maken".
Stap 2: concepten genereren. Prompt-to-UI-tools zoals Google Stitch of de AI-assistent van UXPin zetten een beschrijving of schets om in schermen. Vraag om meerdere varianten en vergelijk ze, in plaats van de eerste te accepteren.
Stap 3: verfijn in een ontwerptool. Breng het beste concept naar Figma, Penpot of een andere editor. Corrigeer de hiërarchie, spatiëring en kopiëren, en ontwerp de statussen die de AI gewoonlijk overslaat: laden, leeg, fout en uitgeschakeld.
Stap 4: verbinding maken met code. AI-coderingstools zoals Claude Code en Cursor kunnen de interface bouwen. De resultaten zijn veel beter als ze uw ontwerp kunnen lezen via een MCP-server. Figma en Penpot hebben er allebei één. Voor interactieve en geanimeerde delen heeft de ExodeUI, die we maken, een MCP-server waarmee de AI animaties met toestanden en veerfysica kan maken en bewerken op basis van aanwijzingen in eenvoudige taal, opgeslagen in een open .exode-bestand dat door uw app wordt afgespeeld.
Stap 5: controleer voordat u verzendt. Controleer het gebruik van toetsenbord en schermlezer, contrast, verminderde beweging, kleine en grote schermen en lange of vertaalde tekst. Behandel AI-uitvoer als werk van een snelle maar nieuwe teamgenoot: nuttig, maar altijd beoordeeld.