Open Design ile Mevcut Markanıza Uyan Bir Site Tasarlayın

Bu kılavuz, Open Design'ın öne çıkan bir numarasına odaklanır: onu mevcut web sitenize yönlendirin, ajan gerçek markanızı — yazı tipleri, renkler, ton — bir spesifikasyona çeksin, sonra sizin sesinizle tasarlasın. Ayrıca tek tıkla masaüstü kurulumunu ve neden açık bir alternatife yöneleceğinize dair dürüst bir bakışı da ele alır. Brendan O'Connell'ın anlatımında yürüttüğü uygulamalı yapımı izler; yeniden yazılmış ve güncel sürüme göre güncellenmiştir. Canlı çalıştırma için yukarıdaki videoyu izleyin ya da yazılı sürüm için okumaya devam edin.

Önizlemede gösterilen gerçek bir üretilmiş prototip — koyu, sinematik bir ajans açılış sayfası.

Open Design nedir?

Open Design, zaten kullandığınız kodlama ajanının üzerinde çalışan — Claude Code, Codex, Cursor, Gemini, OpenCode ve daha fazlası — ya da kendi API anahtarınızla çalışan, açık kaynaklı ve yerel öncelikli bir tasarım platformudur. Esasında, tek bir tedarikçinin bulutuna kilitlenmeden ve o aracın kullanım tavanları olmadan kendi makinenizde çalıştırdığınız Claude-Design tarzı bir çalışma alanıdır. Apache-2.0 lisanslıdır, kapsamlı bir beceri ve tasarım sistemi kütüphanesiyle gelir ve bunun üstüne medya üretimi (görsel, video, ses) ekler.

Neden açık bir alternatife yönelmeli

Brendan'ın gerekçesi somut ve tekrar etmeye değer, çünkü birçok kişi için belirleyici etken bu. Kapalı bulut aracında tek bir tasarım sistemi üretti ve bu, haftalık limitinin yaklaşık %75'ini yiyip bitirdi — onu sonraki haftaya kadar tıkanmış bıraktı. Bu limit, normal plan kotasından ayrıdır; bu da iş akışını gerçek bir yineleme için neredeyse kullanılamaz hissettirir. Kendi Claude Code (ya da herhangi bir) aboneliğinizde çalıştırmak bu duvarı kaldırır: ayrı bir tasarım tavanına çarpmazsınız ve tek bir ekosisteme kilitlenmezsiniz.

Adım 1 — Kurulum (tek tıkla yol)

En kolay rota ve Brendan'ın önerdiği, masaüstü uygulamasıdır: open-design.ai/download adresine gidip macOS veya Windows için çalıştırılabilir dosyayı edinin. Uygulama kısa sürede çalışır hale gelir ve makinenizde halihazırda bulunan ajan CLI'larını otomatik olarak algılar — Brendan hiçbir şey yapılandırmadı; Claude Code aboneliğini yakaladı ve kullanıma hazırdı.

Terminali mi tercih edersiniz? Kaynaktan:

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

Yazdırdığı yerel URL'yi açın (dinamik bir bağlantı noktası — hiçbirini sabit kodlamayın). Sağda ayarları bulacaksınız: algılanan ajanların yanı sıra medya sağlayıcıları (görsel için OpenAI, video için MiniMax, ses için ElevenLabs), bağlayıcılar (Composio MCP) ve hatta masaüstü evcil hayvanları. Herhangi bir sağlayıcı için kendi anahtarınızı da getirebilirsiniz.

Adım 2 — Mevcut markanızdan tasarlayın

İşte bilet parasına değen numara bu. Bir proje oluşturun, yüksek doğruluk seçin ve brief'inizde ona mevcut siteniz için tasarlamasını söyleyin. Ajanın bir web getirme aracı var, bu yüzden gidip canlı web sitenizi okuyacak, ardından ondan bir marka spesifikasyonu çıkaracak.

Videoda Brendan onu kendi sitesine yönlendiriyor ve Open Design:

