wonderblok
Get early access

Beri coding agent kamu desain untuk diikuti.

Kalau kamu membangun dengan coding agent dan tampilan UI terus melenceng, yang kurang adalah desain yang bisa dibaca agent. Wonderblok adalah file desain yang diedit agent kamu lewat MCP, lengkap dengan token, component dan aturan tertulis yang wajib dibaca sebelum setiap edit, sehingga tiap layar tetap konsisten dengan layar sebelumnya.

Dapatkan akses awalLihat harga
TokenComponentPanduanRiwayat perubahan

UNTUK SIAPA INI

Terdengar familiar?

Kamu mendeskripsikan sebuah layar, agent membangunnya, dan hasilnya terlihat bagus. Sepuluh layar kemudian tidak ada yang senada: tiga jenis tombol, lima warna abu-abu, jarak yang berubah-ubah. Agent bukan ceroboh. Ia hanya tidak punya sumber kebenaran tentang tampilan produkmu.

Wonderblok adalah sumber kebenaran itu. Warna, tipografi dan jarak disimpan sebagai token. Component digambar sekali. Panduan tertulis ada di dalam file, dan agent wajib membaca versi terbarunya sebelum boleh mengedit apa pun. Prompt kamu jadi lebih pendek karena aturannya tidak lagi tinggal di sana.

  • Setiap layar terlihat sedikit berbeda

    Tanpa token dan component bersama, agent menemukan ulang gayanya setiap kali.

  • Aturan tinggal di prompt yang panjang

    Panduan gaya yang ditempel di tiap chat bisa terlupa, terpotong atau bertabrakan.

  • Kamu tidak bisa melihat apa yang diubah agent

    Perubahan masuk ke kode tanpa tempat untuk meninjaunya sebagai desain.

CONTOH SATU MINGGU

Dari sepuluh layar yang tidak senada jadi satu sistem, dalam seminggu

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

  1. Senin

    Kamu menuliskan apa yang terus kamu ulang

    Kamu sedang membangun aplikasi habit tracker dengan Claude Code. Aplikasinya jalan, tapi setiap prompt dibuka dengan paragraf yang sama soal jarak, tombol dan nada bahasa. Paragraf itu kamu tempel sekali ke panduan di dalam file, enam baris pendek. Prompt berikutnya mulai tanpa paragraf itu.

  2. Selasa

    Abu-abu berubah jadi token

    Kamu minta agent mendaftar semua warna dan jarak di frame yang sudah ada. Ada lima abu-abu dan empat padding yang hampir sama. Kamu pertahankan satu abu-abu dan dua padding, beri nama, lalu agent mengganti sisanya dengan token terdekat.

  3. Rabu

    Layar baru datang dari component

    Kamu butuh layar tagihan. Kamu minta agent membaca panduan, lalu membangunnya hanya dari component dan token yang ada, dan memberi tahu apa yang tidak bisa dicocokkan. Ia kembali dengan layar jadi dan satu catatan jujur: belum ada component untuk baris perbandingan paket.

  4. Kamis

    Kamu ubah aturan, agent harus menyusul

    Kamu memutuskan card mendapat sudut yang lebih membulat. Kamu perbarui panduan. Edit berikutnya dari agent ditolak sampai ia membaca versi baru. Ia membaca, menerapkan perubahan ke component card, dan semua layar yang memakai card ikut berubah.

  5. Jumat

    Kamu meninjau seperti desainer

    Kamu buka riwayat perubahan dan menelusuri apa saja yang disentuh agent minggu ini. Sebagian besar kamu pertahankan, satu perubahan jarak di layar profil kamu kembalikan, dan kamu tinggalkan catatan di tombol yang terasa terlalu kecil. Agent memperbaikinya dan menyebut apa yang ia ubah.

  6. Minggu depan

    Kode mengikuti desain

    Kamu atur code name pada component supaya sama dengan nama React kamu, lalu mengarahkan coding agent ke file desain. Ia membangun layar berikutnya dari frame, bukan dari deskripsimu. Saat aplikasi berjalan, build check mendaftar bagian yang berbeda dari desain.

