wonderblok
Get early access

Desain dan rancang app kamu bersama agent.

Wonderblok adalah canvas desain yang dikerjakan oleh coding agent kamu. Solo founder menghubungkan Claude Code atau Codex lewat MCP, menjelaskan app-nya, lalu mendapat flow, screen, dan component di canvas, dibangun di atas pattern Universe untuk onboarding, sign in, dan checkout. Nama di desain sama dengan nama di kode kamu, jadi build dimulai dari desain.

Dapatkan akses awalLihat harga
MCPUniversePrototypeCode names

UNTUK SIAPA INI

Terdengar familiar?

Kamu founder, product manager, desainer, sekaligus engineer. Idenya jelas di kepala dan agent bisa menulis kodenya, tapi ada jarak di antaranya: seperti apa sebenarnya app ini, screen demi screen, state demi state? Selama ini jarak itu diisi tebakan, dan tebakan itu berujung pada build ulang.

Wonderblok menutup jarak itu. Agent kamu membaca file desain lewat MCP, membuat draf flow dan screen, lalu menaruhnya di canvas yang bisa kamu lihat dan ubah. Kamu mereview, bukan menggambar. Saat sebuah screen sudah benar, component dan token-nya memakai nama yang sama dengan di kodemu.

  • Agent membangun sebelum ada yang diputuskan

    Tanpa desain, coding agent memilih layout dan flow sendiri. Kamu baru tahu setelah kodenya ada.

  • Screen tanpa state

    State kosong, loading, dan error adalah hal pertama yang dilewatkan build solo, dan hal pertama yang ditemui pengguna.

  • Tool desain untuk tim

    Suite desain lengkap lambat dipelajari dan lambat diberikan ke agent. Kamu butuh sesuatu yang bisa dijalankan agent kamu.

CONTOH SATU MINGGU

Dari ide satu kalimat ke build pertama, dalam seminggu

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

  1. Senin

    Ide mulai berbentuk

    Kamu baru punya satu kalimat: app langganan kopi specialty. Kamu menghubungkan Claude Code, menulis lima baris aturan ke dalam file, lalu meminta flow. Menjelang makan siang sudah ada empat flow di canvas: daftar, pilih roast, bayar, kelola langganan. Kamu menghapus satu dan mengganti nama dua.

  2. Selasa

    Flow jadi screen

    Kamu meminta screen untuk flow pertama, lengkap dengan state kosong, loading, dan error. Agent mengambil pattern sign in dan paywall dari Universe lalu memberi nama dan warna kamu. Sore harinya kamu membaca screen seperti pengguna, dan meninggalkan catatan di tiga screen yang terasa janggal.

  3. Rabu

    Kamu memainkannya

    Kamu menghubungkan frame dan memainkan prototype di dalam app. Checkout perlu dipangkas satu langkah. Agent menerapkan catatan kamu, memberi tahu apa yang diubah, dan kamu menyimpan atau me-revert tiap perubahan. Kamu mengirim link prototype ke dua teman dan membawa komentar mereka kembali ke canvas.

  4. Kamis

    Jadi sebuah sistem

    Warna, tipografi, dan spacing yang dipakai agent menjadi token. Card dan tombol menjadi component dengan variant. Kamu meminta dark mode dan mendapatkannya dari nilai gelap token kamu, bukan dari kumpulan screen kedua.

  5. Jumat

    Build dimulai dari desain

    Nama component dan token disesuaikan dengan kodemu. Kamu mengarahkan coding agent ke file desain dan ia membangun flow pertama. Saat app berjalan, build check membandingkannya dengan frame dan mencantumkan di mana bedanya.

  6. Minggu depan

    Aset peluncuran dari screen yang sama

    Launch kit menggambar screenshot store dari screen asli kamu, lengkap dengan caption singkat. Saat kamu mengubah sebuah screen, screenshot-nya ikut berubah. Kamu tidak perlu membuka tool kedua.

SEBELUM DAN SESUDAH

Apa yang berubah setelah agent kamu punya kanvas.

TANPA FILE DESAIN

  • Agent yang memutuskan tampilan app sambil menulis kode, dan kamu baru tahu setelahnya.
  • State kosong, loading, dan error terlewat karena tidak ada yang menggambarnya.
  • Sepuluh screen kemudian, ada tiga jenis tombol dan lima abu-abu.
  • Desain ada di tool yang tidak bisa dibaca agent, jadi setiap keputusan diketik ulang di prompt.
  • Screenshot store dikerjakan terburu-buru dari apa pun yang tampil di build hari itu.

DENGAN WONDERBLOK

  • Agent menggambar screen lebih dulu di canvas kamu, dan kamu mereview sebelum ada kode.
  • Setiap flow punya state-nya, karena memintanya hanya butuh satu kalimat.
  • Token dan component menjaga app tetap konsisten, dan agent wajib memakainya.
  • Aturan kamu ada di dalam file. Edit berhenti sampai agent membaca versi terbaru.
  • Screenshot store berasal dari frame yang sama dengan app dan selalu terbaru.

CARA KERJANYA

