Mobile app rakentaa setin puhelinnäyttöjä — ei yhtä shottia vaan virran: onboarding, päänäyttö, asetukset, välissä olevat tilat, aseteltuna artboard-boardina oikeassa puhelinkoossa. Se on pohja sovellusmuotoiselle designille — kosketuskohteet, mobiilinavigaatio, näyttö-näyttöön-virta.
Setti, ei näyttö
Briefaa se virralle — "habit-tracker-sovellus: rekisteröityminen, tänään-näkymä, streak, asetukset" — ja agentti rakentaa näyttösetin, jokainen tuloksen artboardina. Mobile viewer asettelee ne boardiksi, jonka läpi astutaan tai jota katsotaan gridinä, joten virta lukeutuu virtana, ei screenshot-pinoona.
Näytöt ovat livejä, eivät kuvia: naputa niiden läpi, hoveröi kontrolleja, tarkista, että navigaatio oikeasti menee jonnekin — puhelinleveydellä, jossa kosketuskohteet ja ala-navigaatio ovat se, mikä rikkoutuu.
Mobile app · Devin · e2e · gate PASS
Frond — A plant-care app in three finished screens — today, detail, reminder — device frames and all.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile app: a plant-care app: today screen, plant detail, and watering reminder.”
Mobiilisäännöt, tarkistettuina
Gaten puhelinleveyden tarkistukset merkitsevät eniten täällä — osumakohdekoot, kuollut navigaatio, ala-palkki, joka niellää viimeisen rivin. Pohja lataa nuo säännöt, jotta agentti rakentaa niitä varten: kontrollit sormille mitoitettuina, navigaatio, joka tavoittaa jotain, tyyppi, joka selviää pienestä ruudusta.
Missä se on hyvä
- Sovelluskonseptityö — näyttösetti idealle ennen kuin sitä rakennetaan
- Feature-virrat — miten uusi ominaisuus kietoutuu olemassa olevien näyttöjen läpi
- Mobiilikohtaiset kaavat — sheetit, ala-navigaatio, swipe-tilat
- Stakeholder-review't — virta boardina, ei speksinä
Näyttösetin ohjaaminen
Sama ohjaus kuin minkä tahansa tuloksen, mobiilimuotoisena:
- ⌥-klikkaa kontrollia tai näyttöaluetta, kommentoi tarkkaa kohtaa
- Jatkot puuttuvalle näytölle tai väärälle virralle ("lisää tyhjä tila rekisteröitymisen ja tänään-näkymän väliin")
- Tweaks parametreille, joita design paljastaa (tiheys, kulmasäde)
- Variantit kahdelle eri ottoele samalle virralle
Puhelin vs mockup vs verkkosivu
- Mobile app — puhelinmuotoiset näytöt, kosketuskoosteiset kontrollit, mobiilinavigaatio
- UI mockups — kuva työpöytä- tai web-käyttöliittymästä
- Interactive website — sivusto, joka toimii, monisivuinen, työpöytä-first
Jos näyttösetti on puhelimen kokoinen ja kosketuksen muotoilema, se on tämä pohja — vaikka "sovellus" olisi mobiili-web-virta.
Vinkki: Tarkista jokainen näyttö puhelinleveydellä ennen kuin kutsut sitä valmiiksi — yleisin FAIL täällä on ala-palkki tai viimeisen rivin kontrolli, joka putoaa kuolleeseen vyöhykkeeseen, mitä ei näe työpöytäkoossa.
Vieminen
Näyttösetit viedään PNG:nä per näyttö tai PDF:nä settinä — dekkiä, speksiä tai stakeholder-docia varten. Tiedostot jäävät projektikansioon seuraavaa ohjausta varten.