UI mockups & wireframes สร้างภาพของอินเทอร์เฟซ — หน้าจอที่แอปหรือเว็บไซต์ จะมี ในระดับความละเอียดที่บรีฟกำหนด มันคือเทมเพลตสำหรับ "มันจะหน้าตาเป็นยังไง?" ก่อนจะสร้างของจริง
Mockup hi-fi หรือ wireframe lo-fi
บรีฟกำหนดความละเอียด:
- mockup — "หน้าจอตั้งค่าสำหรับแอปรูปภาพ ธีมมืด" — ได้หน้าจอ hi-fi พร้อม ตัวอักษร สี และตัวควบคุมจริง เกือบส่งได้
- wireframe — "ทำ wireframe flow onboarding สี่หน้าจอ" — ได้โครงสร้าง lo-fi: บล็อก ลำดับชั้น เลเบล ยังไม่มีสไตล์ให้เถียง
ทั้งสองเป็นไฟล์จริงที่คุณ steer ได้ ไม่ใช่ภาพนิ่ง — ปักหมุดที่ตัวควบคุม คอมเมนต์บนเลย์เอาต์ tweak ความหนาแน่น เหมือนผลลัพธ์อื่น
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.”
หน้าจอเดียวหรือทั้งชุด
ขอหน้าจอเดียวได้หน้าจอเดียว; ขอ flow แล้ว agent สร้างทั้งชุด — onboarding, dashboard, settings — เป็นแถว artboard ที่คุณไล่ดูทีละอันหรือดูเป็นกริด preview live ตลอด: คลิกผ่าน hover ทดสอบสถานะที่ agent สร้างไว้
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.”
มันถนัดอะไร
- สำรวจทิศ — สามแบบของหน้าจอเดียวกัน ต้นทุนต่ำ
- งานผลิตภัณฑ์ต้นน้ำ — ชุดหน้าจอสำหรับฟีเจอร์ก่อน spec
- wireframe สำหรับ sign-off — โครงสร้างโดยไม่ต้องเถียงเรื่องสไตล์
- วิเคราะห์คู่แข่ง — "flow นี้จะหน้าตาเป็นยังไง?" โดยไม่ต้องสร้างมัน
การ steer mockup
ทุกอย่างใน steering ใช้ได้ — เอนจินเดียวกัน:
- ⌥-click ส่วนที่ผิด คอมเมนต์บน node เป๊ะ ๆ
- Tweaks สำหรับพารามิเตอร์ที่ดีไซน์เปิด
- ตามหลัง สำหรับหน้าจอที่ขาดหรือทิศที่ผิด
- Variants สำหรับ "สองแบบต่างกันของ flow เดียวกัน"
เกตยังรัน — mockup ถูกตรวจเหมือนผลลัพธ์อื่น เพราะภาพที่โกหกเรื่องความเป็นไปได้ ไม่ใช่ภาพที่มีประโยชน์
Mockup vs เว็บไซต์ vs แอปมือถือ
- UI mockups — ภาพ ของอินเทอร์เฟซ ทรงเดสก์ท็อปหรือเว็บ
- Mobile app — หน้าจอขนาดโทรศัพท์ เป้าหมายการแตะ nav มือถือ
- Interactive website — เว็บไซต์ที่ใช้งานได้จริง หลายหน้า
เมื่อชิ้นงานที่ส่งมอบคือสิ่งที่ให้คลิกผ่าน ไม่ใช่แค่ดูเฉย ๆ มันไม่ใช่ mockup — มันคือเว็บไซต์ (หรือแอปมือถือ ถ้าเป็นทรงโทรศัพท์)
Tip: บอกระดับความละเอียดในบรีฟ — "hi-fi mockup" vs "lo-fi wireframe" ได้ของคนละอย่าง และการได้ wireframe ทั้งที่อยากได้ hi-fi คือการรันที่เสียเปล่า คำที่เลือกตั้งความคาดหวังไว้ก่อน agent เริ่ม
การ export
Mockup export เป็น PNG หรือ PDF สำหรับแชร์ — หน้าจอเรนเดอร์ที่ขนาดที่คุณ จะนำเสนอ ไฟล์ source อยู่ในโฟลเดอร์โปรเจกต์สำหรับ steer ถัดไปหรือเวอร์ชันถัดไป