Solo founder: 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. Sejak itu agent bisa melihat daftar file kamu, membaca tree, dan mengedit frame, teks, component, dan token. Semuanya tetap dalam satu file .wonderblok di perangkat kamu.

    MCPFile lokal

    Kamu dapat: Agent kamu bisa melihat dan mengubah file desain.

  2. 02

    Tulis aturan kamu sekali saja

    Taruh keputusan yang biasanya kamu ulang di setiap prompt ke dalam guideline file: nada bicara produk, spacing yang kamu suka, component mana untuk apa. Agent wajib membaca versi terbaru sebelum boleh mengedit, dan saat aturan berubah ia harus membacanya lagi.

    GuidelineWajib baca sebelum edit

    KAMU BILANG

    Baca guideline desain. Lalu beri tahu saya aturan saya yang mana yang dilanggar tiga edit terakhir kamu, kalau ada.

    Kamu dapat: Buku aturan singkat yang diikuti agent tanpa perlu diingatkan.

  3. 03

    Gambar flow dulu, baru screen

    Minta flow sebelum screen: menghapus satu kotak lebih murah daripada menghapus satu screen. Setelah itu minta screen untuk satu flow dalam satu waktu, termasuk state yang sering terlupa. Kamu mereview tiap frame di canvas.

    Frame dan auto layoutState

    KAMU BILANG

    Gambar flow daftar untuk app langganan kopi sebagai lima frame 390 kali 844: welcome, email, verifikasi, pilih roast, selesai. Tambahkan state error untuk kode yang salah.

    Kamu dapat: Frame yang saling terhubung beserta state-nya, bukan hanya satu jalur mulus.

  4. 04

    Mulai dari pattern yang sudah terbukti

    Universe berisi pattern nyata untuk onboarding, sign in, paywall, state kosong, dan lainnya, diambil dari app yang sudah rilis dan berbentuk frame yang bisa diedit. Agent kamu menambahkan yang paling dekat ke file kamu dan memetakannya ke token kamu, jadi kamu mulai dari sesuatu yang terbukti lalu menjadikannya milikmu.

    Universe (Pro)Token

    KAMU BILANG

    Tambahkan pattern permission priming dari Universe untuk notifikasi, lalu ubah gayanya dengan token dan teks saya.

    Kamu dapat: Struktur yang terbukti dengan brand kamu, bukan halaman kosong.

  5. 05

    Mainkan, lalu tinggalkan catatan

    Hubungkan frame dan mainkan prototype di dalam app, atau bagikan sebagai link. Di bagian yang terasa salah, tinggalkan catatan di layer-nya. Agent membaca catatan, menindaklanjutinya, melaporkan apa yang diubah, dan menandainya selesai.

    PrototypeCatatanRiwayat perubahan

    KAMU BILANG

    Terapkan catatan saya di frame Checkout dan beri tahu persis apa yang kamu ubah.

    Kamu dapat: Masukan sampai ke layer yang dimaksud, dan kamu mereview hasilnya.

  6. 06

    Ubah jadi sebuah sistem

    Warna, tipografi, dan spacing menjadi token dengan mode terang dan gelap. Bagian yang berulang menjadi component dengan variant. Screen baru lalu memakainya kembali, jadi gaya tetap di satu tempat dan satu perubahan menjangkau semua screen.

    Token dan modeComponent dan variant

    KAMU BILANG

    Daftar semua nilai warna dan spacing di frame Checkout yang bukan token, lalu ganti masing-masing dengan token terdekat.

    Kamu dapat: Design system yang tumbuh dari screen yang nyata.

  7. 07

    Serahkan ke kode, lalu cek build-nya

    Nama component dan token disesuaikan dengan kodemu. Coding agent kamu membangun dari file desain, bukan dari screenshot. Saat app berjalan, build check membandingkannya dengan frame dan melaporkan perbedaannya.

    Code namesBuild check

    KAMU BILANG

    Atur code name component Checkout ke nama component React saya, lalu bangun screen-nya dari frame.

    Kamu dapat: Build dimulai dari desain, dan penyimpangan terlihat.

KASUS PENGGUNAAN

