Tasarım için OpenCode.

OpenCode gerçekte nedir

OpenCode, SST'nin (Anomaly Innovations) arkasındaki ekip tarafından sürdürülen, terminal için inşa edilmiş açık kaynaklı bir AI kodlama ajanıdır. Reponuzu okur, komutları çalıştırır, dosyaları düzenler ve büyük bir dil modeliyle konuşur — ama sağlayıcıya bağlı ajanların aksine, kendi modelini sunmaz. Onu istediğiniz herhangi bir sağlayıcıya ve modele yönlendirir ve kendi anahtarınızı getirirsiniz.

Aynı motorun üzerinde bir masaüstü uygulaması ve IDE eklentileriyle birlikte bir terminal UI'sı (TUI) olarak çalışır. Kaputun altında bir istemci/sunucu mimarisi kullanır, böylece işi yapan ajan, onu sürdüğünüz yüzeyden ayrıştırılmıştır. İki yerleşik ajan — build ve plan — Tab tuşuyla geçiş yapar.

• 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 provider/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.
• Talimat dosyası: OpenCode, proje kuralları için projenizdeki bir AGENTS.md dosyasını (araçlar arası standart, CLAUDE.md ile de uyumlu) okur — 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ı, kısayol tuşlarını ve özel komutları destekler, ayrıca işbirliği için paylaşılabilir oturum bağlantıları sunar.

• Sürdüren: SST / Anomaly Innovations (açık kaynaklı proje)
• Kimlik bilgisi: kendi model sağlayıcı API anahtar(lar)ınız — BYOK, sağlayıcı kilidi yok
• Lisans: MIT, açık kaynak

Açık, her-model ajanı tasarım çalışmasına neden uyar

OpenCode'un, bir sağlayıcı ajanı gibi tek bir “tasarım modeli” yoktur — ve asıl mesele de budur. Modelden bağımsız ve açık olduğundan, aynı tasarım iş akışını şu anda frontend'de en iyi olan modelde çalıştırabilir, sonra değiştirebilir veya yerel bir modele geri dönebilirsiniz, hepsi kurulumunuzu değiştirmeden.

Ama model seçimi tek başına zevk satın almaz. Her kodlama ajanı gibi, OpenCode da ona kısıtlar vermediğiniz sürece jenerik UI üretir. İyi tasarım çıktısı, sağladığınız üç girdiden gelir.

• Bir tasarım sistemi: Ajanın yeniden kullandığı gerçek token'lar, ilkeller ve kurallar, böylece çıktı jenerik bir görünüme dönmek yerine bir markayla eşleşir.
• Estetik bir skill: Gerçek bir zevki dayatan özenle seçilmiş bir skill — ölçülü hareket, marka öncelikli hiyerarşi, en fazla iki yazı tipi ve bir vurgu rengi — ve ajanın oluşturmadan önce bir yöne bağlanmasını sağlar.
• Somut referanslar: Gerçek referans görseller ve birden çok durum (masaüstü ve mobil, hover, boş, yükleniyor), tek bir hero görseli değil.

Ders: OpenCode size model özgürlüğü verir, ama zevk yine de özenle seçilmiş bir tasarım bağlamından gelir. Open Design tam olarak bu girdileri paketler; ikisinin neden birbirine uyduğunun nedeni de budur — her ikisi de açık kaynaklı ve yerel önceliklidir (daha fazlası aşağıda).

OpenCode'u tasarım çalışması için sıfırdan kurun

Temiz bir makineden, UI oluşturabilen ve doğrulayabilen bir OpenCode'a giden tam yol şudur.

# 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

• Tasarım kurallarınızı kodlayın: Token'larınızı, ilkellerinizi ve kurallarınızı AGENTS.md (veya ondan referans verilen bir DESIGN.md) içine koyun, böylece çıktı jenerik bir görünüme dönmek yerine bir markayla eşleşsin. 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ğundan, tasarım geçişi için şu anda frontend'de en güçlü olan sağlayıcı/modeli seçin — ve iş akışınızın geri kalanını değişmeden bırakın.

