Buat prototipe secepat sebuah prompt
Jelaskan alur yang ada di benak Anda dan biarkan agent menyusun prototipe nyata yang bisa diklik — banyak layar, gaya bersama, dan interaksi langsung — dirender langsung ke HTML yang bisa Anda buka, bagikan, dan serahkan ke tim teknik.
Dalam satu kalimat
Open Design adalah lapisan desain untuk coding agent yang sudah Anda pakai. Untuk pembuatan prototipe, itu berarti beranjak dari ide satu paragraf menjadi prototipe bergaya yang bisa dinavigasi dalam satu sesi — tanpa alat desain, tanpa langkah ekspor, tanpa celah serah terima.
Cara kerja pembuatan prototipe dengan Open Design
- 01
Jelaskan alurnya
Beri tahu agent apa yang Anda bangun dengan bahasa biasa — “alur onboarding dengan layar sambutan, pemilih paket, dan konfirmasi”. Open Design memuat keterampilan prototipe sehingga agent tahu harus menghasilkan layar, bukan satu halaman.
- 02
Hasilkan layar bergaya
Agent menerapkan sistem desain dan templat prototipe dari Open Design, sehingga setiap layar berbagi tipografi, jarak, dan komponen alih-alih terlihat seperti draf kasar. Anda mendapatkan satu set layar yang koheren, bukan mockup yang terpisah-pisah.
- 03
Sambungkan interaksinya
Tombol bernavigasi, tab beralih, modal terbuka. Prototipe dirender ke HTML mandiri, sehingga berperilaku seperti produk sungguhan di browser mana pun — tanpa perlu akun alat prototipe untuk melihatnya.
- 04
Iterasi dan serahkan
Sempurnakan dengan berbicara kepada agent — “ubah pemilih paket menjadi tata letak tiga kolom”. Karena artefaknya hidup di proyek Anda, desain dan kode akhirnya berbagi satu sumber kebenaran, menutup celah serah terima dari desainer ke insinyur yang biasa terjadi.
Apa yang bisa Anda prototipekan
prototipe Baca prompt lengkap → Prototipe Web
Prototipe web desktop serbaguna. File HTML mandiri yang dibuat dengan menyalin `assets/template.html` dan menempelkan layout dari `references/layouts.md`. Default untuk halaman landing, marketing, dokumentasi, atau SaaS.
prototipe Baca prompt lengkap → Aplikasi mobile
Layar aplikasi mobile yang dirender di dalam bingkai iPhone 15 Pro yang akurat hingga piksel di halaman. Dibuat dengan menyalin file seed assets/template.html dan menempelkan satu arketipe layar dari references/layouts.md. Gunakan ketika brief meminta 'aplikasi mobile', 'aplikasi iOS', 'aplikasi Android', 'layar ponsel', atau 'UI aplikasi'.
prototipe Baca prompt lengkap → Landing SaaS
Halaman landing SaaS satu halaman dengan hero, fitur, bukti sosial, harga, dan CTA. Mengikuti token warna/tipografi/layout aktif dari DESIGN.md. Kata kunci pemicu: "saas landing", "marketing page", "product landing".
prototipe Baca prompt lengkap → Aplikasi gamifikasi
Prototipe aplikasi seluler gamifikasi tiga layar: sampul, quest hari ini dengan pita XP dan bilah level, detail quest. Cocok untuk aplikasi gamifikasi, pelacak kebiasaan, aplikasi kehidupan RPG, aplikasi level-up, quest harian, dan aplikasi XP/streak.
prototipe Baca prompt lengkap → Onboarding HR
Rencana onboarding karyawan baru dalam satu halaman — jadwal minggu pertama, perkenalan buddy + manajer, jalur pembelajaran, checklist peralatan, dan hasil 'Anda siap ketika…'. Gunakan saat brief menyebutkan 'onboarding', 'karyawan baru', 'rencana minggu pertama', atau '入职'.
prototipe Baca prompt lengkap → Kami Landing
Menghasilkan dokumen satu halaman berkualitas cetak — kanvas perkamen hangat, aksen biru tinta, serif satu bobot, tanpa italic, tanpa abu-abu dingin. Hasilnya seperti white paper profesional atau studio one-pager, bukan UI aplikasi. Multibahasa by design (EN · zh-CN · ja). Satu file HTML mandiri, tanpa dependensi.
Pembuatan prototipe dengan Open Design vs. cara lama
| Yang Anda butuhkan | Dengan Open Design | Alat prototipe tradisional |
|---|---|---|
| Beranjak dari ide ke layar pertama | ●Satu prompt di agent yang sudah Anda buka | Buka alat terpisah, mulai berkas, seret kotak satu per satu |
| Banyak layar yang tertaut | ●Dihasilkan sebagai satu set dengan gaya bersama dan navigasi yang berfungsi | Setiap bingkai digambar dan ditautkan secara manual |
| Sistem visual yang konsisten | ●Diambil dari sistem desain yang dapat dipakai ulang dan diterapkan agent | Dibuat ulang per berkas atau dipelihara secara manual |
| Hasil yang bisa dibagikan | ●HTML mandiri — terbuka di browser mana pun, tanpa akun | Penonton butuh kursi atau tautan berbagi di alat vendor |
| Jalur menuju kode nyata | ●Artefak hidup di repo Anda; desain dan kode berbagi satu sumber | Dibangun ulang dari nol setelah serah terima terpisah |
| Biaya dan keterkuncian vendor | ●Open source, pakai kunci Anda sendiri, berjalan lokal | Langganan per kursi, dihosting vendor, ekspor terbatas |
Setiap karya ini dimulai sebagai prompt dan dirender menjadi artefak yang bisa diklik. Pilih templat yang dekat dengan ide Anda, jelaskan variasi Anda, dan agent menyesuaikannya.
FAQ pembuatan prototipe
-
01 Apakah saya butuh alat desain seperti Figma untuk membuat prototipe dengan Open Design?
Tidak. Open Design berjalan di dalam coding agent Anda dan merender prototipe ke HTML. Anda menjelaskan alur dengan bahasa; agent menghasilkan layar. Tidak ada alat kanvas terpisah untuk dipelajari atau dibayar.
-
02 Apakah prototipenya interaktif atau hanya mockup statis?
Interaktif. Navigasi, tab, dan modal berfungsi karena keluarannya adalah HTML dan CSS nyata. Anda bisa mengekliknya di browser mana pun persis seperti yang dilakukan pengguna.
-
03 Agent mana saja yang bisa saya pakai?
Open Design bekerja dengan Claude Code, Codex, Cursor Agent, Gemini CLI, dan belasan adapter resmi lainnya. Anda membawa kunci penyedia Anda sendiri; tidak ada yang dihosting untuk Anda.
-
04 Bisakah sebuah prototipe menjadi produk nyata?
Itulah intinya. Artefak hidup di proyek Anda, sehingga sistem desain dan komponen yang sama terbawa ke kode produksi alih-alih dibuang setelah serah terima.
Prototipekan ide Anda berikutnya malam ini
Beri bintang pada repo, pasang Open Design, dan ubah “bagaimana jika” Anda berikutnya menjadi sesuatu yang bisa Anda klik — di agent yang sudah Anda pakai.