wonderblok
Get early access

Canvas desain yang bisa dikerjakan agent kamu.

Wonderblok memberi product designer canvas dengan auto layout, component dengan variant, token dengan mode terang dan gelap, serta prototype yang bisa dimainkan. Lewat koneksi MCP, AI agent bisa menggambar, mengganti nama, dan merapikan layer, sementara designer mengarahkan dan meninjau setiap perubahan.

Dapatkan akses awalLihat harga
Auto layoutComponent dan variantToken dan modeRiwayat perubahan

UNTUK SIAPA INI

Terdengar familiar?

Sebagian besar hari seorang product designer bukan untuk ide. Waktunya habis untuk variant ketiga dari kartu yang sama, proses ganti nama layer sebelum handoff, dan dark mode yang harus mengikuti light mode. Itu pekerjaan berulang dengan aturan jelas, persis yang dikerjakan agent dengan baik asal ia punya akses ke sistem kamu.

Di Wonderblok, sistemnya adalah file itu sendiri: token, component, dan guidelines tertulis yang wajib dibaca agent. Kamu yang memutuskan, agent yang mengeksekusi, dan riwayat perubahan menunjukkan apa saja yang ia kerjakan.

  • Pekerjaan produksi yang berulang

    Variant, state, dan ganti nama memakan waktu yang seharusnya untuk mengambil keputusan.

  • Agent yang mengabaikan sistem kamu

    Agent serba bisa akan mengarang gaya sendiri. Sistem kamu harus jadi bagian dari konteksnya.

  • Handoff yang melenceng

    Nama di desain dan nama di kode pelan-pelan jadi berbeda.

CONTOH SATU MINGGU

Seminggu design system, dengan agent yang menangani produksinya

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

  1. Senin

    Sistemnya ditulis

    Kamu membuka file dan menetapkan fondasinya: warna, tipografi, dan spacing sebagai token, masing-masing dengan nilai terang dan gelap. Kamu menulis sepuluh baris guidelines tentang kapan memakai tombol yang mana. Lalu kamu menghubungkan Claude Code dan memintanya membacakan ulang guidelines itu. Kalau ada yang salah, kamu memperbaiki kalimatnya, bukan agent-nya.

  2. Selasa

    Variant tanpa repot

    Kartu Order butuh state loading, empty, error, dan selected, dalam dua ukuran. Kamu memintanya, hanya dengan token yang ada. Waktumu kamu pakai untuk satu state yang sulit, yaitu error, dan sisanya kamu setujui setelah melihat satu per satu.

  3. Rabu

    Fitur baru, dibangun dari sistem

    Tim produk ingin alur pesan ulang. Kamu menjelaskannya, agent merakit empat frame dari component kamu, lalu kamu mengarahkan: spacing di sini lebih rapat, hierarki di sana diubah. Tidak ada yang dikarang, karena agent wajib memakai apa yang ada di file.

  4. Kamis

    Dark mode mengikuti

    Kamu meminta alur itu dalam dark mode. Frame memakai nilai gelap dari token kamu, dan agent mendaftar dua tempat yang terselip warna hard-coded. Kamu menggantinya dengan token dan daftarnya jadi kosong.

  5. Jumat

    Tinjau dan handoff

    Kamu membuka riwayat perubahan dan menelusuri apa saja yang disentuh agent minggu ini. Sebagian besar kamu pertahankan, satu edit kamu kembalikan. Nama layer disesuaikan dengan kode, dan agent developer membaca file yang sama. Setelah build, sebuah check membandingkan screen yang berjalan dengan frame kamu.

  6. Minggu depan

    Presentasi dan kumpulkan catatan

    Kamu menautkan frame menjadi prototype dan mengirim link ke product manager. Masukannya masuk sebagai note di layer yang dimaksud. Agent menerapkannya, memberi tahu apa yang berubah, dan kamu meninjau hasilnya sebelum ada orang lain yang melihat.

SEBELUM DAN SESUDAH

