open-design/docs/i18n/README.tr.md

OpenDesign: ilk iş birliğine dayalı yapay zekâ tasarım ajanı çalışma alanı

✨ OpenDesign Go ile GitHub’da 100K yıldızı kutluyoruz — Go kredileri iki katına çıktı: İlk ay 8 ABD doları karşılığında uygun Design Plan modelleri için aylık 120 ABD dolarına kadar kredi. GPT-6 Luna, DeepSeek V4.1 Flash, GLM-5.3 Flash-X ve MiMo V2.6 Flash dahil 10’dan fazla modelde kullanın. Tüm bireysel planlar Codex, Claude Code, DSH, OpenCode ve diğer araçlar için API erişimi içerir.

Web Sitesi · İndir · OpenDesign Cloud · Discord · @OpenDesignHQ'yu takip et

English · Español · Português · Deutsch · Français · 简体中文 · 繁體中文 · 한국어 · 日本語 · العربية · Русский · Українська · Türkçe · ภาษาไทย

---

OpenDesign nedir

OpenDesign, ilk iş birliğine dayalı yapay zekâ tasarım ajanı çalışma alanıdır. Bir proje özetiyle başlayın; alıştığınız kodlama ajanını veya OpenDesign Cloud'u kullanarak tasarım sisteminize uygun bir prototip oluşturun. Ekibinizle paylaşın, geri bildirim toplayın ve ajanınızın aynı projede çalışmayı geliştirmesine izin verin.

Bu iş akışı açık ve genişletilebilir. OpenDesign, Apache 2.0 lisansıyla sunulur; ekipler becerileri, tasarım şablonlarını, tasarım sistemlerini ve eklentileri inceleyip kendi süreçlerine uyarlayabilir.

---

Ürün turu

Temel sayfalar

Home — Bir proje özeti veya örnekle başlayın.	All projects — Tasarım sistemlerinize, medyaya ve prototiplere geri dönün.
Design Systems — Marka varlıklarını inceleyin ve bir ajanla geliştirin.	Plugins — Becerileri bulun ve Try it ile başlatın.

Studio — tek projede oluşturun ve geliştirin

Prototype — Ajanınızla etkileşimli web deneyimleri oluşturup geliştirin ve canlı önizleyin.	Slides — Sunumlar oluşturun, slaytları ve konuşmacı notlarını inceleyip dışa aktarın.
Image — Sohbetten görsel varlıklar üretin, sonucu inceleyip indirin veya açın.	HyperFrames — Ajanınızla hareketli grafikler oluşturun ve MP4 olarak dışa aktarın. Videoyu izleyin.

---

Platform Uyumluluğu

OpenDesign, ana akım kodlama ajanlarının yerel olarak tükettiği beceriler, bir CLI ve bir MCP sunucusu olarak sunulur. OD kurulduktan sonra, tek bir od mcp install <agent> komutu MCP sunucusunu o ajanın yapılandırmasına bağlar ve aynı araçları herhangi bir ajanın içinden çağırırsınız.

Kodlama ajanı / platform	Durum	Tek satırlık MCP sunucusu kurulumu
Claude Code	✅ Destekleniyor	od mcp install claude
Codex CLI	✅ Destekleniyor	od mcp install codex
DeepSeek Reasonix	✅ Destekleniyor	od mcp install reasonix
Raven	✅ Destekleniyor	od mcp install raven
Cursor	✅ Destekleniyor	od mcp install cursor
VS Code + GitHub Copilot	✅ Destekleniyor	od mcp install copilot
GitHub Copilot CLI	✅ Destekleniyor	od mcp install copilot
OpenCode	✅ Destekleniyor	od mcp install opencode
OpenClaw	✅ Destekleniyor	od mcp install openclaw
Antigravity	✅ Destekleniyor	od mcp install antigravity
Cline	✅ Destekleniyor	od mcp install cline
Trae	✅ Destekleniyor	od mcp install trae
Kimi CLI	✅ Destekleniyor	od mcp install kimi
Kiro	✅ Destekleniyor	od mcp install kiro
Pi Agent	✅ Destekleniyor	od mcp install pi
Mistral Vibe CLI	✅ Destekleniyor	od mcp install vibe
Hermes Agent	✅ Destekleniyor	od mcp install hermes

Kuru çalıştırma önizlemesi için od mcp install <agent> --print · kaldırmak için --uninstall · tam liste için od mcp install --help.

Kurulu CLI yok mu? POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream adresindeki BYOK proxy size aynı döngüyü verir (süreç başlatma yok) — baseUrl + apiKey + model yapıştırın; OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM veya herhangi bir OpenAI uyumlu uç nokta desteğiyle. Hedef bazlı SSRF koruması, daemon kenarında dahili IP'leri / link-local / CGNAT adreslerini engeller.