SEBELUM DAN SESUDAH

Apa yang berubah setelah agent kamu punya kanvas.

TANPA FILE DESAIN

  • Setiap layar terlihat sedikit berbeda, karena agent menemukan ulang tombol dan jarak setiap kali.
  • Aturan gayamu tinggal di prompt panjang yang bisa terpotong, terlupa atau bertabrakan.
  • Kamu tahu apa yang diubah agent dari membaca kode, dan baru melihat hasil visualnya setelah aplikasi dijalankan.
  • Warna baru atau sudut baru berarti meminta edit satu per satu per layar.
  • Masalah aksesibilitas seperti kontras rendah dan area sentuh kecil baru ketahuan saat pengguna mengeluh.

DENGAN WONDERBLOK

  • Warna, tipografi dan jarak adalah token, dan agent memakainya alih-alih mengarang nilai.
  • Aturanmu ditulis sekali di file. Agent wajib membaca versi terbaru sebelum boleh mengedit.
  • Perubahan mendarat di canvas yang bisa kamu lihat, dengan riwayat yang bisa kamu pertahankan atau kembalikan.
  • Satu perubahan pada token atau component menjangkau semua layar yang memakainya.
  • Masalah kontras dan area sentuh terdaftar per layar sebelum kamu membangun.

CARA KERJANYA

Vibe coder: 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. Setelah itu agent kamu 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

    Ubah nilai yang kamu pakai jadi token

    Mulai dari yang sudah ada. Minta agent mencari warna, ukuran teks dan jarak yang dipakai, lalu putuskan mana yang dipertahankan. Beri nama sekali. Token bisa menyimpan nilai untuk mode terang dan gelap.

    Token dan modeMCP

    KAMU BILANG

    Daftar semua nilai warna dan jarak yang dipakai di frame Settings yang bukan token. Kelompokkan yang nyaris sama dan usulkan satu token untuk tiap kelompok.

    Kamu dapat: Daftar token ringkas yang menggantikan tumpukan nilai sekali pakai.

  3. 03

    Tulis aturan di dalam file

    Kalimat yang biasa kamu tempel di setiap chat, pindahkan ke panduan: seberapa padat layarnya, tombol mana untuk aksi utama, bagaimana nada teksnya. Agent menerima panduan terbaru beserta hash-nya, dan edit ditolak sampai ia membaca versi itu.

    PanduanBaca sebelum edit

    KAMU BILANG

    Baca panduan desain. Lalu beri tahu aku bagian mana yang tidak diikuti tiga edit terakhirmu.

    Kamu dapat: Buku aturan yang diterapkan tanpa perlu diulang.

  4. 04

    Gambar tiap bagian sekali, sebagai component

    Tombol, input, card dan baris daftar menjadi component dengan variant untuk ukuran dan state. Setelah ada, layar baru dirakit dari component itu, dan gaya tinggal di satu tempat.

    Component dan variantFrame dengan auto layout

    KAMU BILANG

    Ubah tombol utama di frame Home menjadi component dengan variant default, ditekan, nonaktif dan memuat. Pakai token yang sudah ada saja.

    Kamu dapat: Bagian-bagian yang dipakai ulang agent, bukan digambar ulang.

  5. 05

    Minta layar yang hanya memakai yang sudah ada

    Sekarang kamu bisa meminta layar baru sambil menambah batasan: pakai token dan component yang sudah ada di file, dan laporkan apa pun yang tidak bisa dicocokkan. Laporan itu bagian yang paling berguna. Ia menunjukkan celah di sistemmu.

    PanduanComponentToken

    KAMU BILANG

    Baca panduan desain, lalu tambahkan layar tagihan yang hanya memakai token dan component yang sudah ada. Beri tahu aku apa yang tidak bisa kamu cocokkan.

    Kamu dapat: Layar yang sesuai brand, ditambah daftar bagian yang belum ada.

  6. 06

    Periksa layar sebelum membangun

    Jalankan pemeriksaan pada sebuah frame untuk menangkap kontras rendah dan area sentuh kecil. Minta agent memperbaiki yang terdaftar dan menyebut apa yang ia ubah.

    LintRiwayat perubahan

    KAMU BILANG

    Periksa frame Checkout untuk masalah kontras dan ukuran area sentuh, lalu perbaiki yang kamu temukan. Daftar setiap perbaikannya.

    Kamu dapat: Hasil lint per layar, dan perbaikan yang bisa kamu tinjau.

  7. 07

    Tinjau yang berubah, lalu bangun dari desain

    Buka riwayat perubahan untuk melihat apa yang dilakukan agent sejak terakhir kamu melihat. Pertahankan atau kembalikan per layer. Setelah layarnya benar, atur code name supaya component dan token sama dengan kodemu, lalu minta coding agent membangun dari file. Build check membandingkan aplikasi yang berjalan dengan frame.

    Riwayat perubahanCode nameBuild check

    KAMU BILANG

    Atur code name component Billing ke nama component React milikku, lalu bangun layarnya dari frame.

    Kamu dapat: Kamu tetap memegang kendali atas agent, dan kode dimulai dari desain.