Apa yang berubah setelah agent kamu punya kanvas.

TANPA FILE DESAIN

  • Variant dan state adalah bagian terpanjang dari hari kerja, dan yang paling membosankan.
  • Agent serba bisa mengarang warna dan spacing sendiri karena sistem kamu tidak ada di konteksnya.
  • Dark mode berarti satu set screen lagi yang harus disinkronkan manual.
  • Nama layer di desain dan nama di kode pelan-pelan berbeda.
  • Kamu tidak tahu apa yang diubah agent sampai membandingkan file dengan mata.

DENGAN WONDERBLOK

  • Kamu menjelaskan satu state dalam satu kalimat lalu meninjaunya, tidak menggambar semuanya.
  • Agent bekerja dari token, component, dan aturan tertulis kamu, dan wajib membacanya sebelum mengedit.
  • Dark mode adalah satu nilai per token, jadi frame ikut berubah tanpa digambar ulang.
  • Nama ditetapkan sekali agar sama dengan kode, dan build check menunjukkan di mana hasilnya berbeda.
  • Riwayat perubahan menunjukkan apa yang berubah sejak terakhir kamu lihat, dan kamu bisa mengembalikan semuanya.

CARA KERJANYA

Product designer: 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 bisa melihat daftar file, membaca tree layer, dan mengedit frame, teks, component, dan token. File tetap ada di perangkat kamu.

    MCPFile lokal

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

  2. 02

    Tulis sistemnya sebagai guidelines

    Taruh keputusan desain kamu di guidelines pada file: tombol mana untuk aksi apa, berapa jarak antara label dan field, seperti apa tampilan error. Agent wajib membaca versi terbaru sebelum boleh mengedit, dan ketika kamu mengubah teksnya, ia harus membacanya lagi.

    GuidelinesWajib baca sebelum edit

    KAMU BILANG

    Baca guidelines desain lalu rangkum dalam lima baris. Setelah itu, sebutkan aturan mana yang paling kurang jelas.

    Kamu dapat: Buku aturan yang diikuti agent, dan pemeriksaan pertama bahwa ia mengerti.

  3. 03

    Atur token dengan mode terang dan gelap

    Warna, tipografi, dan spacing menjadi token. Sebuah token bisa punya nilai per mode, jadi satu nama mencakup terang dan gelap. Setiap layer yang memakai token itu ikut berubah saat kamu mengubahnya.

    Token dan modeLint

    KAMU BILANG

    Buat token warna untuk background, surface, teks, dan aksen dengan nilai terang dan gelap dari palet ini, lalu daftar setiap layer di frame Profile yang masih memakai warna mentah.

    Kamu dapat: Satu set token dengan dua mode, dan daftar tempat yang melewatinya.

  4. 04

    Bangun component dengan variant

    Gambar component sekali dengan auto layout, lalu tambahkan variant untuk state dan ukuran. Agent bisa membuat variant-nya, dan setiap instance di seluruh file tetap terhubung ke component.

    Frame dan auto layoutComponent dan variant

    KAMU BILANG

    Tambahkan variant loading, empty, dan error ke component kartu Order, hanya pakai token yang sudah ada. Pertahankan auto layout dan padding saat ini.

    Kamu dapat: Component lengkap dengan state-nya, siap dipakai ulang.

  5. 05

    Arahkan screen yang dibangun dari sistem

    Jelaskan sebuah screen atau alur dan biarkan agent merakitnya dari component kamu. Kamu meninjau di canvas dan mengarahkan dengan bahasa biasa. Kalau butuh struktur awal untuk alur yang umum, pattern Universe memberi agent layout yang sudah terbukti untuk disesuaikan dengan sistem kamu.

    ComponentUniverse (Pro)Auto layout

    KAMU BILANG

    Bangun alur pesan ulang sebagai empat frame ukuran 390 kali 844 dari component yang ada. Pakai pattern empty state dari Universe untuk kasus tanpa pesanan sebelumnya.

    Kamu dapat: Screen yang terlihat seperti produk kamu, bukan tebakan agent.

  6. 06

    Tinjau layer demi layer

    Tinggalkan note di layer mana pun dan agent akan membacanya, mengerjakannya, melaporkan apa yang berubah, lalu menandainya selesai. Riwayat perubahan menunjukkan semua yang berubah sejak terakhir kamu lihat, dan kamu bisa mengembalikan yang tidak kamu mau.

    NoteRiwayat perubahanRevert

    KAMU BILANG

    Terapkan note saya di frame Reorder dan beri tahu persis apa yang kamu ubah, layer demi layer.

    Kamu dapat: Masukan sampai ke layer yang dimaksud, dan kamu tetap memegang hasil akhirnya.

  7. 07

    Handoff dengan nama yang sama

    Atur code name pada component dan token supaya desain dan kode memakai bahasa yang sama. Bagikan prototype sebagai link untuk ditinjau. Setelah developer membangun, build check membandingkan aplikasi yang berjalan dengan frame kamu dan mendaftar perbedaannya.

    Code nameBuild checkPrototype

    KAMU BILANG

    Ganti nama semua layer di alur Reorder sesuai nama component dan token di guidelines, lalu atur code name untuk variant kartu Order.

    Kamu dapat: Handoff dengan nama yang cocok, dan penyimpangan terlihat jelas.

