Dari spesifikasi ke front-end, tanpa serah terima di antaranya
Arahkan agent Anda ke sebuah DESIGN.md dan sebuah deskripsi; ia menulis kode front-end nyata yang sesuai sistem — komponen, layar, dasbor — langsung di proyek Anda. Tanpa anotasi koreksi, tanpa “menunggu desain.”
Dalam satu kalimat
Open Design menutup jurang dari desainer ke engineer dengan membuat sistem desain dapat dibaca mesin: agent yang sama yang menulis kode Anda menerapkan sistem dan merender UI nyata.
Cara engineer memakai Open Design
- 01
Baca sistemnya, bukan anotasi koreksi
DESIGN.md hidup di dalam repo. Agent Anda membacanya sebagaimana ia membaca sisa basis kode — tanpa spesifikasi ekspor untuk ditafsirkan.
- 02
Hasilkan UI sesuai sistem
Jelaskan layar atau komponennya; agent menulis front-end yang sudah cocok dengan sistem. Prototipe, dasbor admin, alat internal — dalam hitungan menit.
- 03
Ini sudah kode Anda
Keluarannya adalah HTML / kode framework di repo Anda, dapat ditinjau dalam sebuah PR. Tanpa langkah penerjemahan antara “desain” dan “build.”
Apa yang bisa dihasilkan seorang engineer
prototipe Baca prompt lengkap → Halaman Dokumentasi
Halaman dokumentasi dengan navigasi samping, isi artikel yang dapat digulir, dan daftar isi. Gunakan saat brief menyebutkan 'dokumentasi', 'panduan', 'referensi API', atau 'tutorial'.
prototipe Baca prompt lengkap → Runbook teknik
Runbook teknik — ringkasan layanan, tabel alert, tautan dashboard, prosedur umum dengan perintah yang dapat disalin, rotasi on-call, dan checklist respons insiden. Gunakan untuk runbook, dokumen ops, panduan on-call, dokumen SRE, atau 运维手册.
presentasi Baca prompt lengkap → Cetak Biru Arsitektur Pengetahuan Html Ppt
Deck arsitektur cetak biru krem — basis kertas krem #F0EAE0 + sorotan merah karat tunggal #B5392A, masker grid cetak biru 48px, kartu keras tepi hitam 2px, kotak langkah pipeline (satu terangkat), callout insight merah karat di kanan, font serif besar Playfair, loop umpan balik SVG putus-putus. Tanpa gradien, tanpa bayangan lembut, serius dan ramah cetak.
presentasi Baca prompt lengkap → Html Ppt Tech Sharing
Deck konferensi / tech-talk internal — GitHub-dark, JetBrains Mono, blok kode terminal, halaman agenda + Q&A. Untuk presentasi engineering, sesi sharing internal, konferensi, dan walkthrough berisi banyak kode.
prototipe Baca prompt lengkap → Laporan Visualisasi Data
Mengubah data CSV, Excel, atau JSON menjadi halaman laporan visual yang rapi.
prototipe Baca prompt lengkap → Papan Kanban
Papan kanban / tugas dengan kolom (To do / In progress / In review / Done), kartu yang dapat diseret, avatar penugasan, swimlanes, dan bilah filter atas. Gunakan ketika brief menyebutkan 'kanban', 'task board', 'sprint board', 'trello', atau '看板'.
Front-end dengan Open Design vs cara serah terima
| Yang Anda butuhkan | Dengan Open Design | Serah terima desain-ke-dev |
|---|---|---|
| Dapatkan desain untuk dibangun | ●Sebuah DESIGN.md yang dibaca agent Anda langsung | Berkas Figma yang Anda tafsirkan ulang manual |
| Cocokkan dengan sistem | ●Ditegakkan otomatis saat pembuatan | Mengira-ngira dengan mata terhadap spesifikasi, melenceng menyusup |
| Bangun alat internal / dasbor | ●Prompt → front-end sesuai sistem di dalam repo | Menunggu desainer, lalu membangunnya dua kali |
| Tinjau | ●Ini kode — bandingkan diff-nya dalam sebuah PR | Membandingkan piksel terhadap mockup |
| Biaya & ketergantungan | ●Sumber terbuka, di repo Anda, jalan lokal | Alat desain yang seluruh tim harus melisensikannya |
Front-end nyata, sesuai sistem, yang dihasilkan langsung di dalam repo. Pilih satu yang dekat dengan yang Anda bangun dan jelaskan.
FAQ teknik
-
01 Apakah saya masih butuh desainer?
Untuk merek dan arah, ya. Tapi untuk membangun UI sesuai sistem dan alat internal, agent membaca DESIGN.md dan menulis front-end — tanpa bolak-balik serah terima.
-
02 Apa keluarannya?
HTML / kode framework nyata di repo Anda, dapat ditinjau dalam sebuah PR — bukan mockup yang Anda implementasikan ulang.
-
03 Bagaimana ia tetap sesuai sistem?
DESIGN.md adalah sumber kebenaran; agent menerapkannya saat pembuatan, jadi keluarannya cocok tanpa pengecekan piksel manual.
-
04 Agent apa saja yang bisa saya pakai?
Claude Code, Codex, Cursor Agent, Gemini CLI dan lebih banyak adapter resmi, dengan kunci penyedia Anda sendiri.
Hasilkan UI Anda berikutnya malam ini
Beri bintang pada repo, pasang Open Design, dan ubah sebuah DESIGN.md menjadi front-end — di dalam agent yang sudah Anda pakai.