Desain layar aplikasi mobile dengan AI

Mobile app membangun seperangkat layar ponsel — bukan satu shot tapi alur-nya: onboarding, layar utama, pengaturan, keadaan di antaranya, tersusun sebagai board berisi artboard pada ukuran ponsel nyata. Ini template untuk desain berbentuk aplikasi — target sentuh, nav mobile, alur antar layar.

Satu set, bukan satu layar

Beri brief untuk alurnya — "aplikasi habit-tracker: sign-up, tampilan hari ini, streak, pengaturan" — dan agen membangun set layarnya, masing-masing artboard di dalam hasil. Mobile viewer menyusunnya sebagai board yang bisa Anda langkahi atau lihat sebagai grid, sehingga alurnya terbaca sebagai alur, bukan tumpukan screenshot.

Artboard mobile — set layar tersusun di atas board

Layarnya live, bukan gambar: tap-tap melaluinya, hover kontrolnya, periksa nav-nya benar-benar menuju ke suatu tempat — pada lebar ponsel, di mana target sentuh dan nav bawah yang biasanya rusak.

demos/frond-app/index.html Open full

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

“Design a mobile app: a plant-care app: today screen, plant detail, and watering reminder.”

Aturan mobile, diperiksa

Pemeriksaan gate pada lebar ponsel paling penting di sini — ukuran target sentuh, nav mati, bar bawah yang menelan baris terakhir. Template memuat aturan itu sehingga agen membangun untuknya: kontrol berukuran untuk jari, nav yang mencapai sesuatu, huruf yang bertahan di layar kecil.

Apa yang dikuasainya

  • Kerja konsep aplikasi — set layar untuk sebuah ide sebelum dibangun
  • Alur fitur — bagaimana fitur baru mengalir melalui layar yang ada
  • Pola khas mobile — sheet, nav bawah, keadaan swipe
  • Review stakeholder — alur sebagai board, bukan spesifikasi

Mengarahkan set layar

Pengarahan yang sama seperti hasil mana pun, berbentuk mobile:

  • ⌥-click kontrol atau wilayah layar, beri komentar di titik yang persis
  • Tindak lanjut untuk layar yang hilang atau alur yang salah ("tambahkan empty state antara sign-up dan hari ini")
  • Tweaks untuk parameter yang disediakan desain (kepadatan, radius sudut)
  • Variants untuk dua pendekatan berbeda pada alur yang sama

Ponsel vs mockup vs website

  • Mobile app — layar berbentuk ponsel, kontrol skala sentuh, nav mobile
  • UI mockups — gambar antarmuka desktop atau web
  • Interactive website — situs yang bekerja, multi-halaman, desktop-first

Kalau set layarnya berukuran ponsel dan berbentuk sentuh, ini template-nya — bahkan kalau "aplikasi"-nya adalah alur web mobile.

Tip: Periksa setiap layar pada lebar ponsel sebelum menyatakannya selesai — FAIL paling umum di sini adalah bar bawah atau kontrol baris terakhir yang jatuh ke zona mati, yang tidak bisa Anda lihat pada ukuran desktop.

Mengekspor

Set layar diekspor ke PNG per layar atau PDF sebagai set — untuk deck, spesifikasi, atau dokumen stakeholder. File-nya tetap di folder proyek untuk pengarahan berikutnya.

Terkait