OpenCode untuk desain.

Apa sebenarnya OpenCode itu

OpenCode adalah agen coding AI open-source yang dibangun untuk terminal, dipelihara oleh tim di balik SST (Anomaly Innovations). Ia membaca repositori Anda, menjalankan perintah, menyunting file, dan berbicara dengan model bahasa besar — tetapi tidak seperti agen yang terikat vendor, ia tidak menyertakan modelnya sendiri. Anda mengarahkannya ke provider dan model apa pun yang Anda inginkan dan membawa kunci Anda sendiri.

Ia berjalan sebagai terminal UI (TUI), dengan aplikasi desktop dan ekstensi IDE di atas mesin yang sama. Di balik layar, ia menggunakan arsitektur client/server, sehingga agen yang melakukan pekerjaan terpisah dari permukaan tempat Anda mengendalikannya. Dua agen bawaan — build dan plan — berganti dengan tombol Tab.

• Model-agnostic: Model dan provider berasal dari models.dev, sebuah katalog terbuka. Anda mengonfigurasikannya di opencode.json dengan string provider/model-id dan dapat menonaktifkan provider yang tidak ingin dimuat — sehingga alur kerja desain yang sama berjalan di Anthropic, OpenAI, Google, OpenRouter, model lokal, dan lainnya.
• File instruksi: OpenCode membaca file AGENTS.md di proyek Anda (standar lintas alat, juga kompatibel dengan CLAUDE.md) untuk aturan proyek — tempat alami untuk menuliskan konvensi desain Anda. Jalankan /init untuk menghasilkannya.
• Dapat diperluas: Ia mendukung integrasi LSP, server MCP, tema, keybind, dan perintah kustom, ditambah tautan sesi yang dapat dibagikan untuk kolaborasi.

• Pemelihara: SST / Anomaly Innovations (proyek open-source)
• Kredensial: kunci API provider model Anda sendiri — BYOK, tanpa vendor lock-in
• Lisensi: MIT, open source

Mengapa agen terbuka apa-pun-modelnya cocok untuk pekerjaan desain

OpenCode tidak punya satu “model desain” seperti agen vendor — dan itulah intinya. Karena ia model-agnostic dan terbuka, Anda dapat menjalankan alur kerja desain yang sama pada model mana pun yang saat ini terbaik di frontend, menukarnya nanti, atau beralih ke model lokal, semua tanpa mengubah penyiapan Anda.

Tetapi pilihan model saja tidak membeli selera. Seperti setiap agen coding, OpenCode menghasilkan UI generik kecuali Anda memberinya batasan. Output desain yang baik datang dari tiga masukan yang Anda berikan.

• Sebuah design system: Tokens, primitif, dan konvensi nyata yang digunakan kembali oleh agen, sehingga output sesuai dengan brand alih-alih jatuh ke tampilan generik.
• Sebuah skill estetik: Skill terkurasi yang menegakkan selera nyata — gerak yang terkendali, hierarki brand-first, paling banyak dua typeface dan satu accent color — dan membuat agen berkomitmen pada arah sebelum membangun.
• Referensi konkret: Gambar referensi nyata dan banyak state (desktop dan mobile, hover, kosong, loading), bukan satu hero shot.

Pelajarannya: OpenCode memberi Anda kebebasan model, tetapi selera tetap datang dari konteks desain yang terkurasi. Open Design mengemas masukan-masukan itu secara persis, dan itulah mengapa keduanya cocok bersama — keduanya open-source dan local-first (lebih lanjut di bawah).

Menyiapkan OpenCode untuk pekerjaan desain, dari nol

Berikut jalur lengkap dari mesin yang bersih hingga OpenCode yang dapat membangun dan memverifikasi UI.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Tuliskan aturan desain Anda: Letakkan tokens, primitif, dan konvensi Anda di AGENTS.md (atau DESIGN.md yang dirujuk darinya) sehingga output sesuai dengan brand alih-alih jatuh ke tampilan generik. Opsi instructions di opencode.json dapat mengarah ke file aturan tambahan via glob.
• Pilih model yang mumpuni: Karena OpenCode model-agnostic, pilih provider/model mana pun yang saat ini paling kuat di frontend untuk putaran desain — dan biarkan sisa alur kerja Anda tetap tidak berubah.

Alur kerja screenshot-to-UI

Loop desain dengan daya ungkit tertinggi pada agen mana pun adalah mengubah gambar referensi menjadi UI yang berfungsi dan responsif, lalu mengiterasinya hingga cocok. Bentuk lima langkah yang sama berlaku di OpenCode.