1. Sayfayı getiriyor ve gerçek içeriği kazıyor.
2. Bir brand-spec.md yazıyor; gerçek yazı tipini (Fig Tree'yi doğru şekilde yakaladı), rengini ve tasarım tercihlerini — "hap biçimli düğme yok, tamamen yuvarlatılmış kart yok, vurgu rengi idareli kullanılmış, bol beyaz alan" — ayrıca ses tonunu ("soluk soluğa pazarlama yok") kaydediyor.
3. Bir DESIGN.md üretiyor ve sayfayı o sesle inşa ediyor; mevcut markasını daha temiz bir düzenle harmanlıyor.

Open Design çalışma alanı: oluşturmak istediğinizi anlatın, bir mod seçin, gerisini ajanınız halletsin.

İnşa etmeden önce Open Design kısa bir keşif formu çalıştırır (tek sayfa mı yoksa birkaç sayfa mı? görsel yön? mevcut siteyle eşleşsin mi? gerçekçi yer tutucular mı?) ki doğru yönü sabitlesin. Sonuç, onun sloganını, mavisini ve yazı tipini korur, sonra üstüne daha keskin bir düzen kaplar — tıklayarak gezebileceğiniz çok sayfalı bir çıktı.

Adım 3 — Anti-slop öz denetimini gözden geçirin ve dışa aktarın

Bitirirken Open Design bir anti-slop öz denetimi çalıştırır — Brendan bunun "emoji yok, tek yazı tipi, tek kararlı dokunuş, baştan sona gerçek konumlandırma metni" diye onayladığını görür. Çıktının üretilmiş gibi görünmesini engelleyen koruyucu bariyer budur.

HyperFrames galerisi: fork'layıp yeniden düzenleyebileceğiniz, kodla yönlendirilen hareket ve video çalışmaları.

Başlangıç noktaları için örnekler ve tasarım sistemleri sekmelerine göz atın (her tasarım sistemi size tümüyle düzenlenebilir bir DESIGN.md verir) ve memnun kaldığınızda eseri HTML, PDF veya bir ZIP olarak dışa aktarın. Her şey kendi ajanınızda yerel olarak çalıştığından, yineleme yaparken çarpacağınız ayrı bir tasarım tavanı yoktur.

İpuçları

• Onu canlı sitenize yönlendirin ki gerçek yazı tiplerinizi, renklerinizi ve tonunuzu devralsın — markaya uygun çıktıya giden en hızlı yol.
• Sıfır yapılandırma yolu için masaüstü uygulamasını kullanın; ajanınızı otomatik algılar.
• Kapalı araçların ayrı haftalık tasarım tavanından kaçınmak için kendi CLI aboneliğinizde çalıştırın.
• Üretilen brand-spec.md / DESIGN.md dosyalarını okuyun — bunlar düzenlenebilir dosyalardır, dolayısıyla kazımanın yanlış aldığı her şeyi düzeltin.
• Prompt'a biraz emek verin — daha zengin bir brief, gözle görülür şekilde daha iyi bir ilk taslak üretir.

SSS

Gerçekten mevcut web sitemden tasarlayabilir mi? Evet — ajanın bir web getirme aracı var. Ona sitenize göre tasarlamasını söyleyin; yazı tiplerinizi, renklerinizi, düzen tercihlerinizi ve tonunuzu bir brand-spec.md dosyasına kazır, ardından o sesle tasarlar.

Ajanımı yapılandırmam gerekir mi? Genellikle hayır. Masaüstü uygulaması, halihazırda yüklü ajan CLI'larını (Claude Code, Codex, Gemini ve daha fazlası) otomatik algılar. Kendi anahtarınızı da getirebilirsiniz.

Kapalı aracın kullanım limitleri onda da var mı? Ayrı bir tasarım tavanı yok — üretim, bağladığınız hangi ajan/abonelikse onun üzerinden gider, dolayısıyla tek bir tasarımdan sonra engellenmezsiniz.

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

---

Bu yazılı kılavuz Brendan O'Connell'ın anlatımına dayanır. Yukarıdaki tam videoyu izleyin ve daha fazla açık kaynak araç incelemesi için Brendan O'Connell'a abone olun.