KASUS PENGGUNAAN

Enam pekerjaan yang bisa kamu serahkan ke agent minggu ini.

  • Layar baru yang senada dengan yang lain

    Kamu butuh layar tagihan dan tidak mau ada jenis card keempat.

    PROMPT Baca panduan desain, lalu tambahkan layar tagihan yang hanya memakai token dan component yang sudah ada. Beri tahu aku apa yang tidak bisa kamu cocokkan.

    Hasil: Frame jadi yang dibangun dari sistemmu, dengan daftar singkat bagian yang belum ada.

    PanduanComponentToken

  • Merapikan layar yang melenceng

    Sepuluh layar kemudian, ada lima abu-abu dan jarak yang berubah dari layar ke layar.

    PROMPT Ganti setiap nilai warna dan jarak di frame Home, Settings dan Profile yang bukan token dengan token terdekat, dan daftar setiap penggantiannya.

    Hasil: Layar yang sepakat satu sama lain, dan daftar yang bisa kamu pindai untuk melihat yang janggal.

    TokenRiwayat perubahan

  • Kontras dan area sentuh

    Di monitormu aplikasinya terlihat bagus. Kamu belum memeriksanya seperti pengguna yang lelah di ponsel.

    PROMPT Periksa frame Checkout untuk masalah kontras dan ukuran area sentuh, lalu perbaiki yang kamu temukan. Daftar setiap perbaikannya.

    Hasil: Hasil lint untuk layar itu, dengan perbaikan yang sudah diterapkan dan siap kamu tinjau.

    LintRiwayat perubahan

  • Dark mode tanpa set layar kedua

    Pengguna minta dark mode, dan agent kamu dengan senang hati akan menggandakan semua layar untuk itu.

    PROMPT Beri token warna nilai gelap, lalu tampilkan frame Home dan Settings dalam dark mode dan daftar teks yang gagal kontras.

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

    Token dan modeLint

  • Fitur yang dibangun di atas pola yang terbukti

    Kamu menambah onboarding untuk sebuah fitur, dan lebih suka mulai dari sesuatu yang terbukti jalan daripada dari prompt kosong.

    PROMPT Tambahkan pola permission priming dari Universe untuk notifikasi dan sesuaikan dengan token dan teks milikku.

    Hasil: Pola dari aplikasi yang sudah rilis, dalam brand kamu, sebagai frame yang bisa diedit.

    Universe (Pro)Token

  • Serahkan desain ke coding agent kamu

    Kamu punya layar yang kamu suka. Kamu ingin kodenya cocok dengannya, bukan sekadar mendekati deskripsi.

    PROMPT Atur code name component Billing ke nama component React milikku, lalu bangun layarnya dari frame.

    Hasil: Kode yang dimulai dari frame, dan build check yang mendaftar bagian aplikasi yang berbeda.

    Code nameBuild check

