Form dulu
Surface · audiens · tone · brand · skala. Tiga puluh detik radio button mengalahkan tiga puluh menit revisi.
Open source · Local-first · BYOK
Open Design
Alternatif open source untuk Claude Design.
Digerakkan oleh coding-agent CLI yang sudah Anda punya — Claude Code, Codex, Cursor, Gemini, OpenCode, plus sebelas lainnya. 110 Skills · 141 Design Systems · 5 arah visual · Apache-2.0.
Apache-2.0 · tanpa daftar · CLI Anda, key Anda
Open Design · demo live
Lihat semua 110 skills Kenapa proyek ini ada
Claude Design viral. Dan tetap tertutup.
Claude Design dari Anthropic (Opus 4.7, April 2026) menunjukkan apa yang terjadi ketika LLM berhenti menulis prosa dan mulai mengirim artifact desain. Dia viral — dan tetap tertutup, berbayar, hanya cloud, terkunci ke model dan skills Anthropic. Open Design adalah alternatif open source-nya. Loop yang sama. Model mental «artifact dulu» yang sama. Tanpa lock-in.
Tertutup → terbuka
Apache-2.0, dari atas sampai bawah.
Tiap skill adalah file. Tiap design system adalah file Markdown. Tiap prompt adalah modul TypeScript yang bisa Anda baca dan edit.
Agent bawaan → milik Anda
Pakai CLI yang sudah Anda punya.
16 CLI coding-agent terdeteksi otomatis di PATH Anda. Tidak ada CLI? Tempel saja baseUrl + apiKey kompatibel OpenAI mana saja.
Cloud → lokal
Jalan di laptop Anda. Deploy ke Vercel.
pnpm tools-dev untuk jalan lokal. SQLite di .od/. Deploy Vercel opsional. Data Anda, filesystem Anda, keputusan Anda.
Bagaimana sebuah prompt jadi artifact
Empat langkah. Tanpa improvisasi.
OD tidak membiarkan model berimprovisasi sepiksel pun. Tiap brief dikunci sebelum lukisan dimulai.
Picker arah
Tidak ada brand spec? Pilih dari 5 arah visual yang sudah dikurasi — masing-masing dengan palet OKLch deterministik dan font stack.
TodoWrite streaming
Rencana agent datang sebagai card live. in_progress → completed update real-time. Belok arah di tengah jalan biayanya murah.
<artifact> render
Preview di iframe sandbox. Bisa diedit di tempat. Bisa diunduh sebagai HTML, PDF, PPTX, atau ZIP.
Apa yang ada di kotak
110 Skills × 141 Design Systems.
Tiap Skill adalah folder. Tiap Design System adalah file Markdown 9 section. Drop folder, restart daemon, langsung muncul di picker. Ganti sistem, render berikutnya pakai token baru.
Skill spotlight · html-ppt
Satu skill. 36 tema, 31 layout, 47 animasi, 14 template deck.
Skill html-ppt bawaan membawa tiap primitive yang dibutuhkan agent deck: mode presenter, library layout, set animasi kinetik, dan 14 template siap di-fork. Drop folder, restart daemon — Anda punya engine PPT di browser.
Varian «taste-locked»
Engine yang sama, tiga taste.
html-ppt-taste-brutalist dan html-ppt-taste-editorial dirilis sebagai wrapper «taste-locked» mandiri — skill yang sama, estetika sudah dipaku. Plus tiga lagi untuk web prototype: web-prototype-taste-{brutalist,editorial,soft}.
Bring your own agent
16 CLI terdeteksi otomatis di PATH Anda.
Mana yang sudah terinstal jadi kandidat engine desain. Ganti satu klik di picker model.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
Tidak ada CLI? POST /api/proxy/stream menerima baseUrl + apiKey + model apa pun yang kompatibel OpenAI, Azure, atau Google. Shim Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, vLLM self-host Anda — semua di loop yang sama. Dijaga SSRF di pinggir daemon, memblokir loopback, link-local, dan RFC1918.
Tujuh ide penopang
Apa yang kami percayai, dalam tujuh baris.
01
Kami tidak bawa agent. Punya Anda sudah cukup.
+
01
Kami tidak bawa agent. Punya Anda sudah cukup.
Daemon scan PATH Anda mencari 16 CLI coding-agent yang sudah dikenal. Mana yang ditemukan jadi kandidat engine desain, dikendalikan via stdio dengan satu adapter per CLI.
02
Skills itu file, bukan plugin.
+
02
Skills itu file, bukan plugin.
Tiap skill adalah SKILL.md + assets/ + references/. Drop folder ke skills/, restart daemon, langsung muncul di picker. Bundle magazine-web-ppt diikutkan apa adanya, lisensi tetap utuh.
03
Design Systems itu Markdown portabel, bukan JSON theme.
+
03
Design Systems itu Markdown portabel, bukan JSON theme.
Skema DESIGN.md 9 section — warna, tipografi, spacing, layout, komponen, motion, voice, brand, anti-pattern. Tiap artifact baca dari sistem yang aktif. Ganti sistem → render berikutnya pakai token baru.
04
Form interaktif memotong 80 % revisi.
+
04
Form interaktif memotong 80 % revisi.
Giliran 1 cuma <question-form>: tanpa berpikir, tanpa tools, tanpa narasi. Surface · audiens · tone · brand · skala. Biaya salah arah hanya satu putaran chat, bukan satu deck jadi.
05
Daemon membuat agent terasa seperti ada di laptop Anda.
+
05
Daemon membuat agent terasa seperti ada di laptop Anda.
Daemon spawn CLI dengan cwd di folder artifact proyek Anda. Agent dapat Read, Write, Bash, WebFetch — tools sungguhan di filesystem sungguhan. SQLite menyimpan projects, conversations, messages, tabs.
06
Prompt stack itu produknya.
+
06
Prompt stack itu produknya.
Discovery directives + identity charter + DESIGN.md aktif + SKILL.md aktif + metadata proyek + side-file skill. Tiap layer composable. Tiap layer adalah file yang bisa Anda edit.
07
Open Design bukan silo. Agent Anda yang lain ikut baca.
+
07
Open Design bukan silo. Agent Anda yang lain ikut baca.
`od mcp` mengekspos proyek sebagai MCP server stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — apa pun yang ngomong MCP — bisa baca artifact, file, dan metadata Anda langsung. Read-only di tepi: baca file, search, metadata. Tidak ada permukaan tulis, tidak ada panggilan keluar.
Prompt stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Tiap layer composable. Tiap layer adalah file yang bisa Anda edit.
Bandingkan
Open Design lawan yang lain.
Produk cloud tertutup, peer desktop terbuka, web app terbuka. Kami pinjam banyak dari open-codesign dan beri credit di /about — format beda, prompt-stack beda, bintang utara sama.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Lisensi & biaya | |||
| Lisensi | tertutup | MIT | Apache-2.0 |
| Tagihan minimum | Pro / Max / Team | BYOK | BYOK — URL kompatibel OpenAI mana pun |
| Format | |||
| Format | Web (claude.ai) | Desktop (Electron) | Web app + daemon lokal |
| Bisa deploy ke Vercel | — | — | ya |
| Runtime AI & flow | |||
| Runtime agent | bawaan (Opus 4.7) | bawaan (pi-ai) | CLI Anda yang sudah ada |
| Fleksibilitas provider | hanya Anthropic | 7+ via pi-ai | 16 CLI + proxy BYOK |
| Form (giliran 1) | — | — | aturan keras |
| 5 arah visual | — | — | ya |
| Self-critique 5 dimensi | — | — | gerbang sebelum emit |
| Skills, sistem, & migrasi | |||
| Skills | proprietary | 12 modul TS | 110 bundle SKILL.md droppable |
| Design systems | proprietary | DESIGN.md (v0.2) | 141 sistem disertakan |
| Import ZIP Claude Design | n/a | — | ya — lanjut dari titik Anthropic berhenti |
Claude Design adalah merek dagang Anthropic. Open Design tidak berafiliasi dengan atau didukung oleh Anthropic.
Lebih dari chat
Gambar, video, audio — interface yang sama.
Chat yang menghasilkan HTML <artifact> juga menggerakkan generasi gambar, video, dan audio. Tiap render mendarat sebagai .png atau .mp4 sungguhan di workspace proyek Anda. 95 prompt siap pakai di prompt-templates/.
01
gpt-image-2
Poster · avatar · peta ilustrasi · infografik · social card gaya majalah · UI game · still naratif game
perbesar gpt-image-2
Evolusi tangga batu 3D
perbesar gpt-image-2
Peta kuliner kota berilustrasi
perbesar gpt-image-2
Adegan lift sinematik
perbesar gpt-image-2
Potret anime cyberpunk
perbesar gpt-image-2
Potret studio glamor
perbesar gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
perbesar gpt-image-2
Three Kingdoms — Guanyu membunuh Yanliang
perbesar gpt-image-2
Three Kingdoms — Lyubu memanah di Yuanmen
perbesar gpt-image-2
Three Kingdoms — Zhaoyun lari menggendong bayi
perbesar gpt-image-2
HUD MMO open-world Tiongkok kuno
perbesar gpt-image-2
Gambar krayon anak → versi fotoreal
perbesar gpt-image-2
Pembongkaran koreografi otaku — 16 panel
perbesar gpt-image-2
Storyboard tarian sensasional — 8 shot
02
Seedance 2.0
15 detik t2v + i2v sinematik beraudio · short naratif · film produk
Seedance 2.0
Music Podcast & gitar
Seedance 2.0
Close-up wajah emosional
Seedance 2.0
Supercar mewah sinematik
Seedance 2.0
Satire kucing Kota Terlarang
Seedance 2.0
Short romansa Jepang
Seedance 2.0
Penerbangan naga sinematik
Seedance 2.0
Kejar-kejaran di pabrik pasca apokaliptik
Seedance 2.0
Trailer game cyberpunk
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Storyboard akademi sihir
Seedance 2.0
Perkelahian vampir di gang
Seedance 2.0
Estetika wuxia retro HK
Seedance 2.0
Three Kingdoms — Guanyu membunuh Yanliang
Seedance 2.0
Three Kingdoms — Lyubu memanah di Yuanmen
Seedance 2.0
Three Kingdoms — Zhaoyun lari menggendong bayi
Seedance 2.0
Bocah animasi 3D bermain Lego
Seedance 2.0
Penyelamatan naga penjaga kuno
Seedance 2.0
Kerajaan India kuno — FPV
Seedance 2.0
Motion graphics intro karakter
Seedance 2.0
Tarian tangan wanita Asia Timur
Seedance 2.0
Biolog laut dalam ekspedisi
Seedance 2.0
Balap jalanan sinematik
Seedance 2.0
Jumpscare roket-pemanggang roti
Seedance 2.0
Bajak laut Disney vintage dan buaya
Seedance 2.0
Fantasi haute couture Hollywood
03
HyperFrames
Motion graphics HTML→MP4 · reveal produk · tipografi kinetik · grafik data
perbesar HyperFrames
Outro logo sinematik
perbesar HyperFrames
Showcase app di tiga ponsel
perbesar HyperFrames
Karaoke TikTok
perbesar HyperFrames
Lomba bar chart
perbesar HyperFrames
Rute peta penerbangan
perbesar HyperFrames
Pencacah uang hype
perbesar HyperFrames
Tumpukan overlay social
perbesar HyperFrames
UI 3D-reveal
Quickstart
Tiga perintah. Tanpa daftar.
Node ~24, pnpm 10.33.x. Jalan di macOS, Windows, dan Linux (build AppImage via `pnpm tools-pack linux build --to appimage`). Daemon bikin folder .od/ lokal untuk SQLite dan artifact per proyek. Tanpa langkah init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run webYang baru · v0.5.0
Render sekali, v0.4.0, iterasi tanpa henti.
v0.5.0 melanjutkan tekukan loop artifact — Inspect mode menggali sampai node DOM, dashboard menarik data hidup ke panel, Critique Theater masuk Phase 5 dengan rubrik yang dikeraskan dan panelis yang memanggil MCP sendiri. Linux dapat lifecycle CLI kelas satu, Docker Compose dapat satu perintah, Nano Banana sudah tersambung.
Inspect mode
Inspect — tunjuk node DOM mana pun, dapat potongan suntingan rapi.
Klik elemen di preview, Inspect mode mengembalikan node persisnya — class, prop, layout — dan langsung melekat ke prompt berikutnya. Tidak perlu balik bolak-balik ke agent menceritakan ulang: tinggal tunjuk dan bilang 'perbaiki ini'.
v0.5.0 · PR #672
Live dashboards
Live Artifacts — kelas satu, bukan mock beku.
v0.5.0 mengangkat data hidup jadi kategori artifact tersendiri. Dua skill dashboard baru (`live-dashboard`, `flowai-live-dashboard-template`) datang dengan connector Composio sudah tersambung — tarik dari GitHub, Linear, Notion, Gmail, artifact memperbarui di tempat.
v0.5.0 · PR #698 + #701
Critique Phase 5
Phase 5 — rubrik diasah, panelis memanggil MCP.
Critique Theater melangkah ke Phase 5: rubrik tidak goyang antar penilaian, panelis memanggil tool MCP untuk memverifikasi bukti, transcript lebih terstruktur, persistence stabil saat banyak artifact jalan paralel.
v0.5.0 · PR #689 + #694
Protokol
od mcp — Open Design sebagai MCP server.
Jalankan `od mcp` dan coding-agent apa pun yang ngomong MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) langsung baca file, indeks pencarian, dan metadata proyek Anda. Read-only di tepi. Dirilis di v0.4.0, masih jadi pintu utama untuk coding-agent Anda.
v0.4.0 · PR #399
Silsilah Open Design
Open Design dirakit dari ini.
alchaincyf
Kompas filosofi desain
huashu-design ↗
Workflow Junior-Designer, protokol brand-asset 5 langkah, checklist anti-AI-slop, self-critique 5 dimensi, dan 5 mazhab × 20 filosofi desain di balik picker arah Open Design.
op7418
Mode deck
guizang-ppt-skill ↗
Disertakan apa adanya di skills/guizang-ppt/ dengan LICENSE asli tetap utuh. Layout gaya majalah, hero WebGL, dan budaya checklist P0/P1/P2 mengalir ke setiap skill Open Design lainnya.
OpenCoworkAI
Saudara terdekat · bintang utara UX
open-codesign ↗
Loop artifact streaming, preview iframe sandbox, panel agent live (todos + tool calls + bisa diinterupsi), export lima format, anotasi mode komentar. Form factor sengaja berbeda — open-codesign kirim Electron + pi-ai, Open Design kirim web + daemon lokal + CLI Anda.
multica-ai
Arsitektur daemon
multica ↗
Deteksi agent via scan PATH, daemon lokal sebagai satu-satunya proses berhak istimewa, pandangan agent sebagai rekan tim. Open Design mengadopsi model arsitekturnya; kode multica sendiri tidak ikut disertakan.
Beri kami bintang
Kalau ini menghemat setengah jam Anda — beri ★.
Bintang tidak bayar sewa, tapi memberi tahu desainer, agent, dan kontributor berikutnya bahwa eksperimen ini layak diperhatikan.
Apache-2.0
Open source
110
Skills
141
Design Systems
16 + BYOK
CLI
FAQ
Pertanyaan umum
Apa itu Open Design?
+
Open Design adalah alternatif open source untuk Claude Design dari Anthropic. Jalan lokal dengan pnpm tools-dev, deploy ke Vercel, dan pakai coding-agent CLI yang sudah Anda punya (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 lain) sebagai engine desain. Berlisensi Apache-2.0.
Apa beda Open Design dengan Claude Design?
+
Claude Design itu tertutup, berbayar (Pro/Max/Team), hanya cloud, dan terkunci ke model dan skills Anthropic. Open Design open source, BYOK, local-first, dan biarkan Anda ganti model bebas di antara 16 adapter CLI atau endpoint kompatibel OpenAI / Azure / Google mana pun.
Bisakah Open Design menggantikan Claude Design untuk tim saya?
+
Kalau Anda butuh self-hosting, fleksibilitas model, atau skill custom, bisa. Loop tertutup (deteksi agent → pilih skill + design system → chat → parse <artifact> → preview → save) jalan ujung ke ujung. v0.4.x menambahkan Critique Theater (penilaian Design Jury sebelum dirilis), Tweaks mode (picker elemen + lampiran chat), Manual edit mode, dan live artifact yang menarik data hidup lewat connector Composio.
Perlu langganan Claude Pro untuk pakai Open Design?
+
Tidak. Open Design pakai coding-agent CLI yang sudah ada di PATH Anda, atau API key kompatibel OpenAI mana pun via proxy BYOK. Bawa key Anda dari provider yang Anda suka.
CLI coding-agent mana saja yang didukung Open Design?
+
16 dari pabrik: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI, dan Pi. Terdeteksi otomatis di PATH saat daemon boot.
Bagaimana cara import proyek Claude Design yang sudah ada ke Open Design?
+
Drop ZIP export Claude Design ke dialog welcome. POST /api/import/claude-design ekstrak ke folder nyata .od/projects/<id>/, buka file entry sebagai tab, dan siapkan continue-prompt untuk agent lokal Anda.
Bisa self-host Open Design di Vercel?
+
Bisa. Layer web-nya Next.js 16 + React 18 + TypeScript, bisa deploy ke Vercel. Daemon lokal tetap di laptop Anda. Topology B (Vercel + tunnel) untuk setup sepenuhnya remote ada di roadmap.
Bagaimana menambah design system custom ke Open Design?
+
Drop file DESIGN.md ke design-systems/<brand-Anda>/ mengikuti skema 9 section (warna, tipografi, spacing, layout, komponen, motion, voice, brand, anti-pattern). Restart daemon — muncul di picker.
Open Design gratis? Lisensinya apa?
+
Apache-2.0. Bundle skills/guizang-ppt/ dan skills/html-ppt/ tetap pakai lisensi MIT asli dengan atribusi terjaga. Tanpa tier berbayar. Tanpa batas pemakaian. Satu-satunya biaya adalah apa pun yang ditagih provider LLM pilihan Anda.
Bagaimana Open Design menghindari tampilan AI-slop?
+
Form di giliran 1 mengunci brief sebelum model melukis. Picker 5 arah memberi palet deterministik kalau tidak ada brand spec. Self-critique 5 dimensi memberi nilai sebelum emit. Tiap skill membawa checklist P0/P1/P2 yang dipaksa via injection side-file di pre-flight. Gradien ungu agresif, ikon emoji generik, dan Inter sebagai display font dilarang eksplisit di prompt stack.
Bisa pakai Open Design tanpa instal CLI apa pun?
+
Bisa. POST /api/proxy/stream forward chunk SSE ke endpoint kompatibel OpenAI, Azure, atau Google mana pun. Tempel baseUrl, apiKey, dan model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, vLLM self-host Anda, shim Anthropic-via-OpenAI — semua jalan. Dijaga SSRF di loopback dan jaringan privat.
Bagaimana memverifikasi config BYOK provider tanpa membuka chat dulu?
+
Settings → Execution punya tombol Connection test (v0.5.0, PR #507). Tempel baseUrl + apiKey + model, klik Test — Open Design menembakkan handshake minimal ke provider lalu memunculkan respons atau frame error persisnya. Jalan untuk Anthropic, OpenAI-compat, Azure, dan Google. Hemat ronde chat-lalu-telusuri-error saat key salah, nama model salah ketik, atau gateway sedang menahan Anda.
Apakah data saya dikirim ke Anthropic saat pakai Open Design?
+
Hanya kalau Anda pilih model Anthropic (Claude Code atau via proxy BYOK dengan key Anthropic). Open Design sendiri menyimpan semua di SQLite lokal di .od/app.sqlite dan file per proyek di .od/projects/. Tidak ada yang diunggah ke server Open Design — tidak ada server Open Design.
Bisakah coding-agent saya yang lain membaca proyek Open Design?
+
Bisa. Jalankan `od mcp` dan Open Design mengekspos diri sebagai MCP server stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — tool apa pun yang ngomong MCP — bisa baca file proyek Anda, jalankan search, dan periksa metadata. Antarmuka read-only di tepi: baca file, search, metadata. Tidak ada permukaan tulis, tidak ada panggilan keluar. Dirilis di v0.4.0.
Apa itu Critique Theater?
+
Design Jury 5 panelis yang memberi nilai tiap artifact sebelum dirilis — aksesibilitas, kecocokan brand, craft, konten, struktur. Persistence + transcript + orchestrator sudah ujung ke ujung sejak Phase 4 v0.4.0. Di bawah ambang yang dikonfigurasi, agent merevisi dan menilai ulang; di atasnya, artifact emit keluar.
Apa itu live artifact dan connector apa saja yang didukung?
+
Live artifact menarik data hidup ke panel preview lewat katalog connector Composio — GitHub, Linear, Notion, Gmail, dan lainnya. Skill bawaan orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion serta social-media-dashboard menunjukkan pemasangan ujung ke ujung. Dirilis di v0.4.0 (PR #381).
Kirim
Kirim artifact pertama Anda dalam tiga menit.
Clone repo. Jalankan tiga perintah. Ketik prompt. Lihat form datang, isi, lihat card todo streaming, lihat artifact render.