wonderblok
Get early access

Ubah spec jadi layar yang bisa diklik.

Product manager bisa mendeskripsikan sebuah fitur ke agent yang terhubung dengan Wonderblok dan mendapat layar yang saling terhubung, lengkap dengan state kosong, memuat dan error, lalu membagikan prototype yang bisa diklik untuk dimintai masukan sebelum engineering mulai. Catatan di sebuah layer sampai ke agent, yang memperbaikinya dan melaporkan apa yang berubah.

Dapatkan akses awalLihat harga
MCPCatatanPrototypeLink berbagi

UNTUK SIAPA INI

Terdengar familiar?

Spec dalam kata-kata dibaca dengan sebanyak cara seperti jumlah pembacanya. Mockup baru datang seminggu kemudian dan menjawab pertanyaan yang lain. Kamu butuh sesuatu di antaranya: layar yang cukup cepat untuk jadi bagian dari percakapan, dan cukup spesifik agar engineering dan desain berdebat soal hal yang tepat.

Dengan agent di canvas, kamu bisa mendeskripsikan alur saat meeting, melihatnya muncul, meninggalkan catatan di sebuah layer, dan melihatnya berubah. Link prototype bisa sampai ke stakeholder di hari yang sama.

  • Ambiguitas di dalam spec

    Kata-kata melewatkan state: apa yang terjadi saat daftarnya kosong atau pembayaran gagal?

  • Desain jadi antrean

    Menunggu mockup memperlambat setiap keputusan yang bergantung padanya.

  • Masukan tersebar di banyak chat

    Komentar tinggal di thread, bukan di layar yang dibicarakan.

CONTOH SATU MINGGU

Dari spec tertulis ke prototype yang bisa diklik, dalam seminggu

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

  1. Senin

    Spec berubah jadi alur

    Kamu memegang fitur permintaan refund untuk produk berlangganan. Spec-nya dua halaman. Kamu menghubungkan Claude Code, menempel bagian utamanya dan meminta alurnya. Menjelang akhir pagi ada enam frame yang saling terhubung di canvas: titik masuk, pilihan alasan, konfirmasi, layar status, daftar kosong dan pengiriman yang gagal.

  2. Selasa

    Kamu membaca state yang dilewati spec

    Spec menyebut apa yang terjadi saat refund disetujui. Ia tidak menyebut apa yang tampil untuk refund yang sudah pernah diajukan, atau untuk orang yang tidak memenuhi syarat. Keduanya kini ada di canvas. Dua pertanyaan terbuka kamu tulis di frame tempat keduanya berada.

  3. Rabu

    Meeting mengubah layarnya

    Di review bersama desain dan engineering, kamu meninggalkan catatan di tiga layer sambil orang-orang bicara: daftar alasan terlalu panjang, label tombol kurang jelas, status perlu tanggal. Agent menerapkannya dan memberi tahu apa yang ia ubah. Dua perubahan kamu pertahankan dan satu kamu kembalikan, lalu diskusi pindah ke trade-off yang sebenarnya.

  4. Kamis

    Kamu mencocokkan layar dengan kriterianya

    Kamu menempel kriteria penerimaan dan bertanya apa yang tidak tercakup layar. Agent mendaftar dua celah: tidak ada cara membatalkan permintaan, dan tidak ada pesan untuk permintaan yang terlambat. Keduanya kamu tambahkan. Daftar itu kini jadi draf pertama rencana tes.

  5. Jumat

    Stakeholder mengkliknya

    Kamu menghubungkan frame secara berurutan dan mengirim prototype sebagai link ke kepala support dan seorang lead finance. Mereka mengklik, bukan membaca. Pertanyaan mereka soal alur, bukan soal apa maksud spec. Komentarnya kamu bawa kembali ke canvas.

  6. Minggu depan

    Desain dan engineering mulai dari sesuatu yang spesifik

    Kamu mengekspor layar sebagai PNG atau PDF untuk tiket dan menyimpan riwayat perubahan sebagai catatan apa yang bergeser dan kenapa. Desain menyempurnakan layar, bukan mengarangnya dari nol. Engineering mulai dengan alur yang setiap state-nya sudah punya nama.