1. Mulai dari referensi visual paling jelas yang Anda miliki — dan sertakan banyak state (desktop dan mobile, hover, kosong, loading), bukan hanya satu hero shot.
2. Bersikaplah spesifik dalam prompt; prompt yang samar menghasilkan UI generik.
3. Siapkan design system dan beri tahu OpenCode di mana tokens dan primitif kanonis berada (di AGENTS.md).
4. Jalankan dev server dan minta agen merender di browser sungguhan, mengubah ukuran ke breakpoint untuk memeriksa hasilnya.
5. Iterasi dengan meminta OpenCode membandingkan implementasinya kembali ke screenshot — bukan sekadar memastikan ia berhasil build.

Rujuk file dengan @ di TUI untuk pencarian fuzzy direktori kerja Anda, jalankan perintah shell secara inline dengan awalan !, dan kendalikan tindakan dengan perintah /. Lalu beri prompt dengan batasan konkret:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Jaga prompt tetap kecil dan terfokus, commit iterasi yang baik dan revert yang buruk (beri tahu OpenCode saat Anda revert), sehingga setiap putaran dibangun di atas dasar yang bersih.

AGENTS.md, MCP, dan sesi yang dapat dibagikan

Tiga titik ekstensi membuat OpenCode praktis untuk pekerjaan desain yang berkelanjutan, dan ketiganya terpetakan rapi ke alur kerja desain terbuka.

• Aturan AGENTS.md: Aturan proyek tinggal di sebuah AGENTS.md di root repo (atau aturan global di ~/.config/opencode/AGENTS.md). Ia adalah rumah yang tahan lama bagi konvensi desain Anda, dibaca pada setiap putaran, dan kompatibel dengan file CLAUDE.md yang dipakai agen lain.
• Server MCP: OpenCode mendukung server MCP lokal (command) maupun remote (URL), dikonfigurasikan di bawah kunci mcp — cara portabel untuk membawa konteks desain dan alat eksternal yang bekerja lintas agen, bukan hanya OpenCode.
• Sesi yang dapat dibagikan: Perintah /share membuat tautan publik ke sebuah percakapan untuk kolaborasi atau tinjauan, dan /unshare mencabutnya — berguna untuk mendapatkan umpan balik atas sebuah putaran desain.

Ini adalah kemampuan portabel dan multi-agen — persis jenis hal yang dibuat untuk diorkestrasikan oleh Open Design, alih-alih dibuat ulang per proyek.

OpenCode vs Codex vs Claude Code vs Cursor untuk desain

Tidak ada pemenang tunggal untuk pekerjaan desain — setiap agen punya kekuatan berbeda, dan tim berpengalaman menumpuknya. Ringkasan yang adil:

Putusan komunitas yang berulang adalah bahwa selera datang dari manusia: semuanya jatuh ke estetika generik tanpa skill, referensi, dan batasan. Itulah masalah sebenarnya yang harus dipecahkan — dan bentuknya seperti alat desain, bukan seperti model, yang justru menjadi alasan mengapa agen terbuka seperti OpenCode berpasangan begitu baik dengan lapisan desain terbuka.

Jebakan, dan cara menghindari tampilan “AI slop”

Keluhan paling umum tentang desain hasil AI adalah tampilannya yang generik — gradien lembut, panel mengambang, sudut membulat berukuran berlebihan, bayangan dramatis, nuansa Inter-dan-ungu yang “berteriak ini buatan AI.” Masalah lain yang dilaporkan termasuk layout mobile yang rusak dan instruksi yang bocor ke teks UI. Tak satu pun dari ini unik bagi OpenCode; semuanya terjadi ketika agen mana pun berjalan tanpa konteks desain yang terkurasi.

• Tambahkan sebuah skill estetik: Skill desain terkurasi memaksa agen berkomitmen pada arah nyata alih-alih tampilan default.
• Verifikasi di browser sungguhan: Render dan periksa diri sendiri di berbagai breakpoint sehingga layout tidak diam-diam rusak di mobile.
• Sediakan tokens dan referensi: Design tokens nyata dan screenshot referensi adalah satu daya ungkit terbesar bagi kualitas output.
• Tuliskan aturan di AGENTS.md: Letakkan aturan bergaya “tanpa hero card, maksimal dua typeface, hierarki brand-first” di tempat yang dibaca agen pada setiap putaran.

Perhatikan bahwa setiap mitigasi adalah soal memberi agen konteks desain yang terkurasi — terlepas dari model mana yang Anda jalankan. Memelihara konteks itu secara manual, per proyek, adalah kerja melelahkan yang dihapus Open Design.