Ekran görüntüsünden UI'a iş akışı

Herhangi bir ajanla en yüksek kaldıraçlı tasarım döngüsü, bir referans görseli çalışan, duyarlı bir UI'a dönüştürmek ve eşleşene kadar yinelemektir. Aynı beş adımlı biçim OpenCode'da da geçerlidir.

1. Sahip olduğunuz 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.
2. Komutta spesifik olun; belirsiz komutlar jenerik UI üretir.
3. Bir tasarım sistemi hazırlayın ve OpenCode'a token'ların ve kanonik ilkellerin nerede yaşadığını söyleyin (AGENTS.md içinde).
4. Bir dev sunucusu çalıştırın ve ajanın gerçek bir tarayıcıda işlemesini sağlayın, sonucu kontrol etmek için kırılma noktalarına yeniden boyutlandırarak.
5. OpenCode'un uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamasın.

TUI'da çalışma dizininizin bulanık bir aramasını yapmak için dosyalara @ ile referans verin, satır içi shell komutlarını başta bir ! ile çalıştırın ve eylemleri / komutlarıyla sürün. Ardından somut kısıtlarla komut verin:

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.

Komutları küçük ve odaklı tutun, iyi yinelemeleri commit edin 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 edilsin.

AGENTS.md, MCP ve paylaşılabilir oturumlar

Üç genişletme noktası, OpenCode'u sürekli tasarım çalışması için pratik kılar ve üçü de açık bir tasarım iş akışına temizce eşlenir.

• AGENTS.md kuralları: Proje kuralları, repo kökündeki bir AGENTS.md içinde yaşar (veya ~/.config/opencode/AGENTS.md içindeki global kurallar). Her çalıştırmada okunan, tasarım kurallarınız için kalıcı evdir ve diğer ajanların kullandığı CLAUDE.md dosyalarıyla uyumludur.
• MCP sunucuları: OpenCode, mcp anahtarı altında yapılandırılan hem yerel (command) hem de uzak (URL) MCP sunucularını destekler — yalnızca OpenCode'da değil, ajanlar arasında çalışan tasarım bağlamı ve harici araçları getirmenin taşınabilir yolu.
• Paylaşılabilir oturumlar: /share komutu, işbirliği veya inceleme için bir konuşmaya genel bir bağlantı oluşturur ve /unshare onu iptal eder — bir tasarım geçişi üzerine geri bildirim almak için kullanışlıdır.

Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam olarak Open Design'ın, her proje başına yeniden oluşturmak yerine düzenlemek için inşa edildiği türden şeyler.

Tasarım için OpenCode, Codex, Claude Code ve Cursor

Tasarım çalışması için tek bir kazanan yoktur — her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları üst üste yığar. Adil bir özet:

Tekrarlanan topluluk kararı, zevkin insanlardan geldiğidir: hepsi skill'ler, referanslar ve kısıtlar olmadan jenerik bir estetiğe varsayılan olarak kayar. Çözülmesi gereken asıl sorun budur — ve bu sorun, model biçimli değil, tasarım aracı biçimlidir; OpenCode gibi açık bir ajanın açık bir tasarım katmanıyla bu kadar iyi eşleşmesinin nedeni de tam olarak budur.

Tuzaklar ve “AI çöplüğü” görünümünden nasıl kaçınılır

AI tarafından üretilen tasarımla ilgili en yaygın şikayet, jenerik görünmesidir — yumuşak degradeler, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir AI yaptı diye bağıran” bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI metnine sızan talimatlar yer alır. Bunların hiçbiri OpenCode'a özgü değildir; herhangi bir ajan özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan budur.

• Estetik bir skill ekleyin: Özenle seçilmiş bir tasarım skill'i, 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: Kırılma noktaları boyunca işleyin ve kendi kendini kontrol edin, böylece düzenler mobilde sessizce bozulmasın.
• Token ve referans 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 içinde kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” gibi kuralları, ajanın her çalıştırmada okuduğu yere koyun.

Her hafifletmenin, 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ı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı zahmettir.

Open Design içinde OpenCode ile tasarım