SEBELUM DAN SESUDAH

Apa yang berubah setelah agent kamu punya kanvas.

TANPA FILE DESAIN

  • Spec dalam kata-kata dibaca dengan sebanyak cara seperti jumlah pembacanya.
  • State kosong, memuat dan error baru ditemukan saat build, ketika mengubahnya sudah mahal.
  • Mockup butuh seminggu dan menjawab pertanyaan yang sudah basi.
  • Masukan tersebar di thread chat dan tidak terhubung dengan layar yang dibicarakan.
  • Stakeholder menyetujui dokumen lalu kaget melihat produknya.

DENGAN WONDERBLOK

  • Alurnya muncul di canvas di hari yang sama, cukup spesifik untuk diperdebatkan.
  • Setiap state yang ditambahkan agent adalah keputusan yang terlihat dan bisa kamu terima atau ubah.
  • Masukan berupa catatan di layer, dan agent menindaklanjutinya serta melaporkan apa yang berubah.
  • Kamu bisa bertanya kriteria penerimaan mana yang belum tercakup layar, sebelum engineering mulai.
  • Stakeholder mengklik link prototype dan bereaksi pada alurnya, bukan pada sebuah paragraf.

CARA KERJANYA

Product manager: 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 menambah frame, teks, component dan token. File tetap ada di perangkatmu.

    MCPFile lokal

    Kamu dapat: Agent kamu bisa menggambar di canvas yang akan kamu tinjau.

  2. 02

    Tuliskan aturan dasarnya

    Beberapa baris di panduan dalam file menghemat pengulanganmu: nada produk, kata yang kamu pakai untuk sesuatu, layar mana yang masuk cakupan. Agent wajib membaca versi terbaru sebelum boleh mengedit.

    PanduanBaca sebelum edit

    KAMU BILANG

    Baca panduan desain. Lalu beri tahu aku kata mana di spec di bawah ini yang tidak cocok dengan kosakata produk.

    Kamu dapat: Layar yang memakai bahasa produkmu, bukan label generik.

  3. 03

    Ubah spec jadi alur

    Tempel bagian spec atau deskripsikan perjalanannya dengan kata-kata biasa. Minta alurnya dulu, karena menghapus kotak lebih murah daripada menghapus layar. Lalu minta layar untuk alur itu, saling terhubung berurutan.

    Frame dengan auto layoutUniverse (Pro)

    KAMU BILANG

    Ubah spec ini jadi alur lima layar dengan state untuk daftar kosong dan pembayaran gagal, lalu hubungkan layarnya secara berurutan.

    Kamu dapat: Frame yang saling terhubung dan bisa dibaca seperti storyboard.

  4. 04

    Baca setiap state yang ditambahkan agent

    Lihat layar kosong, memuat dan error seperti pengguna melihatnya. Masing-masing adalah keputusan yang tidak diambil spec. Terima, ubah, atau tulis pertanyaan terbukanya di frame supaya dilihat orang yang tepat.

    Component dan variantCatatan

    KAMU BILANG

    Untuk setiap frame di alur refund, tambahkan variant kosong, memuat dan error, lalu daftar pertanyaan yang muncul dari masing-masing untuk spec.

    Kamu dapat: Daftar keputusan yang selama ini bersembunyi di dalam spec.

  5. 05

    Cocokkan layar dengan kriteria penerimaan

    Tempel kriterianya dan minta agent membandingkannya dengan frame. Jawabannya berupa daftar apa yang tercakup dan apa yang tidak. Ini ajakan untuk kamu melihat layarnya, bukan vonis.

    MCPRiwayat perubahan

    KAMU BILANG

    Bandingkan prototype dengan kriteria penerimaan di bawah ini dan daftar apa pun yang tidak tercakup layar.

    Kamu dapat: Daftar cakupan untuk dibawa ke engineering dan desain.

  6. 06

    Ubah saat meeting

    Tinggalkan catatan di layer saat masukan datang. Agent membacanya, menindaklanjutinya, melaporkan apa yang diubah dan menandainya selesai. Buka riwayat perubahan untuk mempertahankan atau mengembalikan tiap perubahan.

    CatatanRiwayat perubahan dan revert

    KAMU BILANG

    Aku meninggalkan tiga catatan di frame Checkout. Terapkan dan beri tahu aku apa yang kamu ubah.

    Kamu dapat: Masukan mendarat di layar yang dibicarakan, dan kamu yang memutuskan apa yang bertahan.

  7. 07

    Bagikan prototype dan layarnya

    Hubungkan frame, mainkan prototype di aplikasi untuk mengecek alurnya sendiri, lalu bagikan sebagai link. Untuk tiket dan dokumen, ekspor layar sebagai PNG atau PDF.

    PrototypeLink berbagiExport PNG, SVG, PDF

    Kamu dapat: Link yang bisa diklik orang, dan gambar untuk tiket.