Mendesain dengan OpenCode di dalam Open Design

Open Design adalah lapisan desain open-source yang terus diminta oleh alur kerja di atas. Ia memperlakukan OpenCode sebagai adaptor first-party dan membungkusnya dengan pustaka skill dan design system terkurasi, pipeline render terstruktur, dan UI desktop lokal — sehingga konteks desain yang membuat agen mana pun bagus sudah ada sejak putaran pertama, bukan dirakit secara manual setiap kali. Kedua proyek bersifat open-source dan local-first, yang menjadikan pasangan ini cocok secara alami.

1. Install Open Design dan pilih OpenCode sebagai agen Anda.
2. Autentikasi dengan kunci API provider model Anda sendiri (BYOK) — kredensial tetap di mesin Anda dan tidak pernah diproksi melalui kami.
3. Pilih provider dan model apa pun, plus design system dan skill, lalu hasilkan deck, prototipe, dan landing page dengan selera yang konsisten.
4. Setiap artefak dan file DESIGN.md hidup di repo Anda sendiri, bukan di cloud yang dihosting.

Agen OpenCode yang sama, kebebasan model yang sama — ditambah alur kerja desain open-source yang nyata dan portabel di sekelilingnya. Ia local-first dan Apache-2.0, sehingga tidak ada bagian dari pekerjaan atau kredensial Anda yang meninggalkan mesin Anda.

Pertanyaan yang sering diajukan

1. 01 Apakah OpenCode benar-benar bisa melakukan pekerjaan desain? +

   Ya — dengan skill estetik, design system, dan gambar referensi nyata dalam konteks, OpenCode menghasilkan UI berkualitas produksi dan responsif serta dapat memverifikasinya di browser. Karena ia model-agnostic, Anda menjalankan model mana pun yang saat ini terbaik di frontend. Tanpa konteks terkurasi itu, ia cenderung jatuh ke tampilan generik, dan itulah celah yang diisi Open Design.

2. 02 Model mana yang sebaiknya saya gunakan dengan OpenCode untuk desain? +

   Mana pun yang Anda suka — OpenCode bersifat provider-agnostic via models.dev, sehingga Anda dapat menjalankan Anthropic, OpenAI, Google, OpenRouter, atau model lokal di balik alur kerja yang sama dan beralih kapan saja. Kualitas output desain jauh lebih bergantung pada skill, design system, dan referensi Anda daripada pada modelnya saja.

3. 03 Apakah Open Design dibuat oleh tim OpenCode (SST)? +

   Bukan. Open Design adalah proyek open-source independen yang mengintegrasikan OpenCode sebagai agen. Ia melengkapi OpenCode dengan pustaka skill dan design system yang terbuka dan local-first.

4. 04 Apakah saya butuh langganan khusus untuk mendesain dengan OpenCode? +

   Tidak — OpenCode bersifat BYOK. Anda membawa kunci API provider model Anda sendiri, dan Open Design tidak pernah memproksi kredensial Anda. Tidak ada vendor lock-in.

5. 05 OpenCode atau Codex atau Claude Code untuk desain frontend? +

   Semuanya kuat, dan banyak tim menumpuknya. Keunggulan OpenCode adalah sepenuhnya open-source dan model-agnostic; Codex unggul dalam build yang didelegasikan dan tersandbox; Claude Code dikenal karena keputusan desain yang spesifik dan sadar codebase. Open Design memungkinkan Anda berganti agen tanpa mengubah alur kerja desain Anda.

6. 06 Bagaimana cara memperluas OpenCode untuk konteks desain? +

   Tuliskan aturan di AGENTS.md, tambahkan server MCP di bawah kunci mcp untuk alat portabel dan konteks desain, serta gunakan sesi yang dapat dibagikan untuk tinjauan. Open Design menyediakan pustaka skill dan design system terkurasi sehingga Anda melewati penyiapan per proyek.

7. 07 Apakah Open Design berafiliasi dengan OpenCode atau SST? +

   Tidak. OpenCode adalah proyek open-source yang dipelihara oleh SST (Anomaly Innovations); Open Design adalah proyek open-source independen yang mendukungnya sebagai adaptor first-party.

8. 08 Apakah file dan kredensial saya aman? +

   Ya — Open Design bersifat local-first. File, artefak, dan DESIGN.md Anda tetap di repo Anda sendiri, dan kredensial provider model Anda digunakan langsung oleh agen Anda, tidak pernah dirutekan melalui server Open Design.