wonderblok
Get early access

Desain layar iOS dan Android, mainkan, lalu rilis.

Wonderblok membantu developer mobile mendesain layar iOS dan Android bersama AI agent, menghubungkan frame menjadi prototype yang terasa seperti aplikasinya, dan menggambar screenshot toko aplikasi dari layar yang sama. Component dan token memakai nama dari kodemu, dan build check membandingkan aplikasi yang berjalan dengan desain.

Dapatkan akses awalLihat harga
UniversePrototypeLaunch kitBuild check

UNTUK SIAPA INI

Terdengar familiar?

Kamu lebih paham kode platformmu daripada alat desainnya. Tapi kamu tetap butuh layar sungguhan sebelum membangun: alur dari sign in sampai home, error saat jaringan putus, sheet yang meminta izin. Dan nanti kamu butuh lima screenshot toko aplikasi yang tidak terlihat seperti asal jadi.

Wonderblok menyatukan semua pekerjaan itu di satu file. Gambar atau minta buatkan layar di ukuran ponsel, hubungkan, lalu mainkan alurnya di aplikasi. Saat build berjalan, bandingkan dengan desain dan lihat di mana bedanya. Launch kit mengubah layar yang sama menjadi gambar untuk toko aplikasi.

  • Mendesain di alat yang tidak kamu pakai sehari-hari

    Suite desain yang berat memperlambat developer yang butuh satu layar, bukan satu studio.

  • State izin dan error diserahkan pada nasib

    Prompt sistem, state ditolak dan kasus offline membentuk pengalaman pengguna, tapi jarang didesain.

  • Screenshot toko aplikasi di akhir

    Digambar terburu-buru dari tampilan build pada hari itu.

CONTOH SATU MINGGU

Dari layar sign in sampai screenshot toko aplikasi, dalam seminggu

Sebuah skenario, bukan cerita pelanggan: gambaran satu minggu ketika agent kamu bekerja di kanvas bersamamu.

  1. Senin

    Alurnya digambar sebelum kodenya

    Kamu membangun aplikasi check-in gym untuk iOS dan Android. Kamu menghubungkan Claude Code dan meminta alur pertama: sign in dengan nomor telepon, kode sekali pakai, state kode salah dan layar berhasil. Menjelang makan siang ada empat frame yang saling terhubung di ukuran 390 kali 844, dibangun dari pola sign in nomor telepon di Universe, dengan nama dan warnamu.

  2. Selasa

    Layar-layar yang tidak glamor

    Kamu meminta layar yang biasanya dilewati: prompt izin lokasi sebelum dialog sistem, apa yang terjadi setelah pengguna menolak, dan apa yang tampil di home saat jaringan hilang. Kamu membacanya seperti pengguna yang menekan Don't Allow. State ditolak butuh jalan keluar yang jelas, jadi kamu meninggalkan catatan di sana.

  3. Rabu

    Kamu memainkannya sebelum membangunnya

    Kamu menghubungkan frame dan memainkan prototype di aplikasi. Langkah kode sekali pakai terasa lambat, dan agent memindahkan link kirim ulang lebih dekat ke kolom setelah kamu meninggalkan catatan. Kamu membagikan prototype sebagai link ke co-founder, yang mengklik semuanya dan mengirim dua komentar.

  4. Kamis

    Nama yang cocok dengan kodemu

    Warna, ukuran teks dan jarak menjadi token, dan nilai gelapnya ditaruh di samping nilai terang. Tombol, baris daftar dan kolom kode menjadi component. Kamu mengatur code name agar sama dengan yang ada di proyek Swift dan Kotlin-mu, sehingga desain dan kode menunjuk hal yang sama.

  5. Jumat

    Build dibandingkan

    Kamu membangun alur sign in dari frame. Saat aplikasi berjalan, build check membandingkannya dengan desain dan mendaftar bagian yang berbeda: label yang turun baris, padding yang meleset. Kamu memperbaiki kodenya, atau memperbaiki desainnya kalau ternyata hasil build lebih baik.

  6. Minggu depan

    Screenshot toko dari layar yang sama

    Launch kit menggambar screenshot toko aplikasi dari layar aslimu, dengan keterangan singkat dalam warna brand kamu. Kalau layar berubah sebelum rilis, screenshot ikut berubah. Kamu tidak menggambar ulang apa pun di menit terakhir.