Runtime tanımları apps/daemon/src/runtimes/defs/ altında yer alır ve runtimes/registry.ts içinde kaydedilir. Yalnızca yeni bir wire format için yeni parser gerekir — bkz. docs/agent-adapters.md.

---

Demo

Dört temel ürün kategorisi, tümü dizüstü bilgisayarınızda çalışan bir kodlama ajanı tarafından işlenir. Gerçek örneği görmek için bir küçük resme tıklayın.

1 · Prototipler — web · masaüstü · mobil

Varsayılan çıktı yüzeyi. DESIGN.md dosyanızı okuyan ve yalıtılmış bir iframe içinde işlenen tek sayfalık HTML artifact'leri.

Web prototip — kaydırma çubukları, KPI'lar ve grafiklerle editöryel bir pano. Doğrudan design-templates/dating-web/ dizininden işlenmiştir.

Mobil uygulama prototipi — XP şeritleri ve görev detayı olan üç ekranlı oyunlaştırılmış bir akış. React/Next/Vue'ya dönüştürmek için doğrudan Cursor / Codex / Claude Code'a devredin.

2 · Canlı artifact'ler ve panolar

Canlı panolar, karar odaları, KPI duvarları — verileri bir ayar paneli aracılığıyla çeken ve yerinde düzenlenebilir kalan tek sayfalık artifact'ler.

Canlı pano — ayar paneli üzerinde ince ayar yapmaya değer parametreleri ortaya çıkaran, düzenlenebilir bir KPI duvarı. Ajan bir manifest yayar ve iframe yeniden yükleme olmadan yeniden işlenir.	Karar odası — ürün / araştırma / operasyon toplantıları için çok kaynaklı bir brifing artifact'i.
GitHub tarzı pano — depo metrikleri canlı bir artifact olarak sunulur.	Flow canlı pano şablonu — etkin DESIGN.md ile markalanmış, alana özgü bir KPI şablonu.

3 · Sunum desteleri — dergi desteleri, haftalık güncellemeler, tanıtımlar

Deste modu (guizang-ppt) — dergi düzenleri, WebGL hero, P0/P1/P2 kontrol listeleri. Orijinal lisansı korunarak op7418/guizang-ppt-skill deposundan birebir paketlenmiştir.

Swiss International tarzı deste — ızgaraya sabitlenmiş, monokrom vurgular. design-templates/html-ppt-*/ altındaki 15 deste şablonundan ve 36 temadan biri.

Her deste HTML (tek dosya, gömülü varlıklar), PDF (tarayıcı yazdırma, deste duyarlı), PPTX (ajan güdümlü beceri), ZIP (arşiv) veya Markdown olarak dışa aktarılır.

4 · Görseller — gpt-image-2, ImageRouter, özel API

İllüstrasyonlu şehir yemek haritası Elle çizilmiş editöryel seyahat afişi

Sinematik asansör sahnesi Tek kare editöryel durağan görsel

Cyberpunk portresi Profil avatarı — neon yüz metni

3D taş merdiven Yontma taş infografiği

Göz alıcı portre Editöryel stüdyo çekimi

93 çoğaltmaya hazır komut prompt-templates/ içinde yer alır — önizleme küçük resimleri, tam komut metni, hedef model, en boy oranı ve kaynak atıfı. Tek tıkla composer'a bir özet bırakır.

5 · Video ve HyperFrames — ajan-yerel hareket grafikleri

HyperFrames, HeyGen'in açık kaynaklı, ajan-yerel video çerçevesidir ve OpenDesign'da birinci sınıf bir vatandaş olarak entegre edilmiştir. Ajan HTML + CSS + GSAP yazar ve HyperFrames bunu başsız Chrome + FFmpeg aracılığıyla deterministik bir MP4'e işler. Sinematik t2v / i2v için Seedance 2.0, yönlendirilen model varyantları için Veo 3 / Sora 2 / Kling 2 ve ses katmanı için Suno v5 / Lyria 2 ile eşleştirin.

30sn SaaS ürün tanıtımı · 16:9 · UI 3D açılımları	TikTok karaoke konuşan kafa · 9:16 · TTS + kelime senkronlu altyazılar	30sn marka tanıtım filmi · 16:9 · sese tepkili kinetik tipografi	Çubuk grafik yarışı · 16:9 · NYT tarzı veri infografiği
Uçuş haritası · 16:9 · Apple tarzı rota açılımı	4sn sinematik logo kapanışı · 16:9 · parça parça birleşme + bloom	$0 → $10K para sayacı · 9:16 · Apple tarzı heyecan	Web sitesinden videoya · 16:9 · siteyi 3 görünüm penceresinde yakalar