KASUS PENGGUNAAN

Enam pekerjaan yang bisa kamu serahkan ke agent minggu ini.

  • Variant dan state

    Sebuah component baru selesai kalau state loading, empty, error, disabled, dan selected-nya ada. Menggambarnya adalah bagian paling tidak kreatif dari pekerjaan.

    PROMPT Tambahkan variant disabled, loading, dan error ke component tombol Primary dan Text field, hanya pakai token yang sudah ada, lalu daftar apa yang kamu tambahkan.

    Hasil: Variant langsung di component-nya, plus daftar yang bisa kamu cocokkan dengan spesifikasi.

    Component dan variantToken

  • Proses ganti nama

    Sebelum handoff, layer masih bernama Frame 214 dan Group 9. Merapikannya membosankan dan gampang keliru.

    PROMPT Ganti nama semua layer di frame Profile sesuai aturan penamaan di guidelines. Daftar layer yang kamu ragukan, jangan ditebak.

    Hasil: Nama yang rapi, dan daftar singkat layer yang butuh keputusan kamu.

    GuidelinesCode nameRiwayat perubahan

  • Dark mode untuk screen yang sudah ada

    Sebuah screen sudah rilis dalam mode terang dan dark mode masuk roadmap.

    PROMPT Buat versi gelap screen Settings dari nilai gelap token saya, dan laporkan layer mana pun yang memakai warna hard-coded.

    Hasil: Screen gelap dari token yang sama, dan daftar warna yang belum menjadi token.

    Token dan modeLint

  • Audit penyimpangan

    Setelah berbulan-bulan diedit banyak tangan, file berisi warna dan nilai spacing yang mirip sistem tapi bukan bagian darinya.

    PROMPT Daftar setiap warna dan nilai spacing di frame Checkout yang bukan token. Untuk masing-masing, usulkan token terdekat dan tunggu persetujuan saya.

    Hasil: Daftar untuk ditinjau, bukan penulisan ulang diam-diam. Kamu setujui dulu, baru agent mengganti.

    TokenLintRiwayat perubahan

  • Alur dari pattern yang sudah terbukti

    Kamu butuh alur sign in atau onboarding dan ingin struktur awal yang bagus, bukan frame kosong.

    PROMPT Tambahkan pattern sign in dengan nomor telepon dari Universe, ubah gayanya dengan token dan component saya, dan tambahkan state kode salah.

    Hasil: Struktur yang sudah terbukti dalam sistem kamu, siap untuk keputusan kamu sendiri.

    Universe (Pro)ComponentToken

  • Bawa masuk yang sudah ada

    Kamu tidak mulai dari nol. Ada file Pen dan Figma, atau halaman web yang sedang berjalan, yang ingin kamu kerjakan bersama agent.

    PROMPT Setelah impor, daftar semua yang tidak punya padanan di Wonderblok, lalu petakan warna hasil impor ke token saya.

    Hasil: Pekerjaan lama kamu ada di canvas, dengan bagian yang belum cocok didaftar, bukan disembunyikan.

    ImporTokenMCP