SEBELUM DAN SESUDAH

Apa yang berubah setelah agent kamu punya kanvas.

TANPA FILE DESAIN

  • Kamu mendesain di alat yang dibuka dua kali sebulan, jadi satu layar sederhana memakan satu sore.
  • Prompt izin, state ditolak dan state offline diputuskan saat ngoding, itu pun kalau sempat.
  • Kamu baru merasakan alurnya setelah jalan di perangkat, saat mengubahnya sudah mahal.
  • Desain dan kode memakai nama berbeda untuk hal yang sama, dan makin menjauh di setiap rilis.
  • Screenshot toko aplikasi digambar terburu-buru dari tampilan build pada hari itu.

DENGAN WONDERBLOK

  • Agent membuat draf layar di ukuran ponsel dan kamu meninjaunya, bukan menggambarnya.
  • State izin, ditolak, offline dan error sudah ada di canvas sebelum satu baris kode pun ditulis.
  • Kamu memainkan alurnya sebagai prototype lebih dulu, dan membagikannya sebagai link untuk pendapat kedua.
  • Component dan token membawa nama yang cocok dengan kodemu, dan build check menunjukkan di mana aplikasi berbeda dari desain.
  • Screenshot toko aplikasi berasal dari frame yang sama dengan aplikasinya dan tetap terbaru.

CARA KERJANYA

Developer aplikasi mobile: alur kerja, langkah demi langkah.

Tiap langkah menunjukkan apa yang kamu minta, apa yang kamu dapat, dan fitur di baliknya.

  1. 01

    Hubungkan agent kamu

    Wonderblok menyiapkan koneksi MCP untuk Claude Code, Codex dan Claude Desktop. Agent kamu lalu bisa membaca file dan mengedit frame, teks, component dan token. File tetap ada di perangkatmu.

    MCPFile lokal

    Kamu dapat: Agent kamu bisa melihat desain dan mengubahnya.

  2. 02

    Tulis aturan platform sekali saja

    Pindahkan hal yang biasa kamu ulang di setiap prompt ke panduan di dalam file: ukuran frame yang kamu pakai, seberapa besar area sentuh, nada teks, pola navigasi yang dipakai aplikasi. Agent wajib membaca versi terbaru sebelum boleh mengedit.

    PanduanBaca sebelum edit

    KAMU BILANG

    Baca panduan desain. Lalu daftar bagian mana yang berlaku untuk layar sign in dan mana yang perlu aku putuskan.

    Kamu dapat: Buku aturan singkat yang membuat setiap layar mulai dari asumsi yang sama.

  3. 03

    Mulai alur dari sebuah pola

    Universe menyimpan pola yang diberi tag iOS dan Android, seperti permission priming dan sign in nomor telepon, digambar dari aplikasi yang sudah rilis sebagai frame yang bisa diedit. Agent menambahkan yang paling dekat dan menyesuaikannya dengan token dan teksmu. Frame tidak terikat pada platform, jadi kamu mengatur ukuran yang dibutuhkan.

    Universe (Pro)Frame dengan auto layout

    KAMU BILANG

    Buat alur sign in untuk iOS dan Android di ukuran 390 kali 844: nomor telepon, kode sekali pakai, kode salah dan berhasil. Pakai pola sign in nomor telepon dari Universe dan hubungkan frame-nya.

    Kamu dapat: Frame yang saling terhubung, termasuk kasus gagal, di atas struktur yang terbukti di aplikasi lain.

  4. 04

    Desain state yang tidak sengaja ditemui pengguna

    Minta apa saja yang bisa dilakukan sistem dan jaringan pada aplikasimu: izin ditolak, tidak ada koneksi, timeout, first run yang kosong. Masing-masing mendapat frame atau variant sendiri dengan jalan keluar yang jelas.

    Component dan variantRiwayat perubahan

    KAMU BILANG

    Tambahkan state ditolak pada layar izin lokasi, dengan jalan keluar setelah pengguna memilih tidak. Lalu tambahkan versi offline untuk layar Home.

    Kamu dapat: Layar-layar yang menentukan apakah aplikasi terasa selesai.

  5. 05

    Hubungkan frame dan mainkan

    Sambungkan frame dan mainkan prototype di aplikasi untuk merasakan alurnya, atau bagikan sebagai link. Kalau ada yang terasa salah, tinggalkan catatan di layer itu. Agent menindaklanjuti catatan, melaporkan apa yang ia ubah dan menandainya selesai.

    PrototypeLink berbagiCatatan

    KAMU BILANG

    Terapkan catatanku di frame Verify dan beri tahu persis apa yang kamu ubah.

    Kamu dapat: Alur yang sudah kamu rasakan sebelum menulisnya, dan link untuk pendapat kedua.

  6. 06

    Beri nama yang dipakai kodemu

    Warna, tipografi dan jarak menjadi token dengan mode terang dan gelap. Bagian yang berulang menjadi component. Atur code name agar sama dengan identifier Swift, Kotlin atau React Native-mu, lalu minta coding agent membangun dari file desain, bukan dari screenshot.

    Token dan modeCode name

    KAMU BILANG

    Atur code name component Verify ke nama view milikku, lalu daftar semua token yang dipakai layar itu.

    Kamu dapat: Desain dan kode yang berbagi kosakata.

  7. 07

    Bandingkan build, lalu rilis screenshot

    Jalankan build check untuk membandingkan aplikasi yang berjalan dengan frame. Setelah aplikasinya benar, launch kit menggambar screenshot toko dari layar yang sama, dengan keterangan pilihanmu, dan kamu mengekspornya sebagai PNG.

    Build checkLaunch kitExport

    KAMU BILANG

    Buat lima screenshot toko aplikasi dari alur utama dengan keterangan singkat, memakai warna brand-ku.

    Kamu dapat: Daftar perbedaan untuk diperbaiki, lalu gambar toko aplikasi yang cocok dengan aplikasinya.

