OpenCode Tasarım İşlerinin Üstesinden Gerçekten Gelebilir mi?
Evet — bağlamda estetik bir skill, bir tasarım sistemi ve gerçek referans görseller bulunduğunda OpenCode, üretim kalitesinde, duyarlı bir UI üretir ve bunu bir tarayıcıda doğrulayabilir. Model bağımsız olduğu için o anda frontend'de en iyi olan modeli çalıştırabilirsiniz. Bu derlenmiş bağlam olmadan genellikle sıradan bir görünüme kayar; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Tasarım İçin OpenCode ile Hangi Modeli Kullanmalıyım?
Hangisini isterseniz — OpenCode, models.dev üzerinden sağlayıcı bağımsızdır, bu nedenle aynı iş akışının arkasında Anthropic, OpenAI, Google, OpenRouter veya yerel modelleri çalıştırabilir ve istediğiniz zaman değiştirebilirsiniz. Tasarım çıktısının kalitesi, tek başına modelden çok daha fazla skill'inize, tasarım sisteminize ve referanslarınıza bağlıdır.
OpenDesign, OpenCode (SST) Ekibi Tarafından mı Yapıldı?
Hayır. OpenDesign, OpenCode'u bir ajan olarak entegre eden bağımsız bir açık kaynak projesidir. OpenCode'u yerel öncelikli, açık bir skill ve design system kitaplığıyla tamamlar.
OpenCode ile Tasarım Yapmak İçin Özel Bir Abonelik Gerekir mi?
Hayır — OpenCode BYOK'dur. Kendi model sağlayıcı API anahtarınızı getirirsiniz ve OpenDesign kimlik bilgilerinizi asla vekil olarak kullanmaz. Tedarikçiye bağımlılık yoktur.
Frontend Tasarım İçin OpenCode mu, Codex mi, Claude Code mu?
Hepsi güçlüdür ve birçok ekip bunları birlikte kullanır. OpenCode'un avantajı tamamen açık kaynak ve model bağımsız olmasıdır; Codex, devredilmiş, sanal alanlı (sandboxed) yapılarda başarılıdır; Claude Code, belirli, kod tabanına duyarlı tasarım kararlarıyla tanınır. OpenDesign, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.
OpenCode Tam Olarak Nedir
OpenCode, terminal için geliştirilmiş açık kaynaklı bir yapay zekâ kodlama aracısıdır ve SST (Anomaly Innovations) ekibi tarafından sürdürülmektedir. Deponuzu okur, komutlar çalıştırır, dosyaları düzenler ve büyük bir dil modeliyle konuşur — ancak satıcıya bağlı aracıların aksine kendi modelini sunmaz. Onu istediğiniz sağlayıcıya ve modele yönlendirir ve kendi anahtarınızı getirirsiniz.
Bir terminal kullanıcı arayüzü (TUI) olarak çalışır; aynı motorun üzerinde bir masaüstü uygulaması ve IDE uzantıları bulunur. Arka planda bir istemci/sunucu mimarisi kullanır, böylece işi yapan aracı onu yönlendirdiğiniz yüzeyden ayrıştırılmıştır. Yerleşik iki aracı — build ve plan — Tab tuşuyla aralarında geçiş yapılır.
Modelden bağımsız: Modeller ve sağlayıcılar açık bir katalog olan models.dev'den gelir. Bunları opencode.json içinde bir sağlayıcı/model-id dizesiyle yapılandırır ve yüklenmesini istemediğiniz sağlayıcıları devre dışı bırakabilirsiniz — böylece aynı tasarım iş akışı Anthropic, OpenAI, Google, OpenRouter, yerel modeller ve daha fazlasında çalışır.
Yönerge dosyası: OpenCode, proje kuralları için projenizdeki bir AGENTS.md dosyasını okur (araçlar arası standart, ayrıca CLAUDE.md ile de uyumludur) — tasarım kurallarınızı kodlamak için doğal yer. Bir tane oluşturmak için /init çalıştırın.
Genişletilebilir: LSP entegrasyonunu, MCP sunucularını, temaları, tuş bağlamalarını ve özel komutları destekler; ayrıca iş birliği için paylaşılabilir oturum bağlantıları sunar.
Bakımı yapan: SST / Anomaly Innovations (açık kaynak proje)
Kimlik bilgisi: kendi model sağlayıcınızın API anahtarı/anahtarları — BYOK, satıcıya bağlılık yok
Lisans: MIT, açık kaynak
Açık, her modelle çalışan bir aracı neden tasarım işine uyar
OpenCode'un, bir satıcı aracısının yaptığı gibi tek bir “tasarım modeli” yoktur — ve asıl mesele de budur. Modelden bağımsız ve açık olduğu için aynı tasarım iş akışını o anda frontend'de en iyi olan modelde çalıştırabilir, daha sonra değiştirebilir veya yerel bir modele geri dönebilirsiniz; hepsi kurulumunuzu değiştirmeden.
Ancak tek başına model seçimi zevk satın almaz. Her kodlama aracısı gibi OpenCode da ona kısıtlamalar vermezseniz genel amaçlı UI üretir. İyi tasarım çıktısı, sizin sağladığınız üç girdiden gelir.
Bir tasarım sistemi: Aracının yeniden kullandığı gerçek token'lar, primitifler ve konvansiyonlar; böylece çıktı genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.
Estetik bir beceri: Gerçek zevki dayatan, özenle hazırlanmış bir beceri — ölçülü hareket, marka öncelikli hiyerarşi, en fazla iki yazı tipi ve bir vurgu rengi — ve aracıyı inşa etmeden önce bir yöne bağlanmaya zorlar.
Somut referanslar: Tek bir hero görseli değil, gerçek referans görselleri ve birden çok durum (masaüstü ve mobil, hover, boş, yükleniyor).
Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri — hangi modeli çalıştırdığınızdan bağımsız olarak.
Ders: OpenCode size model özgürlüğü verir, ama zevk hâlâ özenle hazırlanmış bir tasarım bağlamından gelir. OpenDesign tam olarak bu girdileri paketler; bu yüzden ikisi birbirine uyar — ikisi de açık kaynak ve yerel öncelikli (aşağıda daha fazlası).
Sıfırdan Tasarım için OpenCode Kurulumu
Kurulum sırası: kur → kimlik doğrula (sağlayıcı anahtarınız) → AGENTS.md'yi yapılandır → bir beceri ekle → gerçek bir tarayıcıda doğrula.
Tasarım kurallarınızı kodlayın: Token'larınızı, temel bileşenlerinizi ve konvansiyonlarınızı AGENTS.md'ye (veya ondan başvurulan bir DESIGN.md dosyasına) koyun; böylece çıktı genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir. opencode.json içindeki instructions seçeneği, glob'lar aracılığıyla ek kural dosyalarına işaret edebilir.
Yetenekli bir model seçin: OpenCode modelden bağımsız olduğu için, tasarım aşaması için şu anda frontend'de en güçlü olan sağlayıcıyı/modeli seçin — ve iş akışınızın geri kalanını değiştirmeden tutun.
Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.
# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode
# 2. Start the TUI in your project, then authenticate your provider
opencode # then run /login and pick your provider + paste your key
# 3. Generate project context
opencode # inside your project, run /init to create AGENTS.md
# 4. Pick your model (any provider, via models.dev)
# set "provider/model-id" in opencode.json or switch in the TUI
# 5. Add an MCP server (optional, e.g. for design handoff)
# configure it under the "mcp" key in opencode.json
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
OpenCode'da Ekran Görüntüsünden Arayüze İş Akışı
Herhangi bir ajanla en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüsünü çalışan, duyarlı bir arayüze dönüştürmek ve eşleşene kadar yinelemektir. Aynı beş adımlı yapı OpenCode'da da geçerlidir.
Elonuzdaki en net görsel referanslardan başlayın — ve yalnızca tek bir hero görseli değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil edin.
Prompt'ta spesifik olun; belirsiz prompt'lar genel arayüz üretir.
Bir tasarım sistemi hazırlayın ve OpenCode'a token'ların ve kanonik temel bileşenlerin nerede bulunduğunu (AGENTS.md içinde) söyleyin.
Bir geliştirme sunucusu çalıştırın ve ajanın gerçek bir tarayıcıda render etmesini sağlayın; sonucu kontrol etmek için breakpoint'lere göre yeniden boyutlandırın.
OpenCode'un uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini doğrulamakla yetinmeyin.
TUI'de @ ile dosyalara başvurun; bu, çalışma dizininizde bulanık arama yapar; başında ! bulunan satır içi shell komutlarını çalıştırın ve / komutlarıyla eylemleri yönlendirin. Ardından somut kısıtlamalarla prompt verin:
Prompt'ları küçük ve odaklı tutun, iyi yinelemeleri commit'leyin ve kötü olanları geri alın (geri aldığınızda OpenCode'a söyleyin); böylece her geçiş temiz bir temel üzerine inşa edilir.
opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens from AGENTS.md.
Match spacing, layout, and hierarchy; make it responsive.
Run the dev server, open it in a browser, and iterate until the
UI matches the references across breakpoints.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
AGENTS.md, MCP ve paylaşılabilir oturumlar
Üç uzantı noktası OpenCode'u sürekli tasarım çalışması için pratik hale getirir ve üçü de açık bir tasarım iş akışına temiz biçimde oturur.
AGENTS.md kuralları: Proje kuralları depo kökündeki bir AGENTS.md dosyasında (veya ~/.config/opencode/AGENTS.md içindeki genel kurallar) bulunur. Tasarım kurallarınız için kalıcı bir yuvadır, her çalıştırmada okunur ve diğer ajanların kullandığı CLAUDE.md dosyalarıyla uyumludur.
MCP sunucuları: OpenCode hem yerel (komut) hem de uzak (URL) MCP sunucularını destekler; mcp anahtarı altında yapılandırılır — tasarım bağlamını ve yalnızca OpenCode ile değil, ajanlar arasında çalışan harici araçları getirmenin taşınabilir yolu.
Paylaşılabilir oturumlar: /share komutu bir konuşma için işbirliği veya inceleme amacıyla herkese açık bir bağlantı oluşturur ve /unshare bunu iptal eder — bir tasarım geçişi hakkında geri bildirim almak için kullanışlıdır.
Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam da OpenDesign'in her proje için yeniden oluşturmak yerine düzenlemek üzere inşa edildiği şeydir.
Tasarım için OpenCode vs Codex vs Claude Code vs Cursor
Tasarım işi için tek bir kazanan yoktur — her ajanın farklı bir gücü vardır ve deneyimli ekipler onları üst üste koyar. Adil bir özet:
OpenCode — Açık kaynak ve modelden bağımsız; tek bir terminal iş akışı arkasında herhangi bir sağlayıcıyı çalıştırın — BYOK özgürlüğü, model değiştirme, tamamen açık ve yerel öncelikli kurulumlar
Codex — Bir frontend becerisiyle güçlü görsel cila; görüntü anlama — Devredilen asenkron, korumalı alanda derlemeler, taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanı farkındalıklı UX — Frontend mantığı ve büyük bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel yap-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Toplulukta tekrar eden yargı, beğeninin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan varsayılan olarak genel bir estetiğe yönelir. Çözülmesi gereken asıl sorun budur — ve bu, model şeklinde değil, tasarım aracı şeklindedir; bu yüzden OpenCode gibi açık bir ajan, açık bir tasarım katmanıyla tam da bu kadar iyi eşleşir.
Ajan — Tasarım gücü — En uygun olduğu alan
Tuzaklar ve “AI Slop” Görünümünden Kaçınmak
Yapay zeka tarafından üretilen tasarımla ilgili en yaygın şikayet, genel görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir yapay zeka yaptı diye bağıran” Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI metinlerine sızan talimatlar yer alıyor. Bunların hiçbiri OpenCode'a özgü değil; bunlar, herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.
Estetik bir beceri ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Düzenlerin mobilde sessizce bozulmaması için kesme noktaları arasında işleyin ve kendi kendini kontrol edin.
Token'lar ve referanslar sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki en büyük tek kaldıraçtır.
Kuralları AGENTS.md'ye kodlayın: “hero kart yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Her önlemin, hangi modeli çalıştırdığınızdan bağımsız olarak, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
OpenDesign içinde OpenCode ile tasarlamak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. OpenCode'u birinci taraf bir bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kitaplığı, yapılandırılmış bir render işlem hattı ve yerel bir masaüstü UI ile sarar — böylece herhangi bir ajanı iyi yapan tasarım bağlamı, her seferinde elle bir araya getirilmek yerine ilk çalıştırmadan itibaren oradadır. Her iki proje de açık kaynaklı ve yerel öncelikli olduğundan bu eşleşme doğal bir uyum sağlar.
Kendi model sağlayıcınızın API anahtarıyla kimlik doğrulayın (BYOK) — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden proxy'lenmez.
Herhangi bir sağlayıcı ve model, bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
Her eser ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi deponuzda bulunur.
Aynı OpenCode ajanı, aynı model özgürlüğü — üstelik çevresinde gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışıyla. Yerel öncelikli ve Apache-2.0'dır; böylece işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i kurun ve ajanınız olarak OpenCode'u seçin.
Bu hangi OpenCode?
github.com/anomalyco/opencode adresindeki açık kaynak terminal ajanı (eski adıyla sst/opencode), Anomaly tarafından sürdürülür. Benzer adlı araçlarla karıştırılmamalıdır.
OpenDesign, OpenCode ile aynı proje mi?
Hayır. İkisi de açık kaynaklıdır, ancak ayrı projelerdir. OpenDesign, OpenCode'u birinci taraf ajan bağdaştırıcısı olarak entegre eder.
OpenCode 
OpenDesign 