Open Design, yukarıdaki iş akışının sürekli istediği açık kaynaklı tasarım katmanıdır. OpenCode'u birinci taraf bir adaptör olarak ele alır ve onu özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü UI'sı ile sarmalar — 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 önceliklidir, bu da eşleşmeyi doğal bir uyum haline getirir.

1. Open Design'ı kurun ve ajanınız olarak OpenCode'u seçin.
2. Kendi model sağlayıcı API anahtarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.
3. Herhangi bir sağlayıcı ve model seçin, artı bir tasarım sistemi ve bir skill, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.
4. Her artefakt ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi reponuzda yaşar.

Aynı OpenCode ajanı, aynı model özgürlüğü — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, bu yüzden çalışmanız veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.

Sıkça sorulan sorular

1. 01 OpenCode gerçekten tasarım çalışması yapabilir mi? +

   Evet — bağlamda estetik bir skill, bir tasarım sistemi ve gerçek referans görsellerle OpenCode üretim kalitesinde, duyarlı UI üretir ve bunu bir tarayıcıda doğrulayabilir. Modelden bağımsız olduğundan, şu anda frontend'de en iyi olan hangi modelse onu çalıştırırsınız. Bu özenle seçilmiş bağlam olmadan jenerik bir görünüme dönme eğilimindedir; Open Design'ın doldurduğu boşluk da budur.

2. 02 Tasarım için OpenCode ile hangi modeli kullanmalıyım? +

   Hangisini isterseniz — OpenCode, models.dev aracılığıyla sağlayıcıdan bağımsızdır, böylece Anthropic, OpenAI, Google, OpenRouter veya yerel modelleri aynı iş akışının arkasında çalıştırabilir ve istediğiniz zaman değiştirebilirsiniz. Tasarım çıktısının kalitesi, modelden çok daha fazla skill'inize, tasarım sisteminize ve referanslarınıza bağlıdır.

3. 03 Open Design, OpenCode (SST) ekibi tarafından mı yapıldı? +

   Hayır. Open Design, OpenCode'u bir ajan olarak entegre eden bağımsız bir açık kaynaklı projedir. OpenCode'u yerel öncelikli, açık bir skill ve tasarım sistemi kütüphanesiyle tamamlar.

4. 04 OpenCode ile tasarım yapmak için özel bir aboneliğe ihtiyacım var mı? +

   Hayır — OpenCode BYOK'tur. Kendi model sağlayıcı API anahtarınızı getirirsiniz ve Open Design kimlik bilgilerinizi asla proxy'lemez. Sağlayıcı kilidi yoktur.

5. 05 Frontend tasarımı için OpenCode mu, Codex mi yoksa Claude Code mu? +

   Hepsi güçlüdür ve birçok ekip bunları üst üste yığar. OpenCode'un üstünlüğü tamamen açık kaynaklı ve modelden bağımsız olmasıdır; Codex devredilen, sandbox'lanmış derlemelerde öne çıkar; Claude Code spesifik, kod tabanının farkında tasarım kararlarıyla bilinir. Open Design, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanızı sağlar.

6. 06 OpenCode'u tasarım bağlamı için nasıl genişletirim? +

   Kuralları AGENTS.md içinde kodlayın, taşınabilir araçlar ve tasarım bağlamı için mcp anahtarı altına MCP sunucuları ekleyin ve inceleme için paylaşılabilir oturumları kullanın. Open Design, özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi sunar, böylece proje başına kurulumu atlarsınız.

7. 07 Open Design, OpenCode veya SST ile bağlantılı mı? +

   Hayır. OpenCode, SST (Anomaly Innovations) tarafından sürdürülen açık kaynaklı bir projedir; Open Design, onu birinci taraf bir adaptör olarak destekleyen bağımsız bir açık kaynaklı projedir.

8. 08 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel önceliklidir. Dosyalarınız, artefaktlarınız ve DESIGN.md'niz kendi reponuzda kalır ve model sağlayıcı kimlik bilgileriniz doğrudan ajanınız tarafından kullanılır, asla Open Design sunucuları üzerinden yönlendirilmez.