KASUS PENGGUNAAN

Enam pekerjaan yang bisa kamu serahkan ke agent minggu ini.

  • Sign in dengan nomor telepon

    Sebagian besar penggunamu masuk lewat alur ini, dan kode yang salah adalah hal yang paling sering bermasalah.

    PROMPT Buat alur sign in untuk iOS dan Android di ukuran 390 kali 844: nomor telepon, kode sekali pakai, kode salah dan berhasil. Hubungkan frame-nya.

    Hasil: Empat frame terhubung yang bisa kamu mainkan, termasuk kasus gagal.

    UniversePrototype

  • Permission priming dan penolakan

    Kamu hanya punya satu prompt sistem untuk notifikasi atau lokasi. Kalau pengguna menolak, mengajaknya kembali itu sulit.

    PROMPT Tambahkan pola permission priming dari Universe untuk lokasi, lalu state ditolak dengan jalan keluar setelah pengguna memilih tidak.

    Hasil: Layar yang menjelaskan permintaan sebelum dialog sistem, dan jalur untuk orang yang menolak.

    Universe (Pro)State

  • Offline, memuat dan error

    Jaringan putus di kereta, dan aplikasimu menampilkan spinner selamanya.

    PROMPT Untuk setiap frame di alur Home, tambahkan variant memuat, offline dan error, lalu daftar apa yang kamu tambahkan.

    Hasil: Daftar cakupan yang bisa kamu periksa, dan frame yang sesuai.

    Component dan variantRiwayat perubahan

  • Layar berlangganan

    Kamu menambah paket berbayar, dan layar yang meminta uang adalah yang paling tidak boleh ditebak-tebak.

    PROMPT Gambar paywall dengan paket bulanan dan tahunan, link pulihkan pembelian, state pembayaran gagal dan konfirmasi. Pakai token milikku.

    Hasil: Setiap state paywall, termasuk yang berjalan salah.

    UniverseToken

  • Dark mode di setiap layar

    Pengguna iOS dan Android mengharapkan aplikasi mengikuti tema sistem.

    PROMPT Beri token warna nilai gelap, lalu tampilkan alur sign in dalam dark mode dan daftar teks yang gagal kontras.

    Hasil: Dark mode dari frame yang sama, digerakkan oleh nilai token.

    Token dan modeLint

  • Screenshot toko dari layar asli

    Hari rilis sudah dekat dan screenshot masih berupa placeholder abu-abu.

    PROMPT Buat lima screenshot toko aplikasi dari alur utama dengan keterangan singkat, memakai warna brand-ku.

    Hasil: Screenshot yang digambar dari frame yang sama dengan aplikasinya, siap diekspor sebagai PNG.

    Launch kitExport

