UI mockups & wireframes builds pictures of an interface — the screens an app or site would have, at whatever fidelity the brief calls for. It's the template for "what would this look like?" before anything gets built for real.
Hi-fi mockups or lo-fi wireframes
The brief sets the fidelity:
- A mockup — "the settings screen for a photo app, dark theme" — lands a hi-fi screen with real type, color and controls, close to shippable
- A wireframe — "wireframe the onboarding flow, four screens" — lands lo-fi structure: blocks, hierarchy, labels, no styling to argue about yet
Both are real files you can steer, not static images — pin a control, comment on a layout, tweak the density, same as any result.
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.”
A screen or a set
Ask for one screen and you get one; ask for a flow and the agent builds the set — onboarding, dashboard, settings — as a row of artboards you can step through or view in a grid. The preview's live the whole time: click through, hover, test the states the agent built in.
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.”
What it's good at
- Exploring a direction — three takes on the same screen, cheap
- Early product work — the screen set for a feature before it's specced
- Wireframes for sign-off — structure without the style argument
- Competitive analysis — "how would this flow look?" without building it
Steering a mockup
Everything in steering applies — it's the same engine:
- ⌥-click the part that's wrong, comment on the exact node
- Tweaks for the parameters the design exposes
- Follow-ups for a missing screen or a wrong direction
- Variants for "two different takes on the same flow"
The gate still runs — a mockup gets checked like any result, because the picture that lies about feasibility isn't a useful one.
Mockup vs website vs mobile app
- UI mockups — a picture of an interface, desktop or web-shaped
- Mobile app — phone-sized screens, touch targets, mobile nav
- Interactive website — a site that actually works, multi-page
When the deliverable is something to click through rather than look at, it's not a mockup — it's a website (or a mobile app if it's phone-shaped).
Tip: Name the fidelity in the brief — "hi-fi mockup" vs "lo-fi wireframe" produces different things, and a wireframe you wanted hi-fi is a wasted run. The word sets the expectation before the agent starts.
Exporting
Mockups export to PNG or PDF for sharing — the screens rendered at the sizes you'd present them. The source files stay in the project folder for the next steer or the next version.