Önce soru formu
Surface · audience · tone · brand · scale. Otuz saniyelik radio'lar, otuz dakikalık yön değişikliklerinden iyidir.
Açık kaynak · Yerel öncelikli · BYOK
Açık kaynak alternatif: Claude Design.
Zaten kullandığın coding-agent CLI'ı üzerinden çalışır — Claude Code, Codex, Cursor, Gemini, OpenCode ve on bir tane daha. 110 Skills · 141 Design Systems · 5 görsel yön · Apache-2.0.
Apache-2.0 · kayıt yok · kendi CLI'ın, kendi anahtarların
Bu neden var
Anthropic'in Claude Design'ı (Opus 4.7, Nisan 2026) bir LLM'in nesir yazmayı bırakıp tasarım artifact'i üretmeye geçtiğinde ne olduğunu gösterdi. Viral oldu — ve kapalı kaynak, sadece ücretli, sadece bulut, Anthropic'in modeline ve skill'lerine bağlı kaldı. Open Design açık kaynak alternatif. Aynı loop. Aynı «artifact öncelikli» zihniyet. Hiçbir kilit yok.
Kapalı → Açık
Her skill bir dosya. Her design system bir Markdown dosyası. Her prompt okuyup düzenleyebileceğin bir TypeScript modülü.
Pakette agent → Kendi agent'ın
PATH'de 16 coding-agent CLI otomatik tespit ediliyor. CLI yok mu? OpenAI uyumlu herhangi bir baseUrl + apiKey yapıştır.
Bulut → Yerel
Yerelde çalıştırmak için pnpm tools-dev. .od/ altında SQLite. İsteğe bağlı Vercel deploy. Senin verin, senin dosya sistemin, senin kararın.
Bir prompt nasıl artifact olur
OD modele tek piksel doğaçlatmaz. Resim çizmeye başlamadan önce her brief kilitlenir.
Surface · audience · tone · brand · scale. Otuz saniyelik radio'lar, otuz dakikalık yön değişikliklerinden iyidir.
Brand spec yok mu? 5 seçilmiş görsel yönden birini seç — her biri deterministik bir OKLch palet + font stack'i.
Agent'ın planı canlı bir kart olarak akar. in_progress → completed güncellemeleri gerçek zamanlı düşer. Uçuş halindeyken bile ucuza yön değiştirebilirsin.
Sandbox iframe önizleme. Yerinde düzenlenebilir. HTML, PDF, PPTX veya ZIP olarak indirilebilir.
Kutuda ne çıkıyor
Her Skill bir klasör. Her Design System 9 bölümlü bir Markdown dosyası. Klasörü bırak, daemon'u yeniden başlat, picker'da çıkar. Sistemi değiştir, bir sonraki render yeni token'larla çıkar.
Beceri vitrini · html-ppt
Pakette gelen html-ppt skill'i, bir deck agent'ın ihtiyacı olan her ilkeli getirir: presenter mode, layout kütüphanesi, kinetik animasyon seti ve fork'lamaya hazır 14 template. Klasörü bırak, daemon'u yeniden başlat, tarayıcıda bir PPT motorun olur.
Damak kilidi varyantları
html-ppt-taste-brutalist ve html-ppt-taste-editorial, bağımsız «damak kilitli» wrapper'lar olarak yayınlandı — aynı skill, farklı sabitlenmiş estetik. Web prototip için üç tane daha: web-prototype-taste-{brutalist,editorial,soft}.
Kendi agent'ını getir
Hangileri kuruluysa onlar tasarım motoru adayına dönüşür. Model picker'dan tek tıkla değiştir.
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
Kurulu CLI yok mu? POST /api/proxy/stream OpenAI uyumlu, Azure uyumlu veya Google uyumlu herhangi bir baseUrl + apiKey + model alır. Anthropic-via-OpenAI shim, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, kendi self-host vLLM'in — hepsi aynı loop. Daemon ucunda loopback / link-local / RFC1918 hedeflerine karşı SSRF korumalı.
Altı yük taşıyan fikir
01
Daemon, PATH'ini bilinen 16 coding-agent CLI'ı için tarar. Bulduğu hangileri varsa, her CLI başına bir adapter ile stdio üzerinden sürülür ve tasarım motoru adayına dönüşür.
02
Her skill SKILL.md + assets/ + references/. Bir klasörü skills/ altına bırak, daemon'u yeniden başlat, picker'da çıkar. Pakette gelen magazine-web-ppt, lisansı korunarak harfi harfine commit edildi.
03
9 bölümlü DESIGN.md şeması — color, typography, spacing, layout, components, motion, voice, brand, anti-patterns. Her artifact aktif sistemden okur. Sistemi değiştir → bir sonraki render yeni token'larla çıkar.
04
Tur 1 sadece bir <question-form> — düşünme yok, araç yok, anlatı yok. Surface · audience · tone · brand · scale. Yanlış yönün maliyeti bir chat turu, bitmiş bir deck değil.
05
Daemon CLI'ı, cwd'si projenin artifact klasörüne ayarlı şekilde başlatır. Agent gerçek bir dosya sistemi üzerinde gerçek araçlar elde eder: Read, Write, Bash, WebFetch. SQLite projeleri, konuşmaları, mesajları, sekmeleri tutar.
06
Discovery directives + identity charter + aktif DESIGN.md + aktif SKILL.md + project metadata + skill side files. Her katman birleştirilebilir. Her katman düzenleyebileceğin bir dosya.
07
`od mcp` projeyi stdio bir MCP server olarak açığa çıkarır. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — MCP konuşan ne varsa — artifact'lerini, dosyalarını ve metadata'nı doğrudan okuyabilir. Uçta read-only: dosya okuma, arama, metadata. Yazma yüzeyi yok, dış arama yok.
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)
Her katman birleştirilebilir. Her katman düzenleyebileceğin bir dosya.
Karşılaştır
Kapalı bulut ürünü, açık desktop akranı, açık web app. open-codesign'dan cömertçe ödünç alıp /about sayfasında atfını veriyoruz — farklı biçim, farklı prompt-stack, aynı kuzey yıldızı.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| Lisans ve maliyet | |||
| Lisans | Kapalı | MIT | Apache-2.0 |
| Asgari faturalandırma | Pro / Max / Team | BYOK | BYOK — herhangi bir OpenAI uyumlu URL yapıştır |
| Biçim | |||
| Biçim | Web (claude.ai) | Desktop (Electron) | Web app + yerel daemon |
| Vercel'e deploy edilebilir | — | — | Evet |
| AI runtime ve akış | |||
| Agent runtime | Pakette (Opus 4.7) | Pakette (pi-ai) | Mevcut CLI'ın |
| Sağlayıcı esnekliği | Sadece Anthropic | pi-ai üzerinden 7+ | 16 CLI + BYOK proxy |
| Soru formu (tur 1) | — | — | Sıkı kural |
| 5 görsel yön | — | — | Evet |
| 5 boyutlu öz-eleştiri | — | — | Yayın öncesi kapı |
| Skill, sistem ve geçiş | |||
| Skills | Tescilli | 12 TS modülü | 110 bırakılabilir SKILL.md bundle'ı |
| Design systems | Tescilli | DESIGN.md (v0.2) | 141 sistem yayında |
| Claude Design ZIP içe aktarma | yok | — | Evet — Anthropic'in bıraktığı yerden devam et |
Claude Design, Anthropic'in tescilli markasıdır. Open Design, Anthropic ile bağlantılı veya onaylı değildir.
Chat'in ötesi
<artifact> HTML üreten chat aynı zamanda görüntü, video ve ses üretimini de sürer. Her render proje workspace'inde gerçek bir .png veya .mp4 olarak düşer. prompt-templates/ altında 95 hazır prompt.
Poster · avatar · resimli haritalar · infografik · dergi tarzı sosyal kart · oyun UI · anlatı oyun karesi
genişlet gpt-image-2
3D Taş Merdiven Evrimi
genişlet gpt-image-2
Resimli Şehir Yemek Haritası
genişlet gpt-image-2
Sinematik Asansör Sahnesi
genişlet gpt-image-2
Cyberpunk Anime Portresi
genişlet gpt-image-2
Glamour Stüdyo Portresi
genişlet gpt-image-2
Anime Dövüş Oyunu — Kaptan Ryuuga vs Kaze Renshin
genişlet gpt-image-2
Üç Krallık — Guanyu, Yanliang'ı Öldürür
genişlet gpt-image-2
Üç Krallık — Lyubu Yuanmen Okçuluğu
genişlet gpt-image-2
Üç Krallık — Zhaoyun Beşik Kaçışı
genişlet gpt-image-2
Antik Çin Açık Dünya MMO HUD
genişlet gpt-image-2
Pastel Boya Çocuk Çizimi → Foto-gerçek Yeniden
genişlet gpt-image-2
Otaku Dans Koreografi Çözümü — 16 panel
genişlet gpt-image-2
Çarpıcı Kız Dans Storyboard'u — 8 kare
Sesli 15s sinematik t2v + i2v · anlatı kısa filmler · ürün filmleri
Seedance 2.0
Müzik Podcast'i ve Gitar
Seedance 2.0
Duygusal Yüz Yakın Çekim
Seedance 2.0
Lüks Supercar Sinematik
Seedance 2.0
Yasak Şehir Kedi Hicvi
Seedance 2.0
Japon Romantik Kısa Filmi
Seedance 2.0
Sinematik Ejderha Uçuşu
Seedance 2.0
Çorak Diyar Fabrika Kovalamacası
Seedance 2.0
Cyberpunk Oyun Tanıtımı
Seedance 2.0
Kızıl Ufuk Bilim Kurgu
Seedance 2.0
Sihirli Akademi Storyboard'u
Seedance 2.0
Vampir Sokak Kavgası
Seedance 2.0
Retro HK Wuxia Estetiği
Seedance 2.0
Üç Krallık — Guanyu, Yanliang'ı Öldürür
Seedance 2.0
Üç Krallık — Lyubu Yuanmen Okçuluğu
Seedance 2.0
Üç Krallık — Zhaoyun Beşik Kaçışı
Seedance 2.0
3D Animasyon Çocuk Lego Yapıyor
Seedance 2.0
Antik Koruyucu Ejderha Kurtarması
Seedance 2.0
Antik Hint Krallığı — FPV
Seedance 2.0
Karakter Tanıtım Motion Graphics
Seedance 2.0
Doğu Asyalı Kadın El Dansı
Seedance 2.0
Deniz Biyoloğu Keşfi
Seedance 2.0
Sokak Yarışı Sinematik
Seedance 2.0
Tost Makinesi Roket Sürprizi
Seedance 2.0
Vintage Disney Korsan Timsahı
Seedance 2.0
Hollywood Haute Couture Fantastik
HTML→MP4 motion graphics · ürün tanıtımları · kinetik tipografi · veri grafikleri
genişlet HyperFrames
Logo Outro Sinematik
genişlet HyperFrames
Uygulama Vitrini · 3 telefon
genişlet HyperFrames
TikTok Karaoke
genişlet HyperFrames
Bar-Chart Yarışı
genişlet HyperFrames
Uçuş Rota Haritası
genişlet HyperFrames
Para Sayacı Hype
genişlet HyperFrames
Sosyal Overlay Stack
genişlet HyperFrames
UI 3D Tanıtım
Hızlı başlangıç
Node ~24, pnpm 10.33.x. macOS, Windows ve Linux'ta çalışır (`pnpm tools-pack linux build --to appimage` ile AppImage build). Daemon, SQLite + proje bazlı artifact için yerel bir .od/ klasörü oluşturur. Init adımı yok.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web Yenilikler · v0.5.0
v0.5.0 artifact loop'unu «bir kez render» olmaktan çıkarıp «sonsuza kadar yinele»ye çeviriyor — eleman bazında ince ayar için Inspect mode, birinci sınıf bir veri kategorisi olarak live dashboards, daha keskin bir Design Jury rubric'i. v0.4.0'dan gelen `od mcp` hâlâ tüm bunları laptop'undaki diğer her coding agent'a iletiyor.
Eleman bazında ince ayar
Herhangi bir elemanın hesaplanmış stillerini hover et, tıkla, kurcala — renk, spacing, tip — agent'tan gidip gelmek zorunda kalmadan. Artifact yerinde güncellenir. Memnun olduğunda, değişiklikler kaynak dosyalara akar.
v0.5.0 · PR #362
Birinci sınıf kategori
Üç yeni dashboard skill'i (`live-dashboard`, `clinic-console` template'i, `flowai-live-dashboard-template`) ve bir Notion-ekip-dashboard prompt template'i, artifact'leri gerçek Composio connector'larına bağlıyor. Önizleme paneli canlı veri gösteriyor, donmuş mock'ları değil.
v0.5.0 · PR #778 + #795 + #801 + #799
Kalite kapısı · Phase 5
Her panelist'in skor rubric'i artık paylaşılan system composer'dan geçen panel bazlı bir prompt template'inde yaşıyor. Eleştiriler run'lar arasında tutarlı kalıyor. Phase 4'ten persistence, transcript, orchestrator hâlâ geçerli.
v0.5.0 · PR #524
Protokol
`od mcp` çalıştır ve MCP konuşan herhangi bir coding agent (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) projenin dosyalarını, arama indeksini ve metadata'sını doğrudan okur. Uçta read-only. OD app'inin açtığı proje, diğer her agent'ın artık gördüğü proje.
v0.4.0 · PR #399
Open Design'ın soy ağacı
alchaincyf
Tasarım felsefesi pusulası
Junior-Designer iş akışı, 5 adımlı brand-asset protokolü, AI-slop karşıtı checklist, 5 boyutlu öz-eleştiri ve Open Design'ın direction picker'ının arkasındaki «5 ekol × 20 tasarım felsefesi».
op7418
Deck modu
skills/guizang-ppt/ altında orijinal LICENSE korunarak harfi harfine pakete eklendi. Dergi tarzı layout'lar, WebGL hero ve P0/P1/P2 checklist kültürü diğer her Open Design skill'i için ödünç alındı.
OpenCoworkAI
En yakın akran · UX kuzey yıldızı
Streaming-artifact loop, sandbox iframe önizleme, canlı agent paneli (todo'lar + tool çağrıları + kesintiye uğratılabilir), beş formatlı export, comment modlu önizleme yorumları. Biçim bilinçli olarak farklı — open-codesign Electron + pi-ai çıkarıyor, Open Design web + yerel daemon + senin CLI'ın çıkarıyor.
multica-ai
Daemon mimarisi
PATH-tarama agent tespiti, tek ayrıcalıklı süreç olarak yerel daemon, agent'ı ekip arkadaşı gibi görme dünya görüşü. Open Design mimari modeli benimsiyor; multica kodunun kendisi vendor edilmedi.
Bizi star'la
Star'lar kira ödemiyor ama bir sonraki tasarımcıya, agent'a ve katkıcıya bu deneyin dikkate değer olduğunu söylüyor.
Apache-2.0
Açık kaynak
110
Beceri
141
Tasarım Sistemi
16 + BYOK
CLI
SSS
Open Design, Anthropic'in Claude Design'ının açık kaynak alternatifi. pnpm tools-dev ile yerelde çalışır, Vercel'e deploy olur ve tasarım motoru olarak zaten sahip olduğun coding-agent CLI'ı (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 daha) kullanır. Apache-2.0 lisanslı.
Claude Design kapalı kaynak, ücretli (Pro/Max/Team), sadece bulut ve Anthropic'in modeline ile skill'lerine kilitli. Open Design açık kaynak, BYOK, yerel öncelikli ve modelleri 16 CLI adapter veya OpenAI / Azure / Google uyumlu herhangi bir endpoint üzerinden serbestçe değiştirmene izin veriyor.
Self-hosting, model esnekliği veya özel skill'ler gerekiyorsa, evet. Kapalı loop (agent tespit et → skill + design system seç → chat → <artifact> ayrıştır → önizle → kaydet) uçtan uca çalışıyor. v0.4.x Critique Theater (yayın öncesi Design Jury skoru), Tweaks mode (element picker + chat ekleri), Manual edit mode ve Composio connector'larından çeken live artifact'leri ekledi.
Hayır. Open Design PATH'inde zaten olan herhangi bir coding-agent CLI'ı veya BYOK proxy üzerinden herhangi bir OpenAI uyumlu API anahtarını kullanır. Hangi sağlayıcıyı tercih edersen onun anahtarını getir.
Kutudan çıkar çıkmaz 16: 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 ve Pi. Daemon başlangıcında PATH'de otomatik tespit edilir.
Claude Design'dan dışa aktardığın ZIP'i hoş geldin diyaloğuna bırak. POST /api/import/claude-design onu gerçek bir .od/projects/<id>/ klasörüne çıkarır, giriş dosyasını bir sekme olarak açar ve yerel agent'ın için bir continue-where-Anthropic-left-off prompt'u hazırlar.
Evet. Web katmanı Next.js 16 + React 18 + TypeScript, Vercel'e deploy olur. Yerel daemon laptop'ında kalır. Topology B (Vercel + tunnel) tamamen uzak kurulumlar için yol haritasında.
9 bölümlü şemayı (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns) izleyen bir DESIGN.md dosyasını design-systems/<your-brand>/ altına bırak. Daemon'u yeniden başlat, picker'da çıkar.
Apache-2.0. Pakette gelen skills/guizang-ppt/ ve skills/html-ppt/, atıf korunarak orijinal MIT lisanslarını sürdürüyor. Ücretli katman yok. Kullanım limiti yok. Tek maliyet, seçtiğin LLM sağlayıcısının senden aldığı.
Tur 1 soru formu, model resme başlamadan önce brief'i kilitler. Brand spec olmadığında 5 yönlü picker deterministik palet sağlar. 5 boyutlu öz-eleştiri çıkıştan önce skor verir. Her skill, pre-flight side-file injection ile dayatılan bir P0/P1/P2 checklist ile gelir. Agresif mor gradient'ler, jenerik emoji ikonları ve display olarak Inter, prompt stack'inde açıkça yasaklı.
Evet. POST /api/proxy/stream SSE chunk'larını OpenAI uyumlu, Azure uyumlu veya Google uyumlu herhangi bir endpoint'e iletir. Bir baseUrl, apiKey ve model yapıştır — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, kendi self-host vLLM'in, Anthropic-via-OpenAI shim, hepsi çalışır. Loopback ve özel ağlara karşı SSRF korumalı.
Settings → Execution'da bir Connection test düğmesi var (v0.5.0, PR #507). baseUrl + apiKey + model'i yapıştır, Test'e bas — Open Design sağlayıcıya minimal bir handshake atar ve yanıtı veya birebir hata frame'ini yüzeye çıkarır. Anthropic, OpenAI uyumlu, Azure ve Google endpoint'leriyle çalışır. Anahtar yanlışsa, model adı yanlış yazılmışsa veya gateway seni durduruyorsa, chat-sonra-hatayı-takip-et turundan kurtarır.
Sadece Anthropic modelini seçersen (Claude Code veya Anthropic anahtarıyla BYOK proxy üzerinden). Open Design'ın kendisi her şeyi .od/app.sqlite'taki yerel SQLite'da ve .od/projects/ altındaki proje bazlı dosyalarda tutar. Open Design sunucularına hiçbir şey yüklenmez — Open Design sunucuları diye bir şey yok zaten.
Evet. `od mcp` çalıştır ve Open Design bir stdio MCP server açar. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — MCP konuşan ne varsa — proje dosyalarını okuyabilir, search çalıştırabilir ve metadata inceleyebilir. Arayüz uçta read-only: dosya okuma, search, metadata. Yazma yüzeyi yok, dış arama yok. v0.4.0'da yayına alındı.
Her artifact'i yayına almadan önce skor veren 5 panelistlik bir Design Jury — accessibility, brand fit, craft, content, structure. v0.4.0 Phase 4 itibarıyla persistence + transcript + orchestrator uçtan uca. Yapılandırılmış eşiğin altında agent revize edip yeniden skor verir; üstündeyse artifact yayınlanır.
Live artifact'ler önizleme paneline canlı veriyi bir Composio connector kataloğu üzerinden çeker — GitHub, Linear, Notion, Gmail ve daha fazlası. Pakette gelen orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion skill'leri ve social-media-dashboard uçtan uca bağlantıyı gösteriyor. v0.4.0'da yayına alındı (PR #381).
Yayına al
Repo'yu clone'la. Üç komut çalıştır. Bir prompt yaz. Soru formunun gelişini izle, doldur, todo kartının akışını izle, artifact'in render olduğunu izle.