Enam pekerjaan yang bisa kamu serahkan ke agent minggu ini.

  • Onboarding dan first run

    Kebanyakan pengguna memutuskan dalam menit pertama. Kamu tidak punya budget riset dan tidak punya desainer.

    PROMPT Desain onboarding untuk app langganan kopi: welcome, permission priming untuk notifikasi, pilih roast, dan screen home pertama yang masih kosong. Pakai pattern Universe.

    Hasil: Empat frame terhubung yang bisa kamu mainkan, dibangun di atas pattern dari app yang sudah rilis.

    UniversePrototype

  • Paywall dan checkout

    Screen yang berhubungan dengan uang adalah tempat desain kasar menghabiskan pendapatan nyata, dan tempat kamu paling kekurangan waktu.

    PROMPT Gambar paywall dengan paket bulanan dan tahunan, state kode promo, state pembayaran gagal, dan struk. Pakai token saya.

    Hasil: Setiap state alur pembayaran, termasuk yang berjalan salah.

    UniverseStateToken

  • Setiap state, bukan hanya jalur mulus

    Pengguna pertama yang menemui daftar kosong atau koneksi terputus menentukan seperti apa produk kamu terasa.

    PROMPT Untuk setiap frame di flow Orders, tambahkan variant kosong, loading, dan error, lalu daftar apa yang kamu tambahkan.

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

    Component dan variantRiwayat perubahan

  • Pengaturan, akun, dan dark mode

    Pengaturan itu belasan screen kecil yang tidak ada yang mau menggambarnya. Dark mode menggandakannya.

    PROMPT Gambar pengaturan, profil, dan preferensi notifikasi dengan component yang sudah ada, lalu beri setiap screen dark mode dari token saya.

    Hasil: Area pengaturan lengkap dalam terang dan gelap, dari satu set token.

    ComponentToken dan mode

  • Halaman marketing untuk app kamu

    Kamu butuh landing page untuk peluncuran, dengan brand yang sama dengan app.

    PROMPT Gambar landing page di 1440 dan 390: hero, tiga fitur dengan screen dari app, harga, dan footer, pakai token saya.

    Hasil: Landing page yang memakai ulang screen dan brand asli kamu.

    FrameTokenExport

  • Saat ide berpindah arah

    Dua minggu berjalan, audiens berubah dan seluruh produk butuh nada dan palet warna yang berbeda.

    PROMPT Ubah token warna utama dan typeface heading ke brand baru, lalu daftar frame mana yang kontrasnya kini gagal.

    Hasil: Satu perubahan di token menjangkau setiap screen, dan masalahnya didaftarkan untuk kamu.

    TokenLint

YANG PERLU DILIHAT

Fitur yang paling penting untukmu.

  • Koneksi MCP

    Coding agent kamu bekerja langsung di desain. Kamu tidak perlu lagi menyalin keputusan antar tool.

  • Guideline yang wajib dibaca agent

    Aturan kamu diterapkan tanpa kamu ulang, dan aturan lama tidak bisa terpakai tanpa sengaja.

  • Pattern Universe

    Kamu mulai dari struktur yang terbukti di app yang sudah rilis. Bagian dari Pro.

  • Frame dengan auto layout

    Screen berubah ukuran dan menyusun ulang seperti aslinya, jadi desain adalah janji yang masuk akal untuk build.

  • Component dan variant

    Gambar tombol sekali. State dan ukurannya mengikuti.

  • Token dengan mode terang dan gelap

    Perubahan brand atau dark mode adalah perubahan nilai, bukan menggambar ulang.

  • Prototype yang bisa dimainkan

    Kamu merasakan flow sebelum membangunnya, dan teman bisa mengkliknya dari sebuah link.

  • Catatan, riwayat perubahan, dan revert

    Kamu tetap memegang kendali atas agent yang mengedit dengan cepat.

  • Code names dan build check

    Desain dan kode memakai nama yang sama, dan perbedaannya terlihat setelah build.

  • Launch kit

    Screenshot store berasal dari screen asli kamu dan selalu terbaru.

PERTANYAAN

Jawaban langsung.

Bisakah saya mendesain app dengan Claude Code?

Bisa. Hubungkan Claude Code ke Wonderblok lewat MCP, dan ia bisa membaca file desain kamu, menambah frame, component, dan token, lalu mengeditnya. Ia wajib membaca guideline desain kamu sebelum mengedit.

Apakah saya perlu pengalaman desain?

Tidak. Universe menyediakan pattern yang sudah terbukti, dan agent kamu memakainya. Kamu mereview, mengubah yang tidak kamu suka, lalu lanjut.

Apakah desainnya berubah jadi kode?

Tidak membuat app kamu secara otomatis. Desain memakai nama component dan token yang sama dengan kodemu, jadi agent kamu membangun darinya, dan build check membandingkan app yang berjalan dengan desain.

Apakah butuh koneksi internet atau akun?

Wonderblok berjalan di perangkat kamu dan file tetap lokal. Free bisa dipakai tanpa akun. Universe dan batas MCP yang lebih tinggi datang dengan akun Pro.

Apakah paket Free cukup untuk solo founder?

Free mencakup 100 panggilan MCP per minggu, cukup untuk mencoba alur kerja ini di satu atau dua flow. Mendesain seluruh app dengan agent akan memakai lebih banyak, dan untuk itulah Pro dengan batas yang jauh lebih tinggi.

Apakah ini menggantikan desainer?

Ini menggantikan halaman kosong dan pekerjaan produksi yang berulang. Keputusan soal selera tetap di tanganmu, dan desainer masih bisa layak dipekerjakan untuk brand atau masalah produk yang sulit.

Apakah bisa dipakai dengan React Native, Flutter, atau SwiftUI?

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

BATASAN YANG JUJUR

Yang perlu kamu tahu sebelum mulai.

  • Wonderblok berjalan di macOS saat ini. Windows, Linux, serta tablet Android dan iOS segera hadir.
  • Pattern Universe adalah bagian dari Pro; canvas dan MCP gratis dalam batas paket Free.

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