11 HyperFrames şablonu + 39 Seedance komutu depoyla birlikte gelir. Katalog küçük resimleri © HeyGen; çerçeve Apache-2.0'dır. OD'ye özgü işleme iş akışı (kompozisyon önbelleği, sandbox-exec geçici çözümü, çip olarak MP4) design-templates/hyperframes/ içinde ayrıntılı olarak açıklanmıştır.

---

Neden OpenDesign

• 🤖 Ajan-yerel, modelden bağımsız. Bir ajan sunmuyoruz. PATH'inizde zaten bulunan claude / codex / cursor-agent / copilot / hermes / kimi tasarım motorudur. Tek tıkla değiştirin.
• 🧠 Varsayılan olarak marka düzeyinde. Her render etkin paketin DESIGN.md dosyasını temel marka sözleşmesi olarak okur. Depoda 151 tasarım sistemi paketi bulunur; eski paketler yalnızca DESIGN.md içerebilir, yenileri manifest.json, tokens.css, bileşenler, varlıklar ve provenance ekleyebilir. Bir klasör bırakın, seçici onu bulur.
• 🖥️ Yerel öncelikli, her katmanda BYOK. Yerel masaüstü uygulamaları yerel öncelikli kalır. Ürün analitiği ve oturum tekrarı onay gerektirir; hassas verilerden arındırılmış güvenlik ve güvenilirlik telemetrisi her zaman açıktır. Daemon veri yollarını açıklamadan önce kökteki AGENTS.md dosyasında Daemon data directory contract bölümünü MUTLAKA okuyun.
• 🌍 Dört düzlemde birleştirilebilir. Eklentiler çalıştırılabilir iş akışları taşır · işlevsel beceriler ajan davranışını taşır · tasarım şablonları render planlarını taşır · tasarım sistemleri markayı taşır. Dördü de herkesin yazıp yayınlayabileceği taşınabilir, sürümlenebilir dizinler kullanır.
• 🔁 Mevcut bir kod tabanını yenileyin. Ajana bir git deposu + DESIGN.md verin, gerçek bileşenlerinizi marka spesifikasyonuna göre yeniden düzenler.
• 🔒 İlkesel gizlilik. Projeler yerel olarak veya kendi dağıtımınızda çalışabilir. Bulut modellerine ve OpenDesign Cloud’a yapılan istekler ilgili hizmetlere gönderilir. BYOK proxy SSRF koruması içerir.

---

Hızlı başlangıç

🖥️ Masaüstü uygulamasını indirin (önerilir — sıfır yapılandırma)

OpenDesign'ı kullanmanın en hızlı yolu. Node yok, pnpm yok, klonlama yok.

• macOS (Apple Silicon · Intel x64) → open-design.ai veya GitHub Releases
• Windows (x64) → open-design.ai veya GitHub Releases
• Linux (AppImage, isteğe bağlı hat) → GitHub Releases

Kurulumdan sonra: uygulama PATH'inizdeki her kodlama ajanı CLI'sini otomatik algılar, 100+ işlevsel beceriyi, ayrı render şablonu kataloğunu ve 151 tasarım sistemi paketini yükler ve giriş görünümünde bir özet yazmanıza olanak tanır.

🤖 Kodlama ajanınıza kurun (UI yok)

OpenDesign'ı GUI'yi hiç açmadan kullanabilirsiniz — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi ve daha fazlasının içinde bir beceri, eklenti veya MCP sunucusu olarak çağırın.

# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | reasonix | raven | cursor | copilot | openclaw | antigravity
#         | pi | vibe | hermes | cline | kimi | kiro | trae | opencode

Ardından, ajanın içinde:

> Use open-design to generate a landing page with the Linear design system

Filesystem destekli yerel CLI çalıştırmasında ajan seçilen işlevsel beceri veya tasarım şablonunu DESIGN.md ile birleştirir, kanonik proje dosyalarını yazar ve OpenDesign bunları önizler. Dosya araçları olmayan BYOK/API çalıştırması bunun yerine tek bir eksiksiz <artifact> bloğu döndürür.

🐳 Docker ile çalıştırın

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
cp .env.example .env
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
docker compose up -d
# open http://localhost:7456

🚀 Sealos üzerinde dağıtın

Sealos App Store şablonu, yayımlanmış OpenDesign Docker imajını kalıcı çalışma alanı depolaması ve herkese açık proxy üzerinde Basic Auth ile çalıştırır. Özel herkese açık veya paylaşılan Docker dağıtımları için deploy/README.md içindeki ters proxy ve OPEN_DESIGN_ALLOWED_ORIGINS rehberini izleyin.

