UI mockups & wireframes dựng hình ảnh của một giao diện — các màn hình mà một app hoặc site sẽ có, ở độ chi tiết mà brief yêu cầu. Đây là mẫu cho "thứ này sẽ trông ra sao?" trước khi bất cứ thứ gì được dựng thật.
Mockup hi-fi hay wireframe lo-fi
Brief quyết định độ chi tiết:
- Một mockup — "màn hình settings cho app ảnh, theme tối" — cho một màn hình hi-fi với chữ, màu và control thật, gần mức có thể ship
- Một wireframe — "wireframe luồng onboarding, bốn màn hình" — cho cấu trúc lo-fi: khối, phân cấp, nhãn, chưa có style để tranh luận
Cả hai đều là file thật bạn có thể điều hướng, không phải ảnh tĩnh — ghim một control, bình luận một layout, tweak mật độ, giống mọi kết quả khác.
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.”
Một màn hình hay cả bộ
Yêu cầu một màn hình và bạn được một màn hình; yêu cầu một luồng và agent dựng cả bộ — onboarding, dashboard, settings — như một hàng artboard bạn có thể bước qua hoặc xem dạng lưới. Preview luôn live: click qua, hover, kiểm tra các trạng thái agent đã dựng vào.
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.”
Nó giỏi gì
- Khám phá một hướng — ba phương án của cùng màn hình, rẻ
- Công việc sản phẩm sớm — bộ màn hình cho một feature trước khi được spec
- Wireframe để sign-off — cấu trúc mà không có cuộc tranh luận style
- Phân tích đối thủ — "luồng này trông sẽ thế nào?" mà không phải dựng nó
Điều hướng một mockup
Mọi thứ trong điều hướng đều áp dụng — cùng một engine:
- ⌥-click phần sai, bình luận đúng node
- Tweaks cho các tham số thiết kế expose ra
- Follow-ups cho một màn hình thiếu hoặc hướng sai
- Variants cho "hai phương án khác nhau của cùng một luồng"
Cổng kiểm duyệt vẫn chạy — một mockup được kiểm tra như mọi kết quả, vì hình nói dối về tính khả thi thì không hữu ích.
Mockup vs website vs mobile app
- UI mockups — một hình của giao diện, dạng desktop hoặc web
- Mobile app — màn hình cỡ phone, vùng chạm, nav mobile
- Interactive website — một site thực sự hoạt động, nhiều trang
Khi sản phẩm là thứ để click qua chứ không phải để nhìn, đó không phải mockup — đó là website (hoặc mobile app nếu nó dạng phone).
Mẹo: Nêu độ chi tiết trong brief — "mockup hi-fi" vs "wireframe lo-fi" tạo ra thứ khác nhau, và một wireframe lẽ ra là hi-fi là phí một lượt chạy. Chính từ đó đặt kỳ vọng trước khi agent bắt đầu.
Export
Mockup export ra PNG hoặc PDF để chia sẻ — các màn hình render ở kích thước bạn sẽ trình bày. File nguồn nằm lại trong thư mục dự án cho lần điều hướng hoặc version tiếp theo.