Prompt’tan Canlı URL’ye — Open Design ile Düzenle, İncele ve Tek Tıkla Dağıt

Bu rehber, bir prototipi bir komuttan yayında bir URL'ye kadar baştan sona götürüyor: bir tasarım sistemi seç, oluştur, tuval üzerindeki Edit ve Inspect araçlarıyla ince ayar yap, ardından doğrudan Vercel veya Cloudflare Pages'e dağıt — hem de Open Design'dan hiç çıkmadan. 01Coder'ın tanıtım videosunda gerçekleştirdiği demoyu temel alıyor; bu yazılı rehber için uyarlandı ve güncel sürüme göre güncellendi. Canlı çalışmayı görmek için yukarıdaki videoyu izle ya da yazılı sürüm için okumaya devam et.

Open Design çalışma alanı: ne inşa etmek istediğini anlat, bir mod seç, gerisini ajanın halletsin.

Open Design nedir?

Open Design, zaten kullandığın kodlama ajanının üzerinde çalışan açık kaynaklı, yerel öncelikli (local-first) bir tasarım platformudur — Claude Code, Codex, Gemini, Hermes ve daha fazlası — ya da kendi API key’in. Bir masaüstü uygulaması olarak gelir (derleme gerektirmez) ve derin bir beceri (skill) kütüphanesini, marka düzeyinde derin bir tasarım sistemi kütüphanesiyle birleştirir; böylece boş bir tuval yerine gerçek bir estetikten başlarsın.

• Açık kaynak, Apache-2.0 — klonla, kendin barındır ya da sadece uygulamayı indir.
• Yerelde çalışır — projelerin kendi makinende durur.
• Ajan takılabilir — sol alttan ajanı istediğin zaman değiştir.
• Gerçek markalar için tasarım sistemleri — Apple, Airbnb, ElevenLabs ve çok daha fazlası.

Adım 1 — Kur ve bir tasarım sistemi seç

En kolay yol, open-design.ai/download adresinden masaüstü uygulamasıdır (macOS ve Windows; kaynaktan çalıştırmayı tercih edersen Docker veya pnpm). Açılışta sol alt köşe aktif ajanı gösterir (01Coder Codex kullanır) — değiştirmek için üzerine tıkla.

Bir Prototype oluştur, ona bir ad ver ve açılır menüden bir tasarım sistemi seç — her giriş, çıktıyı o markanın görünümüyle kaplar. Claude Design’da daha önce bir şey inşa ettiysen, ZIP’ini buraya içe aktar.

Eklenti kütüphanesi: becerileri doğrudan kayıttan kur — anti-slop tasarım becerileri dahil.

Adım 2 — Keşif + bir görsel yönle üret

Brief’ini yaz ve gönder. Open Design kısa bir dizi keşif sorusu sorar (kimin için, tasarım tonu, marka bağlamı, dil), ardından bir görsel yön seçici sunar — 01Coder bir “FT Magazine” editöryel yönü seçer. Birini seç, sağ tarafta ilk sürümü inşa etsin.

Adım 3 — Edit ve Inspect ile ince ayar yap

Yeniden prompt yazmadan cilaladığın yer burası:

• Edit — herhangi bir öğeye tıkla ve içeriğini doğrudan değiştir. 01Coder bir etiketi “GitHub”tan “GH”ye kısaltır ve bir başlıktaki bir kelimeyi yeniden yazar, ardından apply content’e basar. Bağlantıları da aynı şekilde ayarlayabilirsin; sol panel, eseri katmanlara göre düzenlenmiş olarak gösterir.
• Inspect — görsel stil için. İlk kez kullandığında, eserde data-oid etiketleri olmadığı uyarısını verir; bunları ajanın eklemesine izin ver (Open Design öğeleri güvenilir biçimde böyle hedefler), sonra yeniden yükle. Artık herhangi bir öğeye (örneğin hero’nun h1’ine) tıklamak rengi, arka planı ve yazı tipi boyutunu ayarlamanı sağlar; abartırsan bir sıfırlama da var.

Daha büyük değişiklikler için doğrudan sohbet üzerinden konuşmalı düzenlemeye geri dön — Edit/Inspect hızlı, cerrahi ince ayarlar içindir.

Adım 4 — Tek tıkla canlı bir URL’ye dağıt

Hazır olduğunda, Share menüsü (sağ üst) PDF, PPTX, ZIP veya bağımsız HTML olarak dışa aktarır — ya da tek tıkla Vercel veya Cloudflare Pages’e dağıtır. 01Coder’ın yaptığı gibi Cloudflare kullanarak:

1. deploy → Cloudflare’a tıkla, ardından get / create an API token.
2. Cloudflare Pages iznine sahip özel bir token oluştur, özete ilerle ve oluştur.
3. Token’ı Open Design’a yapıştır, account ID’ni ekle (Cloudflare panosundan kopyala) ve dağıt.
4. Sana verdiği bağlantıyı aç — ilk yükleme bozuk görünürse, yayılırken bir iki kez yenile.

Önizlemede render edilmiş gerçek bir üretilmiş prototip — karanlık, sinematik bir ajans açılış sayfası.

Canlı sonuçtan memnun değil misin? Sohbete geri dön, yinele ve yeniden dağıt.

İpuçları

• Bir tasarım sisteminden başla, böylece ilk geçiş zaten markaya uygun olsun.
• Inspect kullanmadan önce ajanın data-oid etiketlerini eklemesine izin ver, sonra önizlemeyi yeniden yükle.
• Metin için Edit, stil için Inspect, yapı için sohbet kullan — değişiklik için doğru aracı seç.
• Cloudflare dağıtımı için ikisine de ihtiyacın var: bir API token (Pages izinli) ve account ID’n.
• İlk dağıtımdan sonra yenile — sayfa henüz yayılmadıysa.

SSS

Open Design’ın içinden gerçekten herkese açık bir URL’ye dağıtabilir miyim? Evet — Share menüsü tek tıkla Vercel veya Cloudflare Pages’e dağıtır (sağlayıcı token’ını sen verirsin; Cloudflare ayrıca account ID’ni ister).

data-oid nedir ve Inspect neden onu ister? Open Design’ın öğeleri güvenilir biçimde hedefleyebilmek için öğelere eklediği bir özniteliktir. Ajanın eklemesine izin ver, yeniden yükle, Inspect çalışır.

Kaynaktan çalıştırmak zorunda mıyım? Hayır — macOS veya Windows için masaüstü uygulamasını indir. Tercih edersen kaynaktan Docker ve pnpm de birer seçenektir.

Ücretsiz mi? Uygulama Apache-2.0 altında açık kaynaktır ve yerelde çalıştırması ücretsizdir. Yalnızca bağladığın ajanın ve sağlayıcıların model ve medya kullanımı için ödeme yaparsın.

---

Bu yazılı rehber, 01Coder’ın uygulamalı demosuna dayanır. Yukarıdaki tam videoyu izle ve daha fazla AI ürün derinlemesine incelemesi için 01Coder’a abone ol.