🧑‍💻 Kaynaktan çalıştırın

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

tools-dev tarafından yazdırılan URL'yi açın; açık port bayrakları verilmezse geliştirme portları dinamik atanır.

Node ~24, pnpm 10.33.x. Windows kullanıcıları, bkz. docs/windows-troubleshooting.md. Tam hızlı başlangıç, ortam değişkenleri ve paketlenmiş derleme akışı → QUICKSTART.md.

Eksiksiz bir iş akışı — özetten artifact'e

özet → eklenti → yön → tasarım sistemi → artifact → devir → bellek

1. Bir PM özet gönderir. Eklenti seçici şunları sunar: açılış sayfası · tanıtım destesi · pano · sosyal gönderi · PM spesifikasyonu · OKR puan kartı…
2. Bir tasarımcı (veya ajan) yönü kilitler. Marka yok mu? 5 seçilmiş yönden birini seçin. Markanız var mı? Bir ekran görüntüsü / URL bırakın → ajan GitHub'a bağlanır ve yeniden kullanılabilir bir DESIGN.md dosyasına kodlar.
3. Ajan ilk teslimatı oluşturur. Filesystem destekli CLI çalıştırmaları kanonik dosyaları yazar; dosya araçsız BYOK/API çalıştırmaları eksiksiz bir <artifact> bloğu döndürür.
4. Mühendisliğe devredin. Artifact gerçek HTML/CSS'tir — kod olarak inşa etmeye devam etmek için Cursor, Codex veya Claude Code'a bırakın. Veya doğrudan pazarlamaya PPTX / PDF / MP4 olarak dışa aktarın.
5. OpenDesign kullandıkça akıllanır. Ekran görüntüleriniz, yazı tipleriniz, paletleriniz ve onaylanmış artifact'leriniz bir sonraki oturum için varsayılan olarak birikir. Daha az yeniden çalışma, daha az sapma.

---

OpenDesign'ı kodlama ajanınızdan kullanın

OpenDesign bir stdio MCP sunucusu ve ajan başına kurulum betikleri sunar. Başka bir depodaki herhangi bir MCP uyumlu ajan, yerel OpenDesign projelerinizdeki dosyaları doğrudan okuyabilir — token CSS'i, JSX bileşenleri, giriş HTML'i — ada göre sorgulanabilir yapılandırılmış bir API olarak. Ajan her zaman bayatlamış bir dışa aktarımı değil, canlı dosyayı görür.

# One-line install (16+ CLIs supported):
od mcp install <agent>

# Then the agent can:
od project list --json
od files list <project-id> --json
od files read <project-id> <relative-path>
od plugin list --json
od skills list --json

Neden MCP? Her yinelemede bir zip dosyasını dışa aktarıp yeniden eklemek akışı bozar. MCP, tasarım kaynağını doğrudan ortaya çıkarır — ajan her zaman canlı dosyayı görür.

Sıfırdan başlayan bir ajan için, yükleyici ~/.config/<agent>/open-design.json dosyasını (veya platform eşdeğerini) artı kopyala-yapıştır bir MCP parçacığını yerleştirir. Cursor tek tıklık bir deeplink alır; Claude Code bir claude mcp add-json tek satırlık komut alır; diğer her ajan, yapılandırmasının beklediği şemada JSON alır. Ajan başına tam akış → masaüstü uygulamasında Settings → MCP server veya docs/agent-adapters.md.

Güvenlik modeli. Varsayılan olarak salt okunur, daemon 127.0.0.1 adresine bağlanır ve SSRF, proxy kenarında engellenir. LAN erişimi açık bir OD_BIND_HOST artı OD_ALLOWED_ORIGINS gerektirir. Bağlayıcı kimlik bilgileri ve canlı artifact önizleme rotaları ne olursa olsun yalnızca loopback'te kalır.

---

Beceriler ve tasarım şablonları

100+ işlevsel beceri skills/ altında yeniden kullanılabilir ajan davranışı, referans veya araç sağlar. Render edilebilir başlangıçlar ayrı design-templates/ dizinindedir ve işlevsel beceri kaydı yerine şablon kataloğunu doldurur.

İki mod tasarım şablonu kataloğuna zemin oluşturur: prototype ve deck; diğer şablonlar image, video, audio ve utility yüzeylerini kapsar.

