Open Design ile bir referans görseli gerçek bir sayfaya dönüştürün (Gemini ile ücretsiz)

Bu kılavuz, Open Design'ın belirli ve yeterince kullanılmayan bir iş akışıyla ilgili: bir referans görselinden başlamak. Beğendiğiniz bir tasarım bulun — bir Dribbble çalışması, herhangi bir sitenin ekran görüntüsü — içeri bırakın, Open Design o görsel dilde gerçek bir sayfa kursun. Üstelik tüm bu süreci bir kodlama agent'ının ücretsiz katmanında bedavaya çalıştırabilirsiniz. Compile Future'ın videosunda verdiği anlatımı izler; güncel sürüme göre yeniden yazılmış ve güncellenmiştir. Yukarıdaki videoyu izleyin ya da yazılı sürümü okumaya devam edin.

Open Design çalışma alanı: ne kurmak istediğinizi tanımlayın, bir mod seçin, gerisini agent'ınız halletsin.

Open Design nedir?

Open Design, açık kaynaklı, yerel öncelikli bir tasarım platformudur — kendi makinenizde çalışan bir Claude Design alternatifi. En önemli fark: tek bir modele kilitlenmek yerine zaten kullandığınız kodlama agent'ını sürer — Claude Code, Codex, Cursor, Gemini, OpenCode ve daha fazlası. Kapsamlı bir beceri ve marka tasarım sistemleri kütüphanesiyle gelir (Airbnb, Apple, Cursor, Ferrari, Figma ve çok daha fazlası), böylece üretim genel bir prompt yerine gerçek bir estetikten başlar.

• Açık kaynak, Apache-2.0 — klonlayın, kendiniz barındırın ya da yalnızca uygulamayı indirin.
• Yerelde çalışır — projeleriniz kendi makinenizde durur.
• Herhangi bir model — ücretsiz katmanlar dahil; GPU gerekmez (model, donanımınızda değil, CLI'niz üzerinden bulutta çalışır).

Adım 1 — Kurun ve ücretsiz bir model bağlayın

Kurulum dosyasını open-design.ai/download adresinden indirin (macOS DMG veya Windows .exe) ya da kaynaktan çalıştırın. İlk açılışta agent'ınızı seçin. Compile Future, ücretsiz katmanı cömert olduğu için (günde bolca ücretsiz istek) Gemini CLI kullanır — böylece tüm iş akışı hiçbir şeye mal olmaz:

• Kurulumda Gemini'yi seçin. Algılanmazsa Gemini CLI'yi kurun (sitesindeki tek bir komut) ve bir Google hesabıyla oturum açın.
• Başka bir şey mi tercih edersiniz? Algılanan herhangi bir CLI çalışır ya da kendi API key'inizi getirin.

«GPU yok» demenin nedeni budur: model, CLI'niz üzerinden bulutta çalışır, dolayısıyla mütevazı bir dizüstü bilgisayar bile yeterlidir.

Adım 2 — Bir metin prompt'undan kurun (temel yöntem)

Varsayılan bir tasarım sistemi belirleyin (Compile Future cesur olanı sever), Prototype'ı seçin, ona bir ad verin ve en iyi çıktı için high fidelity'yi seçin. Brief'inizi gönderin. Open Design birkaç keşif sorusu sorar (tek araç / açılış sayfası / hepsi bir arada mı? duyarlı mı? ton? marka bağlamı?) ve bir görsel yön önerir (örneğin Vercel tarzı minimal bir görünüm), ardından temiz bir ilk sürüm kurar. Vurgu renklerini doğrudan sayfada ayarlayabilirsiniz.

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

Adım 3 — Referans görsel iş akışı (asıl güzel kısım)

İşte videoya değen teknik. Bir görünümü kelimelerle anlatmak yerine, görünümü Open Design'a gösterin:

1. Beğendiğiniz bir tasarım bulun — ilham için Dribbble'a (örneğin «tools website» araması) ya da herhangi bir canlı siteye göz atın.
2. Onun bir ekran görüntüsünü kaydedin.
3. Open Design'a dönüp free-form modunda bir proje oluşturun, ekran görüntüsünü ekleyin ve şu prompt'u verin: «build my [site], use the design language from the image I shared.»
4. Keşif sorularını yanıtlayın ve ona görselin UI'sini eşleştirmesini söyleyin.

Open Design referanstan bir marka spesifikasyonu (brand spec) yazar (bunu gösterir ve onaylamanızı ister), ardından sayfayı o görsel dilde kurar — referansınızla aynı yerleşim hissi, renkler ve tipografiyi içeriğinize uygular. Ne istediğinizi görebildiğiniz ama anlatamadığınız durumlarda markaya uygun bir sonuç almanın en hızlı yoludur.

Eklenti kütüphanesi: becerileri doğrudan registry'den kurun — anti-slop tasarım becerileri dahil.

Adım 4 — Düzenleyin ve yayınlayın

Sade bir dille rafine edin — «remove the sign-in button», «adjust the card radius» — ve güncellenmesini izleyin. Kodu Source üzerinden görüntüleyin, ardından Share ile bir ZIP, PDF veya PowerPoint indirin, bağımsız HTML dışa aktarın ya da paylaşılabilir bir bağlantı için tek tıkla deploy to Vercel yapın (sadece bir Vercel token yapıştırın).

İpuçları

• Gemini CLI'nin ücretsiz katmanında ücretsiz çalıştırın (veya ücretsiz katmanı olan herhangi bir CLI) — abonelik yok, GPU yok.
• Görünümü gözünüzde canlandırabildiğiniz ama anlatamadığınız durumlarda bir referans görseli kullanın — Dribbble veya herhangi bir sitenin ekran görüntüsü.
• free-form modu + «match the image», referansı tam isabet yakalayan prompt kalıbıdır.
• Kurmaya başlamadan önce ürettiği marka spesifikasyonunu onaylayın, böylece yön doğru olur.
• Cilalı çıktı için high fidelity; sade dilde düzenlemelerle yineleyin.

SSS

GPU'ya ihtiyacım var mı? Hayır. Model, makinenizde değil, CLI'niz üzerinden (bulutta) çalışır — normal bir dizüstü bilgisayar yeterlidir.

Gerçekten ücretsiz çalıştırabilir miyim? Evet — onu Gemini gibi ücretsiz katmanlı bir CLI'ye yönlendirin ve tasarımları bedavaya üretin; yalnızca ücretli bir model/API seçerseniz ödeme yaparsınız.

Beğendiğim bir görselden nasıl tasarım yaparım? free-form modunu kullanın, ekran görüntüsünü ekleyin ve ona görselin tasarım dilini kullanmasını söyleyin; bir marka spesifikasyonu çıkarır ve o tarzda kurar.

Ücretsiz ve açık kaynak mı? Evet — Apache-2.0. Yerelde ücretsiz çalıştırın; yalnızca bağladığınız şeyin model/medya kullanımı için ödeme yaparsınız.

---

Bu yazılı kılavuz Compile Future'ın anlatımına dayanır. Yukarıdaki tam videoyu izleyin ve daha fazla ücretsiz AI iş akışı için Compile Future'a abone olun.