Mobile app สร้างชุดหน้าจอโทรศัพท์ — ไม่ใช่ช็อตเดียวแต่เป็น flow: onboarding หน้าจอหลัก settings สถานะระหว่างกลาง จัดวางเป็นบอร์ดของ artboard ที่ขนาดโทรศัพท์ จริง มันคือเทมเพลตสำหรับดีไซน์รูปทรงแอป — เป้าหมายสัมผัส nav มือถือ flow หน้าจอต่อหน้าจอ
ทั้งชุด ไม่ใช่หน้าจอเดียว
บรีฟมันสำหรับ flow — "แอป habit-tracker: sign-up มุมมองวันนี้ streak settings" — แล้ว agent สร้างชุดหน้าจอ แต่ละอันเป็น artboard ในผลลัพธ์ ตัวแสดงมือถือ จัดพวกมันเป็นบอร์ดที่คุณก้าวผ่านหรือดูเป็นกริด flow จึงอ่านเป็น flow ไม่ใช่ กองภาพถ่ายหน้าจอ
หน้าจอสด ไม่ใช่ภาพ: แตะผ่านพวกมัน hover ตัวควบคุม เช็กว่า nav ไปถึงอะไรจริง — ที่ความกว้างโทรศัพท์ ที่ซึ่งเป้าหมายสัมผัสและ nav ล่างคือสิ่งที่แตก
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.”
กฎมือถือ ที่ถูกตรวจ
การตรวจความกว้างโทรศัพท์ของเกตสำคัญที่สุดที่นี่ — ขนาดเป้าหมายการแตะ nav ตาย แถบล่างที่กลืนแถวสุดท้าย เทมเพลตโหลดกฎพวกนั้นเพื่อ agent สร้างเพื่อมัน: ตัว ควบคุมขนาดพอดีนิ้ว nav ที่ไปถึงอะไรสักอย่าง ตัวอักษรที่รอดหน้าจอเล็ก
มันถนัดอะไร
- งานคอนเซ็ปต์แอป — ชุดหน้าจอสำหรับไอเดียก่อนสร้าง
- flow ฟีเจอร์ — ฟีเจอร์ใหม่แทรกผ่านหน้าจอที่มีอยู่อย่างไร
- รูปแบบเฉพาะมือถือ — sheet, nav ล่าง, สถานะ swipe
- รีวิวผู้มีส่วนได้เสีย — flow เป็นบอร์ด ไม่ใช่ spec
การ steer ชุดหน้าจอ
การ steer เหมือนผลลัพธ์อื่น รูปทรงมือถือ:
- ⌥-click ตัวควบคุมหรือบริเวณหน้าจอ คอมเมนต์บนจุดตัวเป๊ะ
- ตามหลัง สำหรับหน้าจอที่ขาดหรือ flow ที่ผิด ("เพิ่ม empty state ระหว่าง sign-up กับวันนี้")
- Tweaks สำหรับพารามิเตอร์ที่ดีไซน์เปิด (ความหนาแน่น รัศมีมุม)
- Variants สำหรับสองแบบต่างกันของ flow เดียวกัน
โทรศัพท์ vs mockup vs เว็บไซต์
- Mobile app — หน้าจอรูปทรงโทรศัพท์ ตัวควบคุมสเกลสัมผัส nav มือถือ
- UI mockups — ภาพของอินเทอร์เฟซเดสก์ท็อปหรือเว็บ
- Interactive website — เว็บไซต์ที่ใช้งานได้ หลายหน้า เดสก์ท็อปก่อน
ถ้าชุดหน้าจอเป็นขนาดโทรศัพท์และรูปทรงสัมผัส มันคือเทมเพลตนี้ — แม้ "แอป" จะ เป็น flow เว็บมือถือ
Tip: เช็กทุกหน้าจอที่ความกว้างโทรศัพท์ก่อนบอกว่าเสร็จ — FAIL ที่พบบ่อย ที่สุดที่นี่คือแถบล่างหรือตัวควบคุมแถวสุดท้ายที่ตกลง dead zone ซึ่งคุณมองไม่ เห็นที่ขนาดเดสก์ท็อป
การ export
ชุดหน้าจอ export เป็น PNG ต่อหน้าจอหรือ PDF เป็นชุด — สำหรับเด็ค spec หรือ เอกสารผู้มีส่วนได้เสีย ไฟล์อยู่ในโฟลเดอร์โปรเจกต์สำหรับ steer ถัดไป