Tasarım şablonu	Mod	Senaryo	Ne ürettiği
web-prototype	prototype	design	Varsayılan açılış sayfası / hero
saas-landing	prototype	marketing	Hero / özellikler / fiyatlandırma / CTA
dashboard	prototype	operation	Yönetim / analitik (kenar çubuklu)
mobile-app	prototype	design	iPhone 15 Pro / Pixel çerçeveli uygulama
mobile-onboarding	prototype	design	Açılış · değer önerisi · oturum açma akışı
social-carousel	prototype	marketing	3 kartlı 1080×1080 karusel
email-marketing	prototype	marketing	Tablo yedeği güvenli marka e-postası
magazine-poster	prototype	marketing	Tek sayfalık dergi düzeni
motion-frames	prototype	marketing	Döngüsel CSS hareket hero'su
sprite-animation	prototype	marketing	8-bit piksel animasyonlu açıklayıcı
pm-spec	prototype	product	PM spesifikasyon belgesi (TOC + karar günlüğü ile)
team-okrs	prototype	product	OKR puan kartı
eng-runbook	prototype	engineering	Olay müdahale kılavuzu
finance-report	prototype	finance	Yönetici finans özeti
hr-onboarding	prototype	hr	Rol başlatma planı
guizang-ppt	deck	marketing	Dergi tarzı web PPT (deste varsayılanı)
html-ppt-*	deck	marketing	15 deste şablonu × 36 tema (ana şablon design-templates/html-ppt/ içinde)
hyperframes	video	marketing	HTML → MP4 hareket grafikleri (HeyGen OSS çerçevesi)
critique	utility	design	Beş boyutlu öz-eleştiri puan tablosu
tweaks	utility	design	AI tarafından yayılan ayar paneli manifesti

Protokol ve dizin ayrımı → docs/skills-protocol.md. Uç noktalar: işlevsel beceriler için GET /api/skills, şablonlar için GET /api/design-templates.

---

Tasarım Sistemleri

DESIGN.md merkezli 151 tasarım sistemi paketi depoyla birlikte gelir. Eski paketler yalnızca Markdown sözleşmesini içerebilir; yenileri manifest.json, derlenmiş tokens.css, bileşen fixture'ları, varlıklar ve kaynak kanıtı da taşıyabilir. Katalog upstream türevlerini ve projeye ait ekleri birleştirir; design-systems/README.md paket biçimini ve kaynakları belgeler.

Tam katalog (genişletmek için tıklayın)

AI & LLM — claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

Geliştirici Araçları — cursor · vercel · linear-app · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · sanity · mintlify · composio · opencode-ai · voltagent

Üretkenlik — notion · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

Fintech — stripe · coinbase · binance · kraken · mastercard · revolut · wise

E-ticaret — shopify · airbnb · uber · nike · starbucks · pinterest

Medya — spotify · playstation · wired · theverge · meta

Otomotiv — tesla · bmw · ferrari · lamborghini · bugatti · renault

Diğer — apple · ibm · nvidia · vodafone · resend · spacex

Başlangıç Setleri — default (Neutral Modern) · warm-editorial

Kütüphaneyi scripts/sync-design-systems.ts ile yeniden içe aktarın. Kendi markanızı ekleyin → design-systems/<brand>/ içine bir DESIGN.md bırakın. Tam kılavuz → design-systems/README.md.

---

Eklentiler

277 resmî eklenti ve 183 remixlenebilir örnek plugins/_official/ içindedir. Her giriş open-design.json ve türüne özgü payload ile tanımlanır: workflow için SKILL.md, medya şablonu için template.json, tasarım sistemi için DESIGN.md.