YANG PERLU DILIHAT

Fitur yang paling penting untukmu.

  • Koneksi MCP

    Agent kamu bekerja langsung di file, jadi ia memakai sistem kamu, bukan menebak sistem baru.

  • Guidelines yang wajib dibaca agent

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

  • Frame dengan auto layout

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

  • Component dengan variant

    State dan ukuran ada di component, dan setiap instance tetap terhubung.

  • Token dengan mode terang dan gelap

    Perubahan brand atau dark mode cukup mengganti nilai, tidak perlu menggambar ulang.

  • Riwayat perubahan dan revert

    Agent yang mengedit cepat tetap aman karena kamu bisa melihat dan membatalkan yang ia kerjakan.

  • Note di layer

    Masukan menempel pada hal yang dimaksud, dan agent mengerjakannya.

  • Prototype yang bisa dimainkan dan share link

    Peninjau mengklik alurnya, tidak membaca deskripsinya.

  • Code name dan build check

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

  • Impor file Pen, Figma, dan halaman web

    Kamu bisa membawa pekerjaan lama dan melihat apa yang tidak punya padanan, tanpa mulai dari awal.

PERTANYAAN

Jawaban langsung.

Apakah Wonderblok alternatif Figma?

Wonderblok mencakup inti desain produk: frame dengan auto layout, component dengan variant, token dengan mode, dan prototype. Bedanya, AI agent bisa mengerjakan file lewat MCP, dan file tetap tersimpan lokal di perangkat kamu. Wonderblok belum menjadi suite kolaborasi tim.

Bisakah AI agent mengikuti design system saya?

Bisa. Token, component, dan guidelines tertulis adalah bagian dari file, dan agent wajib membaca guidelines terbaru sebelum bisa mengedit.

Apakah mendukung dark mode?

Ya. Token bisa punya nilai untuk setiap mode, dan sebuah frame bisa digambar dalam satu mode.

Bisakah saya mengimpor desain yang sudah ada?

Wonderblok bisa mengimpor file Pen dan Figma, dan bisa membawa halaman web masuk sebagai frame. Apa pun yang tidak punya padanan akan didaftar setelah impor.

Bisakah tim desain bekerja bersama di sini?

Belum secara real-time. Team segera hadir. Saat ini sebuah file ada di satu perangkat, dan kamu membagikan hasil lewat export dan link prototype. Kalau pekerjaan harianmu adalah beberapa designer di satu file sekaligus, itu batasan yang nyata.

Apakah paket Free cukup?

Free mencakup 100 panggilan MCP per minggu, cukup untuk membangun set component kecil atau mencoba alurnya pada satu flow. Pekerjaan agent yang berat, seperti variant untuk seluruh library, akan memakai lebih banyak. Pro menaikkan batasnya menjadi 10 juta panggilan per bulan.

Apakah agent menggantikan designer?

Tidak. Agent mengambil pekerjaan produksi: variant, state, ganti nama, dark mode. Kamu yang menentukan seperti apa sistemnya, apa yang disebut bagus, dan apa yang dirilis. Guidelines adalah tempat selera kamu menjadi sesuatu yang bisa diikuti agent.

BATASAN YANG JUJUR

Yang perlu kamu tahu sebelum mulai.

  • Wonderblok berjalan di macOS saat ini. Windows, Linux, serta tablet Android dan iOS segera hadir.
  • Kolaborasi real-time dengan orang lain belum tersedia; Team segera hadir.

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