KASUS PENGGUNAAN

Enam pekerjaan yang bisa kamu serahkan ke agent minggu ini.

  • Fitur baru dari sebuah spec

    Kamu punya spec dan tenggat untuk review pertama, sementara desainer sudah penuh dua minggu.

    PROMPT Ubah spec ini jadi alur lima layar dengan state untuk daftar kosong dan pembayaran gagal, lalu hubungkan layarnya secara berurutan.

    Hasil: Alur yang terhubung beserta state gagalnya, siap untuk review pertama.

    MCPPrototype

  • Menemukan state yang tidak ditulis siapa pun

    Spec menjelaskan jalur normal. Pertanyaan datang belakangan dari para engineer, satu per satu.

    PROMPT Untuk setiap frame di alur refund, tambahkan variant kosong, memuat dan error, lalu daftar pertanyaan yang muncul dari masing-masing untuk spec.

    Hasil: State yang hilang kini ada di canvas, dengan daftar pertanyaan terbuka untuk spec.

    Component dan variantCatatan

  • Memeriksa cakupan sebelum engineering

    Kamu sudah menulis kriteria penerimaan dan ingin tahu apakah layarnya bisa memenuhinya.

    PROMPT Bandingkan prototype dengan kriteria penerimaan di bawah ini dan daftar apa pun yang tidak tercakup layar.

    Hasil: Daftar celah yang perlu diperbaiki di layar atau di kriterianya.

    MCP

  • Masukan dari orang yang tidak memakai alat desain

    Support, finance dan sales punya pendapat yang penting, dan tidak satu pun dari mereka akan membuka file desain.

    PROMPT Hubungkan layar refund secara berurutan, mulai dari halaman akun, supaya bisa diklik sebagai prototype.

    Hasil: Link prototype yang bisa mereka klik, jadi masukannya tentang alur.

    PrototypeLink berbagi

  • Mengubah layar sambil orang bicara

    Meeting review menghasilkan sepuluh perubahan kecil dan tidak ada yang ingat semuanya pada hari Kamis.

    PROMPT Aku meninggalkan lima catatan di frame Status. Terapkan, beri tahu apa yang kamu ubah, dan tandai setiap catatan selesai.

    Hasil: Perubahan sudah dibuat dan bisa ditinjau, dan catatannya tertutup.

    CatatanRiwayat perubahan

  • Dua opsi yang harus diputuskan

    Tim terbelah antara form permintaan satu halaman dan yang tiga langkah, dan masing-masing berdebat dari imajinasi.

    PROMPT Gambar kedua versi permintaan refund, satu sebagai satu halaman dan satu sebagai tiga langkah, dan hubungkan masing-masing ke prototype sendiri supaya bisa dibandingkan.

    Hasil: Dua opsi yang bisa diklik, jadi perdebatannya soal sesuatu yang sudah dilihat tim.

    FramePrototype