Kategori	Sayı	İçerik
scenarios/	13	Eksiksiz tasarım senaryoları — od-default, od-design-refine, od-figma-migration, od-code-migration, od-react-export, od-nextjs-export, od-vue-export, od-media-generation, od-new-generation, od-tune-collab, od-plugin-authoring, od-share-to-community, od-web-effect-extractor
image-templates/	45	Tek seferlik görsel komutları — editöryel, sinematik, ürün, portre
video-templates/	63	HyperFrames / Seedance / Veo hareket şablonları
design-systems/	143	Eklenti olarak sarmalanmış marka DESIGN.md dosyaları
atoms/	13	Yeniden kullanılabilir UI parçaları (düğmeler, hero'lar, KPI kartları)
examples/	183	Yeniden harmanlanabilir referans çıktıları

Ayrıca topluluk eklentileri için plugins/community/ ve yayınlama akışı için plugins/registry/.

Eklentiler ne yapabilir

• 🤖 Herhangi bir kodlama ajanında çalışın — Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi… ajanın zaten bildiği aynı beceri protokolü aracılığıyla.
• 🔁 Figma / Pencil iş akışlarını taşıyın → React, Next.js veya Vue kaynağı. Bkz. od-figma-migration.
• 🛠️ Mevcut bir kod tabanını bir marka spesifikasyonuna yenileyin — bir eklentiyi bir git deposu + DESIGN.md dosyasına yönlendirin, bir PR alın. Bkz. od-code-migration.
• 💾 Özel iş akışlarını kalıcı kılın — ekibinizin yeniden kullanılabilir şablonları, sunulanların yanında durur.

Eklentileri kullanma

Eklentiler web UI ve od CLI arasında tam eşitliktedir — aynı /api/plugins uç noktaları, hangisi uygunsa onu seçin.

Masaüstü / web uygulamasında: pazar yerine göz atmak için Plugin sayfasını açın ve Install'a tıklayın; bir projenin Studio'su içinde, eklentiler tıklayarak uyguladığınız composer çipleri olarak görünür (bildirdikleri girdilerle birlikte).

Komut satırında (UI olmadan çalışır — bu, harici ajanların kullandığı yoldur):

od plugin list                       # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page"      # search by keyword
od plugin info od-default            # inspect a plugin's metadata, inputs, capabilities
od plugin install od-default        # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default         # upgrade
od plugin uninstall od-default       # uninstall

Her komut --json destekler, böylece onu jq / xargs aracılığıyla otomasyona aktarabilirsiniz.

Bir eklenti oluşturma

Bir OpenDesign eklentisi open-design.json ve türünün payload'unu gerektirir. Beceriler ve senaryolar ayrıca SKILL.md içerir; diğer türler kendi payload'unu kullanır:

my-plugin/
├── open-design.json    ← required: marketplace metadata + inputs + pipeline + capabilities
├── SKILL.md            ← required for agent-skill/scenario entries; omit for other plugin types
├── README.md           ← optional: usage, install, registry links
├── preview/            ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/           ← optional: concrete use cases

Temel alanlar specVersion, name, version, yalnızca Agent Skill sunulduğunda isteğe bağlı compat.agentSkills[].path, ayrıca od.kind, od.taskKind (new-generation / figma-migration / code-migration / tune-collab), od.mode, od.capabilities[] ve od.inputs[] alanlarıdır.

Yerel olarak iskeletle + doğrula:

od plugin scaffold --id my-plugin --title "My Plugin"   # generate the skeleton
od plugin validate ./my-plugin                          # check manifest / file layout
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck

Tam alan kümesi ve çalışma zamanı sözleşmesi → plugins/spec/SPEC.md; bir kodlama ajanıyla eklenti geliştirme → plugins/spec/AGENT-DEVELOPMENT.md; kopyala-yapıştır minimal şablonlar → plugins/spec/examples/.

Bir eklentiye katkıda bulunma

1. Eklenti klasörünü plugins/community/ içine (üçüncü taraf eklentiler) veya — onu OpenDesign ile birlikte paketlenmiş olarak sunmak için — plugins/_official/ içindeki eşleşen katmana bırakın.
2. Doğrulamayı geçin: od plugin validate, pnpm guard, pnpm --filter @open-design/plugin-runtime typecheck.
3. PR'ı plugins/spec/CONTRIBUTING.md içindeki şablonu kullanarak doldurun (kimlik, sürüm, hat, mod, yetenekler, tetikleme örnekleri; görsel eklentiler için bir ekran görüntüsü / önizleme ekleyin).
4. Harici bir kayda yayınlamak için (skills.sh / ClawHub / bağımsız GitHub) → plugins/spec/PUBLISHING-REGISTRIES.md.

Eklenti kayıt uç noktası: GET /api/plugins. Dizin genel bakışı → plugins/README.md (简体中文).

---

Mimari

┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
│  chat · file workspace · iframe preview · settings · import · MCP     │
└──────────────┬─────────────────────────────────────┬─────────────────┘
               │ /api/*                              │
               ▼                                     ▼
   ┌─────────────────────────────────┐   /api/proxy/{provider}/stream (SSE)
   │  local daemon (Express+SQLite)  │   ─→ any OpenAI-compatible BYOK,
   │                                  │       SSRF-guarded at the edge
   │  /api/skills    /api/design-templates    /api/plugins    │
   │  /api/design-systems            │
   │  /api/chat (SSE)   /api/proxy/* │
   │  /api/projects/:id/files/...    │
   │  /api/artifacts/{save,lint}     │
   │  /api/import/claude-design      │
   │  MCP stdio server                │
   └─────────┬───────────────────────┘
             │ spawn(cli, [...], { cwd: managed project cwd })
             ▼
   ┌──────────────────────────────────────────────────────────────────┐
   │  Base registry: 26 runtime definitions (including byok-opencode),       │
   │  backed by 25 distinct local CLI executables because byok-opencode      │
   │  shares the OpenCode executable.                                        │
   │  Composes a functional skill or design template + DESIGN.md; writes files │
   └──────────────────────────────────────────────────────────────────┘

Katman	Yığın
Frontend	Next.js 16 App Router + React 18 + TypeScript
Daemon	Node 24 · Express · SSE streaming · better-sqlite3
Depolama	Daemon depolama yollarını değiştirmeden veya belgelemeden önce kökteki AGENTS.md dosyasında Daemon data directory contract bölümünü MUTLAKA okuyun. Bu README onu TEKRAR ETMEMELİDİR.
Önizleme	Filesystem çalıştırmaları kanonik dosyaları render eder; BYOK/API eksiksiz bir <artifact> bloğunu yalıtılmış srcdoc iframe'e ayrıştırır
Dışa aktarma	HTML (gömülü) · PDF (tarayıcı yazdırma) · PPTX (ajan güdümlü) · ZIP · Markdown · MP4 (HyperFrames)
Masaüstü	Electron shell + yalıtılmış renderer + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN)
Yaşam döngüsü	Tek giriş noktası: pnpm tools-dev (start / stop / run / status / logs / inspect / check)

Tam mimari → docs/architecture.md. Beceri protokolü → docs/skills-protocol.md. Ajan adaptör sözleşmesi → docs/agent-adapters.md.

---

Yol haritası

• Daemon + 25 ayrı CLI yürütülebilir dosyası üzerinde 26 runtime tanımı + beceri/şablon kayıtları + tasarım sistemi kataloğu
• Web uygulaması + sohbet + soru formu + 5 yönlü seçici + yapılacaklar ilerlemesi + yalıtılmış önizleme
• 100+ işlevsel beceri · ayrı render şablonu kataloğu · 151 tasarım sistemi paketi · 5 görsel yön · 5 cihaz çerçevesi
• SQLite destekli projeler · konuşmalar · mesajlar · sekmeler · şablonlar
• Çok sağlayıcılı BYOK proxy (/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream) + SSRF koruması
• Claude Design ZIP içe aktarma (/api/import/claude-design)
• Sidecar protokolü + Electron masaüstü + IPC otomasyonu
• Artifact lint API'si + 5 boyutlu öz-eleştiri ön-yayın kapısı
• 0.8.0 — eklenti pazar yeri altyapısı (261 resmî eklenti, manifest spesifikasyonu, ajan başına kurulum betikleri)
• 0.9.0 — OpenDesign Cloud (uygulamaya gömülü resmî Model Router: sıfır yapılandırma, tek tıkla oturum açma)
• Paketlenmiş Electron derlemeleri — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (isteğe bağlı hat)
• Yorum modu cerrahi düzenlemeler — kısmen sunuldu; güvenilir hedefli yamalama devam ediyor
• AI tarafından yayılan ayar paneli UX'i — henüz uygulanmadı
• DESIGN.md ile bir projeyi iskeletlemek için npx od init
• Plugin SDK + od plugin {add,list,remove,test,publish} CLI
• Figma / Pencil → React / Next / Vue taşıma eklentileri (alpha)
• Mevcut kod tabanını yenileme eklentisi (bir git deposu + DESIGN.md dosyasına yönlendirin)

Aşamalı teslimat → docs/roadmap.md.

---

Topluluk

Her kanalın arkasında gerçek insanlar var.

• 💬 Discord — günlük sohbet, eklenti paylaşımı, sorular → discord.gg/mHAjSMV6gz
• 🐦 X / Twitter — sürüm notları, kilometre taşları, perde arkası → @OpenDesignHQ
• 🗣️ GitHub Discussions — derinlemesine soru-cevap, RFC'ler, "çalışmanı göster" → Discussions
• 🐛 GitHub Issues — hata raporları, özellik istekleri → Issues

good-first-issue ve help-wanted etiketleri başlamanın en kolay yoludur.

---

Katkıda bulunma

OpenDesign, katkıda bulunanlar — tasarımcılar, mühendisler, komut yazarları — gelmeye devam ettiği için hareket etmeye devam ediyor. En çok kullanılan becerilerin, tasarım sistemlerinin ve eklentilerin çoğu çekirdek ekip dışındaki kişiler tarafından yazılmıştır.

🎯 Nereden başlamalı (maksimum kaldıraç, minimum değişiklik)

Ne sunmak istiyorsun…	Nasıl	Nerede
Yeni bir beceri	SKILL.md + assets/ + references/ içeren bir klasör bırakın	skills/ · spesifikasyon docs/skills-protocol.md içinde
Yeni bir tasarım sistemi	Merkezinde DESIGN.md bulunan bir paket bırakın; gerektiğinde manifest.json, tokens.css, bileşenler, varlıklar veya provenance ekleyin	design-systems/<brand>/
Yeni bir eklenti	Bir kategori klasörü altına open-design.json + türe özgü payload bırakın	plugins/community/ · spesifikasyon plugins/spec/SPEC.md içinde · ajan geliştirme kılavuzu plugins/spec/AGENT-DEVELOPMENT.md içinde
Yeni bir kodlama ajanı CLI'si destekleyin	Runtime tanımı + registry girdisi; parser yalnızca yeni format için	apps/daemon/src/runtimes/defs/
Bir hatayı düzeltin veya UI'yi cilalayın	good-first-issue etiketine göz atın	Issues →
Belgeleri çevirin	README.<lang>.md dosyalarını güncelleyin	TRANSLATIONS.md

🤖 Bir ajan olarak katkıda bulunma

Bunu okuyan ajan sizseniz, en hızlı yol:

# 1. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web

# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number>   # create a branch and worktree

# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test

# 4. Open the PR
gh pr create --fill

Tam ajan dostu katkı akışı, kod stili ve PR çıtası → CONTRIBUTING.md (Deutsch · Français · 简体中文 · 日本語 · Português).

🏅 OpenDesign Fellow programı

Dünya çapında OpenDesign Fellow'ları alıyoruz — Fellow'lar ürünü çekirdek ekiple birlikte şekillendirir, kendi bölgelerinde OpenDesign'ı resmî olarak temsil eder ve topluluğu yerel olarak büyütür; fonlu destek ($1,000 / MR), ücretsiz LLM kredileri ve doğrudan inceleme hattıyla desteklenir. Ayrıntılar → MAINTAINERS.md ve Discord üzerindeki duyuru.

---

Bakımcılar

Yükün çoğunu onlar taşıyor — günlük bakım, inceleme ve topluluk desteği.

@Nagendhra-web Bakımcı

@Sid-Qin Bakımcı

Bakımcı kuralları, terfi kriterleri ve çıkış protokolü → MAINTAINERS.md (ayrıca Deutsch · Français · 简体中文 · 日本語 · Português).

Katkıda bulunanlar

Katılan herkese teşekkürler — kod, belge, geri bildirim, keskin bir issue, yeni bir beceri, yeni bir tasarım sistemi.

---

Depo etkinliği

Yukarıdaki SVG, lowlighter/metrics kullanılarak .github/workflows/metrics.yml tarafından günlük olarak yeniden oluşturulur.

---

Bize yıldız verin

Bu size otuz dakika kazandırdıysa, bir ★ verin. Yıldızlar kira ödemez — ama bir sonraki tasarımcıya, ajana ve katkıda bulunana bu deneyin dikkatlerine değer olduğunu söyler. Tek tıkla, üç saniyede, gerçek bir sinyal.

---

Referanslar ve köken

Proje	Rol
alchaincyf/huashu-design	Tasarım felsefesi pusulası — junior-tasarımcı iş akışı, marka-varlığı protokolü, anti-AI-slop kontrol listesi, beş boyutlu eleştiri.
op7418/guizang-ppt-skill	Dergi tarzı web PPT becerisi, design-templates/guizang-ppt/ altında birebir paketlenmiştir. Deste modu için varsayılan.
lewislulu/html-ppt-skill	HTML PPT Studio ailesi — 15 deste şablonu, 36 tema, 31 sayfa düzeni, animasyon çalışma zamanı, manyetik-kart sunucu modu.
OpenCoworkAI/open-codesign	ödünç aldığımız UX desenleri (akış-artifact döngüsü, yalıtılmış iframe, canlı ajan paneli).
multica-ai/multica	Daemon + adaptör mimarisi — PATH-tarama ajan algılama, tek ayrıcalıklı süreç olarak yerel daemon.
VoltAgent/awesome-design-md	İlk 9 bölümlük DESIGN.md şemasının ve upstream'den türetilen 70 sistemin tarihsel kaynağı; güncel paketler bu temeli genişletebilir.
bergside/awesome-design-skills	design-systems/ altına eklenen 57 tasarım becerisinin kaynağı.
heygen-com/hyperframes	HTML→MP4 hareket grafikleri çerçevesi, OpenDesign'da birinci sınıf hyperframes-html olarak entegre edilmiştir.
Claude Code skills	Birebir benimsediğimiz SKILL.md kuralı.

Ayrıntılı köken → docs/references.md.

Lisans

Apache-2.0. Paketlenmiş design-templates/guizang-ppt/ orijinal LICENSE dosyasını korur (MIT, @op7418). Paketlenmiş design-templates/html-ppt/ orijinal LICENSE dosyasını korur (MIT, @lewislulu).