OpenCode 
OpenDesign OpenDesign'da OpenCode ile arayüzler nasıl tasarlanır: herhangi bir şey üretilmeden önce bağlanan design.md, seçtiğiniz sağlayıcı, brief'ten incelenmiş dosyaya kadar tek bir paylaşımlı gelen kutusu görevi ve başlamadan önce bilinmesi gereken sınırlar.
“Varsayılanlara değil,
design.md'ye dayanan paylaşımlı bir gelen kutusu.”
BU OPENCODE KILAVUZUNA ÜÇ YOL
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun KURULUMTemiz bir makineden UI oluşturabilen ve doğrulayabilen bir OpenCode'a giden tam yol burada.
Kuruluma git KARŞILAŞTIRMAOpenCode, tasarım işleri için Codex, Claude Code, Cursor'dan nasıl farklılaşır ve başka bir workflow ne zaman seçilmelidir.
Karşılaştırmayı görünEksiksiz Bir OpenCode Tasarım Görevi
Baştan sona gösterilen tek bir görev: teslim ettiğiniz brief ve kısıtlar, geri gelen artifact ve bitmeden önce yine de yaptığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş örnekleyici bir örnektir, kaydedilmiş bir OpenCode çalıştırması değildir.
BriefPaylaşılan bir ekip gelen kutusu tasarlayın: sahipleri gösteren bir konuşma listesi, bir konu görünümü ve müşteri bağlamını içeren sağ bir panel. Oluşturmadan önce design.md sistemini bağlayın. Masaüstü ve telefon.
data-od-id kancalarına sahip kendi kendine yeterli tek bir HTML dosyasıBrief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
Düzeni planlar, HTML, CSS ve JavaScript'i yazar ve talep üzerine gözden geçirir.
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
8px ızgarasında üç panel; bağlam paneli, konu panelinden önce daralır.
Önce sahip ve konu; vurgu rengi sadece “bizden yanıt bekleyen” öğeleri işaretler.
Önce liste, dokununca konu görünümü; bağlam paneli bir sayfaya dönüşür.
Sahibe göre filtreleyin, bir konuyu açın, paneli açıp kapatın, bir yanıt gönderin.
Uygunluk
Uyumluluk
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan OpenCode'u kapsar. Yayınlanan referanslar 6 Eylül 2026 tarihinde kontrol edilmiştir.
OpenCode, github.com/anomalyco/opencode adresinde Anomaly (SST ekibi) tarafından geliştirilen açık kaynaklı (MIT) bir terminal yapay zeka kodlama ajanıdır — bir TUI ile masaüstü ve IDE yüzeyleri sunar. Bu sayfa, OpenCode'un kendi arayüzü hakkında değil, OpenDesign aracılığıyla OpenCode ile arayüz tasarlamak hakkındadır. OpenDesign'ın kurulum notları mevcut ajanları listeler.
OpenCode yapılandırması üzerinden sağlayıcı anahtarları (BYOK). OpenCode, kendi yapılandırması üzerinden sağlayıcı anahtarlarınızı kullanır (BYOK) — hiçbir şey vekaleten iletilmez. Bu sayfa bir kota veya fiyat garantisi vermez.
Masaüstü derlemeleri için indirme sayfasını kontrol edin. Kaynak hızlı başlangıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırmaya uygulanır, bir masaüstü paketi yüklemeye değil. Uyumlu minimum OpenCode sürümü: burada doğrulanmadı.
Yüklü sürümünüzde gösterilen bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. OpenCode'un bu görevi ele aldığını ve artifact'ın açıldığını doğrulayın. Sadece indirme işlemi, çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Önce indirin, yüklü sürümünüz için OpenCode kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu izlemek için OpenDesign'ı kaynaktan derlemeniz gerekmez.
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinYüklü sürümünüzdeki OpenCode talimatlarını izleyin. OpenCode, kendi yapılandırması (BYOK) üzerinden sağlayıcı anahtarlarınızı kullanır — hiçbir şey proxy'lenmez.
# 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 keyYayınlanan kılavuzdaki OpenCode kurulum notlarından alınmıştır; güncel komut için satıcı belgelerini kontrol edin.
Bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.
Bir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Design kurallarımı kullanın. Masaüstü ve mobil genişliklerde kontrol edin.
OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
OpenCode tasarım iş akışı
Aynı ekip gelen kutusu görevi, brief'ten doğrulanmış dosyaya kadar adım adım. Her adımda sizin sağladığınız şey, OpenCode'un yaptığı şey, OpenDesign'ın kattığı şey ve sizin kontrol ettiğiniz şey listelenir.
Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.
Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.
OpenCode kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve sabit hook'lar.
Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. Tasarımın değerlendirildiği yer burasıdır.
data-od-id hedeflerini açığa çıkarır.Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.
Kaynaklar
Yayınlanan kılavuzda listelendiği şekliyle, OpenCode ile tasarım yapmak için eğitimler, belgeler ve adım adım anlatımlar.
OpenCode'un OpenDesign içinde üretebileceği artifact türleri, tür başına bir skill.
OpenCode herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenler.
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
SSS
Küçük bir görevle başlayın, gidiş-dönüşü değerlendirin, ardından gerçek brief'i getirin. Kurulumunuza uyan seçeneği seçin; sayfa bunu algılamaz.