YANG PERLU DILIHAT

Fitur yang paling penting untukmu.

  • Koneksi MCP

    Kamu mendeskripsikan alur dengan kata biasa dan agent menaruhnya di canvas, jadi kamu tidak perlu menunggu antrean desain untuk memulai percakapan.

  • Frame dengan auto layout

    Layar berubah ukuran dan menata ulang seperti aslinya, jadi prototype adalah pratinjau yang bisa dipercaya.

  • Component dan variant

    State kosong, memuat dan error adalah variant dari layar yang sama, jadi menambahkannya cukup satu kalimat.

  • Catatan di layer

    Masukan menempel di layar yang dimaksud. Agent membaca tiap catatan, menindaklanjutinya dan menandainya selesai.

  • Prototype yang bisa dimainkan

    Orang mengklik alurnya, bukan membaca tentangnya.

  • Link berbagi

    Stakeholder menerima prototype sebagai link dan bisa mengkliknya.

  • Riwayat perubahan dan revert

    Agent mengedit dengan cepat. Kamu bisa melihat apa yang berubah sejak terakhir melihat dan membatalkan yang mana pun.

  • Panduan yang wajib dibaca agent

    Kosakata dan aturan produkmu berlaku di setiap layar tanpa perlu kamu ulang.

  • Export PNG, SVG dan PDF

    Layar masuk ke tiket, dokumen atau slide sebagai gambar.

  • Pola Universe

    Agent memulai dari struktur yang terbukti di aplikasi yang sudah rilis, seperti sign in, onboarding atau checkout. Bagian dari Pro.

PERTANYAAN

Jawaban langsung.

Bisakah saya mengubah spec produk menjadi layar?

Bisa. Deskripsikan alurnya ke agent yang terhubung dan ia membuat draf layar yang saling terhubung, termasuk state kosong, memuat dan error, yang bisa kamu tinjau dan ubah.

Apakah saya harus bisa mendesain?

Tidak. Pola Universe memberi agent struktur awal yang baik, dan kamu mengarahkannya dengan bahasa biasa dan catatan.

Bagaimana stakeholder melihatnya?

Bagikan prototype sebagai link dan mereka bisa mengkliknya.

Bisakah saya memberi masukan untuk agent?

Bisa. Catatan di sebuah layer dibaca agent, yang bisa menindaklanjutinya dan menandainya selesai.

Apakah paket Free cukup untuk mencoba ini?

Free mencakup 100 panggilan MCP per minggu. Itu cukup untuk mengubah satu spec jadi alur dan beberapa state bersama agent. Kalau kamu melakukannya untuk beberapa fitur dalam seminggu, Pro punya batas yang jauh lebih tinggi dan menambah pola Universe.

Bisakah tim saya mengedit file yang sama?

Belum. Workspace tim segera hadir, dan saat ini sebuah file tinggal di perangkat satu orang. Kamu bisa membagikan prototype sebagai link dan mengekspor layar sebagai gambar, tapi belum ada kolaborasi real-time.

Apakah prototype menggantikan desain dan engineering?

Tidak. Ia menunjukkan alur dan setiap state supaya tim berdebat soal hal yang tepat lebih awal. Ini bukan software yang berfungsi, dan desainer tetap bisa memperbaiki layarnya jauh lebih baik.

BATASAN YANG JUJUR

Yang perlu kamu tahu sebelum mulai.

  • Wonderblok berjalan di macOS saat ini. Windows, Linux, serta tablet Android dan iOS segera hadir.
  • Workspace tim segera hadir; saat ini sebuah file tinggal di perangkat satu orang.
  • Prototype menunjukkan alurnya, bukan software yang berfungsi.

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