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

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

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

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.

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.

` 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](https://docs.anthropic.com/en/docs/claude-code) | ✅ Destekleniyor | `od mcp install claude` | | [Codex CLI](https://github.com/openai/codex) | ✅ Destekleniyor | `od mcp install codex` | | [DeepSeek Reasonix](https://github.com/esengine/DeepSeek-Reasonix) | ✅ Destekleniyor | `od mcp install reasonix` | | [Raven](https://github.com/EverMind-AI/Raven) | ✅ Destekleniyor | `od mcp install raven` | | [Cursor](https://www.cursor.com/cli) | ✅ Destekleniyor | `od mcp install cursor` | | [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Destekleniyor | `od mcp install copilot` | | [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Destekleniyor | `od mcp install copilot` | | [OpenCode](https://opencode.ai/) | ✅ Destekleniyor | `od mcp install opencode` | | [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Destekleniyor | `od mcp install openclaw` | | [Antigravity](https://antigravity.google) | ✅ Destekleniyor | `od mcp install antigravity` | | [Cline](https://github.com/cline/cline) | ✅ Destekleniyor | `od mcp install cline` | | [Trae](https://www.trae.ai/) | ✅ Destekleniyor | `od mcp install trae` | | [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ Destekleniyor | `od mcp install kimi` | | [Kiro](https://kiro.dev) | ✅ Destekleniyor | `od mcp install kiro` | | [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Destekleniyor | `od mcp install pi` | | [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Destekleniyor | `od mcp install vibe` | | [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ Destekleniyor | `od mcp install hermes` | Kuru çalıştırma önizlemesi için `od mcp install --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/`](../../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`](../../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/`](../../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][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/`](../../design-templates/hyperframes/) içinde ayrıntılı olarak açıklanmıştır. [hyperframes]: https://github.com/heygen-com/hyperframes --- ## 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**](https://open-design.ai/) veya [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) veya [GitHub Releases](https://github.com/nexu-io/open-design/releases) - **Linux** (AppImage, isteğe bağlı hat) → [GitHub Releases](https://github.com/nexu-io/open-design/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. ```bash # One-line install into the agent you're using: od mcp install # = 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 `` bloğu döndürür. ### 🐳 Docker ile çalıştırın ```bash 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 [](https://sealos.io/products/app-store/open-design/) 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`](../../deploy/README.md#local-compose) içindeki ters proxy ve `OPEN_DESIGN_ALLOWED_ORIGINS` rehberini izleyin. ### 🧑‍💻 Kaynaktan çalıştırın ```bash 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`](../../docs/windows-troubleshooting.md). Tam hızlı başlangıç, ortam değişkenleri ve paketlenmiş derleme akışı → [`QUICKSTART.md`](../../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 `` 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. ```bash # One-line install (16+ CLIs supported): od mcp install # Then the agent can: od project list --json od files list --json od files read 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//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`](../../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/`](../../skills/) altında** yeniden kullanılabilir ajan davranışı, referans veya araç sağlar. Render edilebilir başlangıçlar ayrı [`design-templates/`](../../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`](../../design-templates/web-prototype/) | prototype | design | Varsayılan açılış sayfası / hero | | [`saas-landing`](../../design-templates/saas-landing/) | prototype | marketing | Hero / özellikler / fiyatlandırma / CTA | | [`dashboard`](../../design-templates/dashboard/) | prototype | operation | Yönetim / analitik (kenar çubuklu) | | [`mobile-app`](../../design-templates/mobile-app/) | prototype | design | iPhone 15 Pro / Pixel çerçeveli uygulama | | [`mobile-onboarding`](../../design-templates/mobile-onboarding/) | prototype | design | Açılış · değer önerisi · oturum açma akışı | | [`social-carousel`](../../design-templates/social-carousel/) | prototype | marketing | 3 kartlı 1080×1080 karusel | | [`email-marketing`](../../design-templates/email-marketing/) | prototype | marketing | Tablo yedeği güvenli marka e-postası | | [`magazine-poster`](../../design-templates/magazine-poster/) | prototype | marketing | Tek sayfalık dergi düzeni | | [`motion-frames`](../../design-templates/motion-frames/) | prototype | marketing | Döngüsel CSS hareket hero'su | | [`sprite-animation`](../../design-templates/sprite-animation/) | prototype | marketing | 8-bit piksel animasyonlu açıklayıcı | | [`pm-spec`](../../design-templates/pm-spec/) | prototype | product | PM spesifikasyon belgesi (TOC + karar günlüğü ile) | | [`team-okrs`](../../design-templates/team-okrs/) | prototype | product | OKR puan kartı | | [`eng-runbook`](../../design-templates/eng-runbook/) | prototype | engineering | Olay müdahale kılavuzu | | [`finance-report`](../../design-templates/finance-report/) | prototype | finance | Yönetici finans özeti | | [`hr-onboarding`](../../design-templates/hr-onboarding/) | prototype | hr | Rol başlatma planı | | [`guizang-ppt`](../../design-templates/guizang-ppt/) | deck | marketing | Dergi tarzı web PPT (deste varsayılanı) | | [`html-ppt-*`](../../design-templates/) | deck | marketing | 15 deste şablonu × 36 tema (ana şablon [`design-templates/html-ppt/`](../../design-templates/html-ppt/) içinde) | | [`hyperframes`](../../design-templates/hyperframes/) | video | marketing | HTML → MP4 hareket grafikleri (HeyGen OSS çerçevesi) | | [`critique`](../../design-templates/critique/) | utility | design | Beş boyutlu öz-eleştiri puan tablosu | | [`tweaks`](../../design-templates/tweaks/) | utility | design | AI tarafından yayılan ayar paneli manifesti | Protokol ve dizin ayrımı → [`docs/skills-protocol.md`](../../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`](../../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`](../../scripts/sync-design-systems.ts) ile yeniden içe aktarın. Kendi markanızı ekleyin → `design-systems//` içine bir `DESIGN.md` bırakın. Tam kılavuz → [`design-systems/README.md`](../../design-systems/README.md). [acd2]: https://github.com/VoltAgent/awesome-design-md --- ## Eklentiler **277 resmî eklenti ve 183 remixlenebilir örnek** [`plugins/_official/`](../../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/`](../../plugins/_official/scenarios/) | 13 | Eksiksiz tasarım senaryoları — [`od-default`](../../plugins/_official/scenarios/od-default/), [`od-design-refine`](../../plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/), [`od-react-export`](../../plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](../../plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](../../plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](../../plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](../../plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](../../plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](../../plugins/_official/scenarios/od-plugin-authoring/), [`od-share-to-community`](../../plugins/_official/scenarios/od-share-to-community/), [`od-web-effect-extractor`](../../plugins/_official/scenarios/od-web-effect-extractor/) | | [`image-templates/`](../../plugins/_official/image-templates/) | 45 | Tek seferlik görsel komutları — editöryel, sinematik, ürün, portre | | [`video-templates/`](../../plugins/_official/video-templates/) | 63 | HyperFrames / Seedance / Veo hareket şablonları | | [`design-systems/`](../../plugins/_official/design-systems/) | 143 | Eklenti olarak sarmalanmış marka `DESIGN.md` dosyaları | | [`atoms/`](../../plugins/_official/atoms/) | 13 | Yeniden kullanılabilir UI parçaları (düğmeler, hero'lar, KPI kartları) | | [`examples/`](../../plugins/_official/examples/) | 183 | Yeniden harmanlanabilir referans çıktıları | Ayrıca topluluk eklentileri için [`plugins/community/`](../../plugins/community/) ve yayınlama akışı için [`plugins/registry/`](../../plugins/registry/). ### Eklentiler ne yapabilir - 🤖 **Herhangi bir kodlama ajanında çalışın** — [Claude Code](../../docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), 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`](../../plugins/_official/scenarios/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`](../../plugins/_official/scenarios/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): ```bash 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: ```bash 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`](../../plugins/spec/SPEC.md); bir kodlama ajanıyla eklenti geliştirme → [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md); kopyala-yapıştır minimal şablonlar → [`plugins/spec/examples/`](../../plugins/spec/examples/). ### Bir eklentiye katkıda bulunma 1. Eklenti klasörünü [`plugins/community/`](../../plugins/community/) içine (üçüncü taraf eklentiler) veya — onu OpenDesign ile birlikte paketlenmiş olarak sunmak için — [`plugins/_official/`](../../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`](../../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`](../../plugins/spec/PUBLISHING-REGISTRIES.md). Eklenti kayıt uç noktası: `GET /api/plugins`. Dizin genel bakışı → [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.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 `` 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`](../../docs/architecture.md). Beceri protokolü → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Ajan adaptör sözleşmesi → [`docs/agent-adapters.md`](../../docs/agent-adapters.md). --- ## Yol haritası - [x] Daemon + 25 ayrı CLI yürütülebilir dosyası üzerinde 26 runtime tanımı + beceri/şablon kayıtları + tasarım sistemi kataloğu - [x] Web uygulaması + sohbet + soru formu + 5 yönlü seçici + yapılacaklar ilerlemesi + yalıtılmış önizleme - [x] 100+ işlevsel beceri · ayrı render şablonu kataloğu · 151 tasarım sistemi paketi · 5 görsel yön · 5 cihaz çerçevesi - [x] SQLite destekli projeler · konuşmalar · mesajlar · sekmeler · şablonlar - [x] Çok sağlayıcılı BYOK proxy (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + SSRF koruması - [x] Claude Design ZIP içe aktarma (`/api/import/claude-design`) - [x] Sidecar protokolü + Electron masaüstü + IPC otomasyonu - [x] Artifact lint API'si + 5 boyutlu öz-eleştiri ön-yayın kapısı - [x] **0.8.0** — eklenti pazar yeri altyapısı (261 resmî eklenti, manifest spesifikasyonu, ajan başına kurulum betikleri) - [x] **0.9.0** — OpenDesign Cloud (uygulamaya gömülü resmî Model Router: sıfır yapılandırma, tek tıkla oturum açma) - [x] 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`](../../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**](https://discord.gg/mHAjSMV6gz) - 🐦 **X / Twitter** — sürüm notları, kilometre taşları, perde arkası → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ) - 🗣️ **GitHub Discussions** — derinlemesine soru-cevap, RFC'ler, "çalışmanı göster" → [**Discussions**](https://github.com/nexu-io/open-design/discussions) - 🐛 **GitHub Issues** — hata raporları, özellik istekleri → [**Issues**](https://github.com/nexu-io/open-design/issues) [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) ve [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) 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/`](../../skills/) · spesifikasyon [`docs/skills-protocol.md`](../../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//`](../../design-systems/) | | Yeni bir **eklenti** | Bir kategori klasörü altına `open-design.json` + türe özgü payload bırakın | [`plugins/community/`](../../plugins/community/) · spesifikasyon [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) içinde · ajan geliştirme kılavuzu [`plugins/spec/AGENT-DEVELOPMENT.md`](../../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/`](../../apps/daemon/src/runtimes/defs/) | | Bir hatayı düzeltin veya UI'yi cilalayın | [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) etiketine göz atın | [Issues →](https://github.com/nexu-io/open-design/issues) | | Belgeleri çevirin | `README..md` dosyalarını güncelleyin | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) | ### 🤖 Bir ajan olarak katkıda bulunma *Bunu okuyan ajan sizseniz*, en hızlı yol: ```bash # 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 # create a branch and worktree # 3. Make the change, run the checks pnpm guard && pnpm typecheck pnpm --filter @open-design/ test # 4. Open the PR gh pr create --fill ``` Tam ajan dostu katkı akışı, kod stili ve PR çıtası → [`CONTRIBUTING.md`](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [Português](CONTRIBUTING.pt-BR.md)). ### 🏅 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`](../../MAINTAINERS.md) ve [Discord](https://discord.gg/mHAjSMV6gz) ü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`](../../MAINTAINERS.md) (ayrıca [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [Português](MAINTAINERS.pt-BR.md)). ## 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`](https://github.com/lowlighter/metrics) kullanılarak [`.github/workflows/metrics.yml`](../../.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`](https://github.com/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`](https://github.com/op7418/guizang-ppt-skill) | Dergi tarzı web PPT becerisi, [`design-templates/guizang-ppt/`](../../design-templates/guizang-ppt/) altında birebir paketlenmiştir. Deste modu için varsayılan. | | [`lewislulu/html-ppt-skill`](https://github.com/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`](https://github.com/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`](https://github.com/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`](https://github.com/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`](https://github.com/bergside/awesome-design-skills) | `design-systems/` altına eklenen 57 tasarım becerisinin kaynağı. | | [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) | HTML→MP4 hareket grafikleri çerçevesi, OpenDesign'da birinci sınıf `hyperframes-html` olarak entegre edilmiştir. | | [Claude Code skills][skill] | Birebir benimsediğimiz `SKILL.md` kuralı. | Ayrıntılı köken → [`docs/references.md`](../../docs/references.md). [skill]: https://docs.anthropic.com/en/docs/claude-code/skills ## Lisans Apache-2.0. Paketlenmiş `design-templates/guizang-ppt/` orijinal [LICENSE](../../design-templates/guizang-ppt/LICENSE) dosyasını korur (MIT, [@op7418](https://github.com/op7418)). Paketlenmiş `design-templates/html-ppt/` orijinal [LICENSE](../../design-templates/html-ppt/LICENSE) dosyasını korur (MIT, [@lewislulu](https://github.com/lewislulu)).