Token yakmadan Claude Design kalitesinde tasarım yapın

Bu rehber maliyet meselesini doğrudan ele alır: kapalı bir bulut tasarım aracı kullandıysanız o sihri bilirsiniz — ve token'ların ne kadar çabuk tükendiğini de. Open Design, işi istediğiniz herhangi bir model üzerinden çalıştırarak benzer bir kalitede tasarım yapmanızı sağlar — zaten parasını ödediğiniz ajan ya da kendi anahtarınız — böylece ayrı bir tasarım bütçesini idareli kullanmak zorunda kalmazsınız. Roy Shavit'in adım adım anlatımında yaptığı kurulumu izler; İngilizceye yeniden yazılmış ve güncel sürüme uyarlanmıştır. Canlı çalıştırma için yukarıdaki videoyu izleyin ya da yazılı sürüm için okumaya devam edin.

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

Open Design nedir?

Open Design, açık kaynaklı ve yerel öncelikli bir tasarım platformudur. Kapalı bulut aracında olduğu gibi, ona bir komut verir ve gerçek bir çıktı alırsınız — bir açılış sayfası, uygulama ya da deste — VS Code'da veya kendi düzenleyicinizde üzerinde çalışmaya devam edebileceğiniz düzenlenebilir HTML olarak. Onu öne çıkaran üç şey var ve ilk ikisi, çalıştırmasının neden daha ucuz olduğunu açıklıyor:

• Açık kaynaklıdır (Apache-2.0) — kodu okuyun, fork'layın, kendiniz barındırın.
• Sizin bilgisayarınızda çalışır — dosyalar makinenizde kalır; hiçbir şey üçüncü taraf bir buluta gitmez.
• İstediğiniz herhangi bir modeli kullanır — mevcut CLI'niz üzerinden Codex, Claude ya da 15'ten fazla başka model, veya kendi API anahtarınız (BYOK).

Maliyet meselesi: token'ları idareli kullanmayı bırakın

Roy'un çerçevesi açık sözlü ve mesele de tam olarak bu: kapalı bir bulut tasarım aracı token tahsisini çok hızlı tüketir, böylece sonunda tasarım işinizi idareli kullanmaya başlarsınız. Open Design bu tavanı kaldırır çünkü üretim, zaten sahip olduğunuz ajan/abonelik ya da kontrolünüzdeki bir anahtar üzerinden çalışır. Maliyet/kalite dengesine her proje için kendiniz karar verirsiniz — taslaklar için ucuz bir model, son geçiş için üst düzey bir model — başkasının ayrı tasarım tavanı tarafından sayaca bağlanmak yerine. Kendi sunucunuzda barındırmak ayrıca işin makinenizde gerçekleştiği anlamına gelir, bu da her şeyi yalın tutar.

1. Adım — Kurun ve modellerinizi algılayın

En basit yol masaüstü uygulamasıdır: open-design.ai/download adresine gidin, işletim sisteminizi seçin, indirin ve sürükleyip bırakın. Kaynaktan kurmayı tercih ederseniz:

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 port — hiçbirini sabit kodlamayın). Ayarlarda Open Design, yerel olarak kurulu modelleri anında tanır — Roy'da Codex ve Claude var ve OpenCode'u ya da başkalarını da yakalardı. Bir varsayılan belirleyin ya da herhangi bir sağlayıcıdan kendi anahtarınızı getirin; böylece kurulu bir CLI'ye bile ihtiyacınız olmaz. İşte benzersizliği bu: tek bir sağlayıcıya mahkûm edilmezsiniz.

Slayt sunumu modu: bir sunum kategorisi seçin ve başlangıç noktası olarak bir örneği fork'layın.

2. Adım — Bir açılış sayfası kurun, ucuza yineleyin

Roy bir oyun yayıncılığı hizmeti için bir açılış sayfası kuruyor. Brief'i gönderiyor, Open Design bir keşif formu (çıktı türü, hedef kitle, marka yönü, kapsam, hareket düzeyi) döndürüyor, o yanıtlıyor ve sayfayı kuruyor — CLI'si öyle ayarlı olduğu için burada Claude Opus üzerinde çalışıyor. Sonuç sağlam bir ilk sürüm: hero bölümü, demo rakamları, platform desteği, bir fiyatlandırma sayfası, kullanıcı görüşleri, SSS — masaüstü, tablet ve telefonda duyarlı.