YANG PERLU DILIHAT

Fitur yang paling penting untukmu.

  • Koneksi MCP

    Coding agent kamu bekerja langsung di file desain, jadi keputusan tidak lagi tinggal di prompt yang ditempel.

  • Panduan yang wajib dibaca agent

    Aturanmu diterapkan tanpa kamu ulang, dan aturan usang tidak bisa terpakai secara tidak sengaja.

  • Token dengan mode terang dan gelap

    Mengganti warna atau menambah dark mode cukup dengan mengubah nilai. Agent memakai nilainya, bukan mengarang.

  • Component dan variant

    Tombol yang digambar sekali adalah tombol yang sama di setiap layar dan setiap state.

  • Frame dengan auto layout

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

  • Lint check

    Kontras rendah dan area sentuh kecil terdaftar per layar sebelum kamu membangun.

  • Riwayat perubahan dan revert

    Agent mengedit dengan cepat. Riwayat menunjukkan apa yang berubah sejak terakhir kamu melihat, dan semuanya bisa dibatalkan.

  • Catatan di layer

    Kalau ada yang terasa janggal, tinggalkan catatan di layer itu. Agent menindaklanjutinya dan melaporkan apa yang ia lakukan.

  • Code name dan build check

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

  • Pola Universe

    Mulai alur baru dari struktur yang terbukti di aplikasi yang sudah rilis, bukan dari prompt kosong. Bagian dari Pro.

PERTANYAAN

Jawaban langsung.

Kenapa UI buatan AI saya terlihat tidak konsisten?

Karena agent tidak punya sumber kebenaran bersama. Ia mengarang jarak, warna dan component untuk tiap layar. Token, component yang bisa dipakai ulang, dan aturan tertulis di file yang wajib dibaca agent mengatasi penyebabnya.

Bagaimana agent tahu aturan desain saya?

Wonderblok memberi agent dokumen panduan beserta hash-nya. Edit ditolak sampai agent membaca versi terbaru, jadi aturan lama tidak terpakai secara tidak sengaja.

Agent mana yang bisa dipakai?

Agent apa pun yang mendukung MCP: Claude Code, Codex dan Claude Desktop didukung, dan aplikasinya menyiapkan koneksinya untukmu.

Bisakah saya membatalkan yang dilakukan agent?

Bisa. Wonderblok menyimpan riwayat perubahan per layer, jadi kamu bisa melihat apa yang berubah sejak terakhir kamu melihat dan mengembalikannya.

Apakah paket Free cukup untuk mencoba ini?

Free mencakup 100 panggilan MCP per minggu. Itu cukup untuk menyiapkan token, menulis aturan dan meminta agent membangun satu-dua layar darinya. Mengerjakan satu aplikasi utuh bersama agent akan memakai lebih banyak, dan untuk itulah ada Pro dengan batas yang jauh lebih tinggi.

Apakah coding agent saya tetap akan mengabaikan desain?

Aturan berlaku untuk edit yang dilakukan di file desain: agent harus membaca panduan terbaru lebih dulu. Di kodemu, agent hanya akan sekonsisten desain yang ia jadikan acuan. Karena itu nama component dan token dibuat sama dengan kodemu, dan build check membandingkan aplikasi yang berjalan dengan frame.

Saya sudah punya aplikasi setengah jadi. Bisakah mulai dari situ?

Bisa. Mulai dari token dan dua-tiga component yang paling sering kamu pakai, lalu minta agent melanjutkannya. Wonderblok juga bisa membawa halaman web masuk sebagai frame, dan apa pun yang tidak punya padanan akan didaftar setelah impor.

BATASAN YANG JUJUR

Yang perlu kamu tahu sebelum mulai.

  • Wonderblok berjalan di macOS saat ini. Windows, Linux, serta tablet Android dan iOS segera hadir.
  • Wonderblok tidak menulis kode aplikasimu. Agent kamu yang menulisnya, memakai nama dan nilai dari desain.

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