YANG PERLU DILIHAT

Fitur yang paling penting untukmu.

  • Koneksi MCP

    Coding agent kamu bekerja langsung di file desain, jadi kamu tidak perlu mengetik ulang keputusan antar alat.

  • Frame dengan auto layout

    Layar di ukuran ponsel berubah ukuran dan menata ulang seperti aslinya, jadi desain adalah pratinjau yang jujur dari build.

  • Pola Universe

    Permission priming, sign in nomor telepon dan lainnya, diberi tag iOS dan Android, sebagai titik awal alih-alih frame kosong. Bagian dari Pro.

  • Prototype yang bisa dimainkan

    Rasakan alurnya sebelum membangun, dan bagikan sebagai link.

  • Component dan variant

    Tombol atau baris daftar digambar sekali, dan state serta ukurannya mengikuti.

  • Token dengan mode terang dan gelap

    Dark mode dan perubahan brand adalah perubahan nilai, bukan set layar kedua.

  • Panduan yang wajib dibaca agent

    Aturan platformmu diterapkan tanpa perlu diulang di setiap prompt.

  • Catatan di layer

    Masukan menempel di layer yang dimaksud. Agent menindaklanjutinya dan melaporkan apa yang ia lakukan.

  • Code name dan build check

    Desain dan kode berbagi nama, dan aplikasi yang berjalan dibandingkan dengan frame.

  • Launch kit

    Screenshot toko aplikasi digambar dari layar aslimu dan tetap terbaru.

PERTANYAAN

Jawaban langsung.

Bisakah saya membuat prototype aplikasi mobile di Wonderblok?

Bisa. Hubungkan frame satu sama lain dan mainkan prototype di aplikasi, lalu bagikan sebagai link.

Apakah bisa membuat screenshot App Store?

Launch kit menggambar screenshot toko aplikasi dari layar milikmu sendiri, jadi cocok dengan aplikasinya dan ikut berubah saat layarnya berubah.

Bagaimana memeriksa bahwa build sesuai desain?

Build check membandingkan aplikasi yang berjalan dengan frame dan melaporkan di mana bedanya.

Apakah mendukung iOS dan Android?

Frame tidak terikat pada platform. Pola di Universe diberi tag iOS dan Android, dan kamu mengatur ukuran frame yang dibutuhkan.

Apakah paket Free cukup untuk mencoba ini?

Free mencakup 100 panggilan MCP per minggu, cukup untuk mendesain alur sign in dan beberapa state bersama agent. Mendesain satu aplikasi utuh dengan agent akan memakai lebih banyak, dan untuk itulah ada Pro dengan batas yang jauh lebih tinggi. Pola Universe adalah bagian dari Pro.

Apakah cocok dengan Swift, Kotlin, Flutter atau React Native?

Frame tidak terikat pada framework. Kamu mengatur nama component dan token agar cocok dengan kodemu, dan coding agent kamu membangun dari file desain di stack apa pun yang kamu pakai.

Apakah prototype itu aplikasi sungguhan?

Bukan. Ia dimainkan di dalam Wonderblok dan sebagai link yang dibagikan, supaya kamu bisa merasakan alurnya dan mengumpulkan pendapat. Ini bukan build native. Aplikasi sungguhan datang dari kodemu, dan build check membandingkannya dengan desain.

BATASAN YANG JUJUR

Yang perlu kamu tahu sebelum mulai.

  • Wonderblok berjalan di macOS saat ini. Windows, Linux, serta tablet Android dan iOS segera hadir.
  • Prototype dimainkan di dalam Wonderblok dan sebagai link yang dibagikan; ini bukan build native.
  • Universe adalah bagian dari Pro.

JUGA UNTUK

Lebih banyak di Membangun produk dan kelompok lain di halaman Solusi.

Coba untuk satu pekerjaan nyata.

Unduh untuk macOS dan mulai dari paket Free. Windows, Linux, dan tablet segera hadir. Tanpa kartu.

Dapatkan akses awalLihat harga