Yineleme araçları, değişikliklerin maliyetini düşük tutar: bir alanı seçip not ekleyin, bir yorum bırakın ya da metni doğrudan değiştirmek için satır içi düzenleme yapın. Üretilen HTML'i ve tasarım dosyalarını görmek için kod görünümüne geçin. Memnun kaldığınızda Paylaş düğmesi PDF'e aktarır ya da doğrudan Vercel veya Cloudflare Pages'e yayına alır (token'ınızı yapıştırın, site yayına girer), veya kaynağa tıklayıp VS Code, Cursor ya da kendi düzenleyicinizde çalışmaya devam edersiniz.

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

3. Adım — Sayfaların ötesinde: bir video oluşturun

Open Design statik tasarımla sınırlı değildir. Roy, New York Times tarzında animasyonlu bir çubuk grafiği oluşturmak için hyperframes hareket becerisini kullanıyor — birkaç dakika sürüyor ve daha uzun bir videoya yerleştirebileceğiniz ya da markalı bir parça olarak kullanabileceğiniz gerçek bir MP4 üretiyor. Seçilebilecek 170'ten fazla tasarım sistemi eklentisi de var (Apple, PlayStation ve daha fazlası) ve kütüphane açık olduğundan topluluk ona eklemeye devam ediyor.

Hangisini ne zaman kullanmalı (dürüst değerlendirme)

Roy bu konuda adil. Model esnekliği, daha düşük maliyet ya da kendi sunucunuzda barındırma istediğinizde Open Design'a yönelin — iş makinenizde kalır ve üçüncü taraf bir model dâhil olmak üzere seçtiğiniz herhangi bir model üzerinde çalışır. Minimum, kurulum gerektirmeyen bir yapı ve başlamak için en az çabayı istediğinizde kapalı bulut aracına yönelin — ve kutudan çıktığı haliyle hâlâ biraz daha cilalı olduğunu not edin. Aynı içerik, orada biraz daha yüksek bir bitiş; burada ise belirgin biçimde daha fazla kontrol ve daha düşük işletme maliyeti.

İpuçları

• Zaten parasını ödediğiniz ajan üzerinde çalıştırın (ya da BYOK) — ayrı bir token tavanından kurtulmak için.
• Taslağı ucuz bir modelde yapın, son hali güçlü bir modelde bitirin — maliyet/kalite ayarını her proje için siz kontrol edersiniz.
• Satır içi düzenleme ve alan yorumlarını kullanın — tüm sayfayı yeniden üretmek yerine ucuz, cerrahi değişiklikler için.
• Koda aktarın ya da Vercel/Cloudflare'e yayına alın — bitirdiğinizde doğrudan Paylaş üzerinden.
• hyperframes becerisini deneyin — yalnızca statik sayfalara değil, harekete/videoya ihtiyacınız olduğunda.

SSS

Bu, kapalı bir bulut aracına kıyasla token'ları nasıl tasarruf ediyor? Üretim kendi ajanınız/aboneliğiniz ya da kendi API anahtarınız üzerinden çalışır, dolayısıyla tüketilecek ayrı, sayaca bağlı bir tasarım bütçesi yoktur — modeli ve maliyeti siz seçersiniz.

Çıktıyı kendi düzenleyicimde çalışmaya devam edebilir miyim? Evet — çıktı düzenlenebilir HTML/dosyalardır. Kaynağa tıklayıp VS Code, Cursor ya da herhangi bir düzenleyicide devam edin, ya da Vercel/Cloudflare Pages'e yayına alın.

Web sayfalarından fazlasını yapabilir mi? Evet — prototipler, desteler, görseller ve video (hyperframes hareket becerisi aracılığıyla), ayrıca geniş bir tasarım sistemleri kütüphanesi.

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

---

Bu yazılı rehber Roy Shavit'in adım adım anlatımına dayanır. Yukarıdaki tam videoyu izleyin ve daha fazla pratik yapay zeka geliştirme içeriği için Roy Shavit'e abone olun.