UI mockups & wireframes rakentaa kuvia käyttöliittymästä — näytöt, joita sovelluksella tai sivustolla olisi, briefin vaatimalla tarkkuudella. Se on pohja kysymykselle "miltä tämä näyttäisi?" ennen kuin mitään rakennetaan oikeasti.
Hi-fi-mockupit tai lo-fi-wireframet
Brief asettaa tarkkuuden:
- Mockup — "asetusnäyttö kuvasovellukselle, tumma teema" — tuottaa hi-fi-näytön oikealla typografialla, värillä ja kontrolleilla, lähellä julkaisukuntoa
- Wireframe — "wireframe onboarding-kulku, neljä näyttöä" — tuottaa lo-fi-rakenteen: blokkeja, hierarkiaa, tekstejä, ei vielä väiteltävää tyyliä
Molemmat ovat oikeita tiedostoja, joita voi ohjata, eivät staattisia kuvia — pinnaa kontrolli, kommentoi layoutia, säädä tiheyttä, ihan kuin mikä tahansa tulos.
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
Näyttö tai setti
Pyydä yhtä näyttöä ja saat yhden; pyydä kulkua ja agentti rakentaa setin — onboarding, dashboard, asetukset — artboard-rivinä, jonka voi käydä läpi tai katsoa ruudukossa. Esikatselu on livenä koko ajan: klikkaa läpi, hoveröi, testaa tilat, jotka agentti rakensi.
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
Missä se on hyvä
- Suunnan tutkiminen — kolme versiota samasta näytöstä, halvalla
- Varhainen tuotetyö — näyttösetti ominaisuudelle ennen kuin se määritellään
- Wireframet hyväksyntään — rakenne ilman tyyliriitaa
- Kilpailija-analyysi — "miltä tämä kulku näyttäisi?" rakentamatta sitä
Mockupin ohjaaminen
Kaikki ohjaus pätee — kyse on samasta moottorista:
- ⌥-klikkaa osaa, joka on pielessä, kommentoi tarkalleen solmuun
- Tweaks parametreille, joita suunnitelma tarjoaa
- Jatkobriefit puuttuvalle näytölle tai väärälle suunnalle
- Variantit "kahdelle eri versiolle samasta kulusta"
Gate tarkistaa edelleen — mockup käy läpi saman tarkistuksen kuin mikä tahansa tulos, koska kuva, joka valehtelee toteutettavuudesta, ei ole hyödyllinen.
Mockup vs verkkosivu vs mobiilisovellus
- UI mockups — kuva käyttöliittymästä, työpöytä- tai web-muotoinen
- Mobile app — puhelimen kokoiset näytöt, kosketuskohteet, mobiilinavigaatio
- Interactive website — sivusto, joka oikeasti toimii, monisivuinen
Kun tulos on jotain, jota klikataan läpi mieluummin kuin katsotaan, se ei ole mockup — se on verkkosivu (tai mobiilisovellus, jos se on puhelinkokoinen).
Vinkki: Nimeä tarkkuus briefissä — "hi-fi mockup" vs "lo-fi wireframe" tuottavat eri asioita, ja wireframe, jonka halusit hi-finä, on hukkaan heitetty ajo. Sana asettaa odotuksen ennen kuin agentti aloittaa.
Vienti
Mockupit viedään muotoon PNG tai PDF jakamista varten — näytöt renderöityinä esityskokoon. Lähdetiedostot jäävät projektikansioon seuraavaa ohjausta tai versiota varten.