Tekoälyllä suunnittelu toimii parhaiten silmukana: kuvailet tekoälyluonnoksia, arvioit ja tarkennat ja toistat. Tekoäly tuottaa nopeasti vaihtoehtoja. Olet vastuussa oikean valinnasta.
Vaihe 1: Kirjoita lyhyt. Kuvaile käyttäjää, tehtävää, sisältöä ja mahdollisia rajoituksia. "Asetusnäyttö budjetointisovellukselle, puhelimia käyttäville ihmisille, jossa on osiot tilille, ilmoituksille ja yksityisyydelle, käyttämällä olemassa olevia komponenttejamme" antaa paljon paremman tuloksen kuin "tee asetussivu".
Vaihe 2: luo luonnoksia. Käyttöliittymään siirtyvät työkalut, kuten Google Stitch tai UXPin:n AI-avustaja, muuttavat kuvauksen tai luonnoksen näytöiksi. Pyydä useita vaihtoehtoja ja vertaa niitä sen sijaan, että hyväksyisit ensimmäistä.
Vaihe 3: tarkenna suunnittelutyökalua. Tuo paras luonnos Figma-, Penpot- tai muuhun editoriin. Korjaa hierarkia, välit ja kopioi ja suunnittele tilat, jotka tekoäly yleensä ohittaa: lataus, tyhjä, virhe ja pois käytöstä.
Vaihe 4: yhdistä koodiin. AI-koodaustyökalut, kuten Claude Code ja Cursor, voivat rakentaa käyttöliittymän. Tulokset ovat paljon parempia, kun he voivat lukea suunnittelusi MCP-palvelimen kautta. Figma ja Penpot on molemmilla yksi. Vuorovaikutteisia ja animoituja osia varten valmistamassamme ExodeUI:ssä on MCP-palvelin, jonka avulla tekoäly voi luoda ja muokata animaatioita, joissa on tilaa ja kevätfysiikkaa selkeän kielen kehotteista, jotka on tallennettu avoimeen .exode-tiedostoon, jota sovelluksesi toistaa.
Vaihe 5: Tarkista ennen lähettämistä. Tarkista näppäimistön ja näytönlukuohjelman käyttö, kontrasti, vähentynyt liike, pienet ja suuret näytöt sekä pitkä tai käännetty teksti. Käsittele tekoälytulosta kuin työtä nopealta, mutta uudelta tiimikaverilta: hyödyllinen, mutta aina arvosteltu.