DAHA FAZLA OKUMA
Trae CLI için Ek Okumalar
Kılavuzda yayımlandığı şekilde Trae CLI tasarım çalışmaları için eğitimler, belgeler ve adım adım anlatımlar.
Trae CLI 
OpenDesign Trae CLI ile
OpenDesign’da
tasarlayın.
OpenDesign'da Trae CLI ile arayüz tasarlama: getirdiğiniz model, her geçişi kontrol eden gerçek bir tarayıcı, brief'ten incelenmiş dosyaya tek bir landing page görevi ve başlamadan önce bilmeniz gereken sınırlar.
TRAE CLI İÇİN ÜÇ GİRİŞ NOKTASI
Trae CLI için Başlangıç Noktanızı Seçin
BU KILAVUZ · UI TASARIMI
Trae CLI ile Bir Ürün Arayüzü Tasarlayın
Bu yol, brief'i, referansları, tasarım kurallarını ve incelenmiş bir HTML çıktısını kapsar.
Bu kılavuzu okuyun KURULUMTrae CLI'ı Sıfırdan Kurun ve Yapılandırın
Temiz bir makineden, bir kullanıcı arayüzü oluşturup doğrulayabilen bir Trae CLI'a giden yol.
Kuruluma git KARŞILAŞTIRMATrae CLI'ı Diğer Ajanların Yanına Koyun
Trae CLI'ın tasarım işleri için Codex, Claude Code ve Cursor'dan farkı ve başka bir iş akışının ne zaman daha uygun olduğu.
Karşılaştırmayı görünTAM BİR TRAE CLI TASARIM GEÇİŞİ
Trae CLI Tasarım Görevi: Brief Girdi, Arayüz Çıktı
Teslim ettiğiniz brief ve kısıtlamalar, geri dönen çıktı ve işi bitmiş saymadan önce kalan kontroller. Aşağıdaki arayüz, bu sayfa için hazırlanmış açıklayıcı bir örnektir, kaydedilmiş bir Trae CLI çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefBir dokümantasyon ürünü için açılış sayfası tasarlayın: hero, canlı görünen bir arama demosu, üç avantaj ve müşteri logoları. Her geçişi gerçek bir tarayıcıda her iki genişlikte kontrol edin.
- Tasarım sistemiOpenDesign kağıt tuvali: tek yeşil vurgulu Albert Sans
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerArama demosu odak durumu, CTA durumları, logo satırı kaydırma
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2Kim Ne Yapar: Siz, Trae CLI ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Trae CLI
Düzeni planlar, HTML, CSS ve JavaScript'i yazar, ardından istek üzerine revize eder.
- OpenDesign
Tasarım sistemini ve yeteneği sağlar, önizlemeyi oluşturur ve her sürümü bir proje dosyası olarak saklar.
- İnceleme
Görsel hiyerarşi, 8px ızgara aralığı, her iki kırılma noktası ve her etkileşim teslimattan önce kontrol edilir.
3Trae CLI Çıktısı: 1440px ve 390px'te Ürün Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Hero ve avantajlar 8px ızgarada yer alır; arama demosu sabit bir yüksekliği korur, böylece sayfa zıplamaz.
Hiyerarşi
Görsel Hiyerarşi
Başlık, arama demosu, ardından avantajlar; vurgu yalnızca başlat düğmesini işaretler.
Duyarlı
Mobil Düzen
Önce metin, sonra demo, ardından faydalar; logolar kendi satırları içinde yatay olarak kayar.
Etkileşim
Etkileşim Kontrolleri
Demoya odaklanın, her iki CTA'yı takip edin, logo satırını kaydırın.
Uygunluk
Trae CLI Görevin İçin Ne Zaman Uygun, Ne Zaman Değil
Trae CLI Şu Durumlarda Uygundur
- Kendi modelinizi getirin. Tasarım gereği modelden bağımsızdır, böylece arayüz işlerini ön uçunuz hakkında en iyi akıl yürüten LLM sağlayıcısına yönlendirebilir ve daha sonra değiştirebilirsiniz.
- Açık ve yapılandırma odaklı. MIT lisanslı ve bir trae_config.yaml dosyasında sabitlenmiştir, böylece ajan davranışı bir ekip genelinde şeffaf ve tekrarlanabilir kalır.
- Gerçek tarayıcı döngüsü. Dosya, kabuk ve akıl yürütme araçları, oluşturmasına, bir geliştirme sunucusu çalıştırmasına ve kullanıcı arayüzünü kırılma noktaları arasında doğrulamasına olanak tanır.
- Başlamak ücretsiz. Ajanın kendisi ücretsizdir; tek maliyetiniz seçtiğiniz sağlayıcıdır — veya yerel bir Ollama modeliyle hiçbir maliyet olmaz.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Üretilen ürün HTML'dir, düzenlenebilir bir tasarım belgesi değildir. Gereken varlık formatı için ayrı bir vektör iş akışına bakın.
- Referansınız ve kısıtlamanız yok. Bir tasarım sistemi veya örnekler olmadan, çıktı genel bir görünüme yönelir; önce brief'i yazın.
- Bu ajanın gerektirdiği kimlik bilgisine sahip değilsiniz. Gerekli: Kendi LLM sağlayıcı API anahtarınız (kendi anahtarınızı getirin) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel Ollama. OpenDesign kimlik bilgisi sağlamaz veya bunlara aracılık etmez.
- Ekibiniz Qoder veya Kimi'de çalışıyor. Bu ajanların kendi sayfaları vardır; çalışma alanı örtüşse bile kurulum ajana göre değişir. İlgili ajanlar bölümüne bakın.
Uyumluluk
Başlamadan Önce Trae CLI Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması aracılığıyla bağlanan Trae CLI'ı kapsar. Yayınlanan referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıTrae CLI, ByteDance tarafından
Trae CLI, ByteDance'in açık kaynaklı (MIT) terminal AI ajanıdır ve trae-agent projesi olarak sunulur. Kod tabanınızı okur, dosyaları düzenler ve doğal dil görevlerinden kabuk komutları çalıştırır. OpenDesign'in Trae IDE'yi değiştirip tamamlamadığına karar vermeniz gerekiyorsa, OpenDesign vs Trae karşılaştırması bölümüne bakın. Bu sayfa, Trae CLI'ın kendi arayüzüyle değil, OpenDesign aracılığıyla Trae CLI ile arayüz tasarlama ile ilgilidir. OpenDesign'in kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaKendi LLM sağlayıcı API anahtarınız (BYOK) —
Kendi LLM sağlayıcı API anahtarınız (BYOK) — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel Ollama. Kendi LLM sağlayıcı anahtarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır. Bu sayfa kota veya fiyat vaat etmez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü sürümleri için indirme sayfasını kontrol edin. Kaynak hızlı başlangıç kılavuzundaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırma için geçerlidir, masaüstü paketi yüklemek için değil. Uyumlu minimum Trae CLI sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Kurduğunuz sürümde gösterilen bağlantı talimatlarını takip edin, ardından küçük bir görev çalıştırın. Trae CLI'nin bunu işlediğini ve üretilen dosyanın açıldığını doğrulayın. Sadece indirme işlemi, çalışan bir bağlantı kurulduğunu göstermez.
Masaüstü uygulamasıyla başlayın
Üç Hamlede Trae CLI Kurulumu
Önce indirin, yüklü sürümünüz için Trae CLI kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yol için OpenDesign'i kaynaktan derlemek gerekli değildir.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten yüklü mü? Bir sonraki adıma geçin; tekrar indirmeye gerek yok. - 2
Trae CLI Bağlantınızı Hazırlayın
Kurduğunuz sürümdeki Trae CLI talimatlarını takip edin. Kendi LLM sağlayıcı anahtarınızla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.
Trae belgeleri# 1. Get Trae CLI (trae-agent) from source — needs uv git clone https://github.com/bytedance/trae-agent.git cd trae-agent uv sync --all-extras source .venv/bin/activate # 2. Authenticate by pointing it at your LLM provider key # set it in the environment (or a trae_config.yaml file) export OPENAI_API_KEY=... # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.Yayınlanan kılavuzdaki Trae CLI kurulum notlarından; geçerli komut için sağlayıcı belgelerine bakın.
KONTROL NOKTASIHedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin. - 3
Tek Bir Küçük Trae CLI Görevi Çalıştırın
Tüm döngüyü, bir revizyon dahil, değerlendirebilecek kadar küçük bir brief ile başlayın.
Başlangıç brief’iBir 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.
KONTROL NOKTASISonucu açın, kaydetme durumunu test edin ve belirli bir değişiklik isteyin. Üretim incelemeyi başlatır; onu bitirmez.
OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
Trae CLI tasarım iş akışı
Beş Hamlede Trae CLI Tasarım İş Akışı
Bir ürün sayfası, Trae CLI'ın brief, kurallar, derleme, tarayıcı incelemesi ve revizyon geçişinden geçer. Her adım, sizin girdinizi, Trae CLI'ın eylemini, OpenDesign'in katkısını ve sizin kontrolünüzü adlandırır.
- 1
Tasarım Brief'i
Üç ila altı düz satır: hedef kitle, ekran amacı, hedef platformlar.
- SizBrief'i taslağını hazırlayın ve varsa referans ekran görüntüsünü ekleyin.
- Trae CLIBrief'i ve repo talimat dosyanızı ayrıştırır; oluşturmadan önce belirsizlikleri ortaya çıkarır.
- OpenDesignProjeyi, istem yüzeyini ve çıktı türü yeteneğini sağlar.
- KontrolKabul kriterlerinin brief'te olduğundan emin olun; bunları üretimden önce belirlemek, sonradan uyarlamaktan daha az maliyetlidir.
- 2
Tasarım Kısıtları
Bir tasarım sistemi artı katı kısıtlamalar, markaya uygun çıktı ile varsayılan AI stili arasındaki çizgidir.
- SizBir tasarım sistemi seçin; kırılma noktalarını ve kullanılması gereken bileşenleri listeleyin.
- Trae CLIHerhangi bir işaretleme yazmadan önce DESIGN.md belirteçlerini ve duruş kurallarını yükler.
- OpenDesignTasarım sistemi kitaplığını gönderir ve seçilen sistemi yetenek şablonuna bağlar.
- KontrolBelirteçlerin markanızla eşleştiğini kontrol edin: tek vurgu, doğru yazı tipleri, doğru yarıçap.
- 3
Arayüzü Oluştur
Trae CLI, kendi kendine yeten bir HTML dosyası oluşturur: düzen, stiller, etkileşimler ve kararlı kancalar.
- SizBekleyin veya açıklayıcı bir soruyu yanıtlayın; yapılandırılacak bir şey yok.
- Trae CLIBölümleri planlar, HTML, CSS ve JavaScript yazar, dosyayı çalıştırır ve hataları giderir.
- OpenDesignÇıktıyı proje klasöründe saklar ve önizleme için dizinler.
- KontrolBekleyin. Oluşturulan dosyayı değerlendirin, kaynağı değil.
- 4
Önizleme
OpenDesign dosyayı belirttiğiniz genişliklerde oluşturur. Bu, yargı noktasıdır.
- SizGenişlikleri değiştirin, etkileşimleri deneyin, belirli öğeler hakkında yorum yapın.
- Trae CLIÖnizleme yorumlarınızı okur ve bir sonraki revizyonu hazırlar.
- OpenDesignÖnizlemeyi oluşturur ve yorumlar ve düzenlemeler için
data-od-idhedeflerini açığa çıkarır. - KontrolHiyerarşi, kontrast, 390px taşması, odak durumları ve ölçülü vurgu kullanımı.
- 5
Revize Et ve Doğrula
Değişiklik istemek için önizleme öğelerini işaret edin. Her revizyon yeni bir dosya olur; sessiz üzerine yazma yok.
- SizYorumları isteklere dönüştürün ve görevin ne zaman bittiğine karar verin.
- Trae CLIDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignSürümleri yan yana tutar ve sonunda bir görseli veya HTML'i dışa aktarır.
- KontrolÖnce değişen alanı yeniden kontrol edin, ardından her kırılım noktası için tam sayfayı bir kez kontrol edin.
Kaynaklar
Trae CLI Tasarım Kaynakları
Skill'ler Skill'lere göz atın Tasarım sistemleri Sistemlere göz atın Şablonlar Şablonlara göz atın
Tasarım Skill'leri
Trae CLI'nin OpenDesign içinde üretebileceği yapıt türleri; her tür için bir beceri.
Tasarım Sistemleri
Trae CLI üretmeden önce bağlanacak marka token'ları ve bileşenler.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Trae CLI Sınırları, Elle Kontroller ve Yedek Yollar
- KapsamModelden bağımsızdır — kendi LLM sağlayıcı anahtarınızı getirirsiniz (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel bir Ollama modeli) — ve davranışı, commit edebileceğiniz bir trae_config.yaml dosyasında sabitlenir. Bu sayfa, Trae CLI'yi OpenDesign bağlantılı bir ajan olarak ele alır; her Trae CLI özelliğinin tam bir incelemesi olarak değil.
- Kullanım LimitleriMaliyet ve kullanım sınırları, sağladığınız kimlik bilgisine (kendi LLM sağlayıcı API anahtarınız — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel Ollama) göre izlenir. Burada ücretsiz kota iddiasında bulunulmamaktadır.
- AğYerel proje dosyaları çevrimdışı çıkarım anlamına gelmez. Hassas girdiler göndermeden önce ajanınızın sağlayıcı ayarlarını ve veri politikalarını kontrol edin.
- Çıktı HTML'dirTeslimatlar HTML dosyalarıdır, vektör tasarım dosyaları değildir.
- Manuel İncelemeÖnizlemede erişilebilirliği, gerçek içeriği, marka uyumunu ve etkileşim doğruluğunu siz incelersiniz. Ajanın kendi kendini kontrolünü ilk tur olarak değerlendirin.
- Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, yüklü sürümünüzün bağlantı talimatlarına ve kimlik doğrulamasına başvurun. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan yapıtı saklayın.
SSS
Trae CLI ve OpenDesign Hakkında Sık Sorulan Sorular
Trae CLI Gerçekten Tasarımı Üstlenir mi?
Evet — estetik bir skill, bir design system ve gerçek referans bağlamı ile Trae CLI, üretim kalitesinde, responsive bir UI ortaya çıkarır; model bağımsız olduğu için işi frontend'iniz hakkında en iyi akıl yürüten sağlayıcıya yönlendirebilirsiniz. Bu bağlam olmadan genellikle sıradan bir görünüme kayar; OpenDesign'ın kapattığı boşluk da budur.
Trae CLI ile Tasarımın Bir Maliyeti Var mı?
Trae CLI'nin kendisi ücretsiz ve açık kaynaktır (MIT). Kendi LLM sağlayıcı anahtarınızı siz sağlarsınız, dolayısıyla tek maliyetiniz o sağlayıcının uyguladığı ücrettir — Ollama üzerinden yerel bir model çalıştırıyorsanız hiçbir ücret yoktur. OpenDesign her durumda kimlik bilgilerinizi asla proxy'lemez.
Trae CLI'yi Tasarıma Uygun Kılan Nedir?
İki şey: model bağımsızdır, dolayısıyla frontend işine en uygun LLM sağlayıcısını siz seçersiniz; ve tamamen açık ve yapılandırma tabanlıdır, dolayısıyla davranışı bir ekip içinde şeffaf ve tekrarlanabilirdir. Ancak beğeni hâlâ sağladığınız design system, skill ve referanslardan gelir.
Frontend Tasarımı İçin Trae CLI mi Claude Code mu?
Her ikisi de yetenekli. Claude Code, kod tabanına özgü, kod tabanını dikkate alan tasarım kararlarıyla tanınır; Trae CLI'nin avantajı açık kaynak olması ve sağlayıcı esnekliğidir, böylece hiçbir zaman bir tek modele bağlı kalmazsınız. Birçok ekip her ikisini de kullanır — OpenDesign, tasarım workflow'unuzu değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.
OpenDesign'ın Trae CLI'yi Çalıştırmak İçin İhtiyaç Duyduğu Ne?
OpenDesign, Trae CLI'nin trae-cli ikili dosyasını Agent Client Protocol (ACP) üzerinden çalıştırır ve yapılandırdığınız LLM sağlayıcı anahtarını kullanır. Trae CLI'yi ajanınız olarak seçer, bir sağlayıcıya yönlendirirsiniz ve OpenDesign bunun etrafına derlenmiş tasarım bağlamını sağlar.
Trae CLI Nedir
Trae CLI, ByteDance’in açık kaynaklı trae-agent projesinden gelen komut satırı ajanıdır. Deponuzu okur; dosyaları görüntüler, oluşturur ve düzenler; kalıcı bir ortamda shell komutları çalıştırır — yalnızca satırları tamamlamak yerine doğal dil görevlerinden işi planlar ve doğrular. MIT lisanslıdır ve şeffaf, modüler bir mimari etrafında inşa edilmiştir; böylece incelenmesi ve genişletilmesi kolaydır. ByteDance’in VS Code tabanlı AI editörü olan ayrı Trae IDE’den farklıdır, ancak ikisi de aynı satıcıdan gelir.
Tasarım çalışmaları için iki özellik öne çıkar. Modelden bağımsızdır — LLM sağlayıcısını siz seçersiniz, böylece hiçbir zaman tek bir modelin güçlü yönlerine veya sınırlarına bağlı kalmazsınız. Ve tamamen açık ve yapılandırma odaklıdır; davranışı, araçları ve sağlayıcısı barındırılan bir hizmetin arkasında gizlenmek yerine projenizle birlikte sürüm kontrolünde sabitlenebilir.
Çalıştırma ve etkileşimli modlar: Trae CLI, `trae-cli run "..."` ile tek bir görevi çalıştırır veya `trae-cli interactive` ile sürekli bir oturum sürdürür — tasarım kurallarınıza göre bir arayüz üzerinde yineleme yapmak için doğal yer.
Yerleşik araçlar: Dosya düzenleme, bash/shell yürütme ve yapılandırılmış akıl yürütme araçlarını kutudan çıktığı gibi sunar; böylece terminalden çıkmadan derleyebilir, bir geliştirme sunucusu çalıştırabilir ve çalışma zamanı hatalarını inceleyebilir.
Kendi sağlayıcınızı getirin: Güvendiğiniz sağlayıcı için bir API anahtarı sağlarsınız — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel bir Ollama modeli — ortam değişkenleri veya bir yapılandırma dosyası aracılığıyla.
Kimlik bilgisi: bir LLM sağlayıcısı API anahtarı (BYOK) — örn. OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel bir Ollama modeli
Satıcı: ByteDance (açık kaynaklı trae-agent projesi)
Lisans: MIT, açık kaynak
Tasarım çalışmaları için iki özellik öne çıkar. Modelden bağımsızdır — LLM sağlayıcısını siz seçersiniz, böylece hiçbir zaman tek bir modelin güçlü yönlerine veya sınırlarına bağlı kalmazsınız. Ve tamamen açık ve yapılandırma odaklıdır; davranışı, araçları ve sağlayıcısı barındırılan bir hizmetin arkasında gizlenmek yerine projenizle birlikte sürüm kontrolünde sabitlenebilir.
Çalıştırma ve etkileşimli modlar: Trae CLI, `trae-cli run "..."` ile tek bir görevi çalıştırır veya `trae-cli interactive` ile sürekli bir oturum sürdürür — tasarım kurallarınıza göre bir arayüz üzerinde yineleme yapmak için doğal yer.
Yerleşik araçlar: Dosya düzenleme, bash/shell yürütme ve yapılandırılmış akıl yürütme araçlarını kutudan çıktığı gibi sunar; böylece terminalden çıkmadan derleyebilir, bir geliştirme sunucusu çalıştırabilir ve çalışma zamanı hatalarını inceleyebilir.
Kendi sağlayıcınızı getirin: Güvendiğiniz sağlayıcı için bir API anahtarı sağlarsınız — OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel bir Ollama modeli — ortam değişkenleri veya bir yapılandırma dosyası aracılığıyla.
Kimlik bilgisi: bir LLM sağlayıcısı API anahtarı (BYOK) — örn. OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure veya yerel bir Ollama modeli
Satıcı: ByteDance (açık kaynaklı trae-agent projesi)
Lisans: MIT, açık kaynak
Modelden Bağımsız Açık Bir Ajan Neden Tasarıma Uyar?
Trae CLI’nin tasarım avantajı, açık ve sağlayıcı esnekliğine sahip olmasından gelir — ancak her ajan gibi, zevkin yine de sağlanması gerekir.
Tasarım gereği modelden bağımsız: Sağlayıcıyı siz seçtiğiniz için, tasarım işini bugün düzen ve frontend kodu hakkında en iyi akıl yürüten modele yönlendirebilir ve daha sonra iş akışınızı değiştirmeden değiştirebilirsiniz.
Açık ve yapılandırma odaklı: Ajan, araçları ve sağlayıcısı, commit edebileceğiniz bir yapılandırma dosyasına sabitlenir; böylece bir ekip, geliştirici başına sapmak yerine her makinede aynı ajan davranışını alır.
Deponuzdaki kurallar: Ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirin — projenizde tutulur — böylece genel bir görünüme varsayılan olarak dönmek yerine bir markaya göre çalışır.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görüntüler.
Ders her ajanın öğrettiği aynı ders: Trae CLI varsayılan olarak zevke sahip değildir. Ona kısıtlamalar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir beceri ve somut referanslar. OpenDesign tam olarak bu girdileri paketler ve bunları ACP üzerinden Trae CLI'ye besler; bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Tasarım gereği modelden bağımsız: Sağlayıcıyı siz seçtiğiniz için, tasarım işini bugün düzen ve frontend kodu hakkında en iyi akıl yürüten modele yönlendirebilir ve daha sonra iş akışınızı değiştirmeden değiştirebilirsiniz.
Açık ve yapılandırma odaklı: Ajan, araçları ve sağlayıcısı, commit edebileceğiniz bir yapılandırma dosyasına sabitlenir; böylece bir ekip, geliştirici başına sapmak yerine her makinede aynı ajan davranışını alır.
Deponuzdaki kurallar: Ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirin — projenizde tutulur — böylece genel bir görünüme varsayılan olarak dönmek yerine bir markaya göre çalışır.
Zevk, sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görüntüler.
Ders her ajanın öğrettiği aynı ders: Trae CLI varsayılan olarak zevke sahip değildir. Ona kısıtlamalar verdiğinizde iyi tasarım üretir — bir tasarım sistemi, estetik bir beceri ve somut referanslar. OpenDesign tam olarak bu girdileri paketler ve bunları ACP üzerinden Trae CLI'ye besler; bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Tasarım için Trae CLI'yi Sıfırdan Kurun
İşte temiz bir makineden UI oluşturup doğrulayabilen bir Trae CLI'ye giden tam yol. Trae CLI, uv ile kaynaktan kurulur, ardından kullanmak istediğiniz LLM sağlayıcısıyla yapılandırılır.
Kurulum sırası: kur → bir sağlayıcı anahtarıyla kimlik doğrula → tasarım kurallarınızı yapılandır → bir beceri ekle → tarayıcı doğrulamasını etkinleştir.
Tasarım kurallarınızı kodlayın: Token'larınızı, temel öğelerinizi ve kurallarınızı depoda tutun ve Trae CLI'yi bunlara yönlendirin; böylece çıktı, genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.
Tarayıcı doğrulaması ekleyin: Trae CLI'nin bir geliştirme sunucusu çalıştırmasını ve gerçek bir tarayıcıda işlemesini sağlayın; böylece yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları arasında kontrol eder.
Komutlar ve sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın; bunlar değişebilir.
Önceki kılavuzdan alınmış tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Kurulum sırası: kur → bir sağlayıcı anahtarıyla kimlik doğrula → tasarım kurallarınızı yapılandır → bir beceri ekle → tarayıcı doğrulamasını etkinleştir.
Tasarım kurallarınızı kodlayın: Token'larınızı, temel öğelerinizi ve kurallarınızı depoda tutun ve Trae CLI'yi bunlara yönlendirin; böylece çıktı, genel bir görünüme varsayılan olarak dönmek yerine bir markayla eşleşir.
Tarayıcı doğrulaması ekleyin: Trae CLI'nin bir geliştirme sunucusu çalıştırmasını ve gerçek bir tarayıcıda işlemesini sağlayın; böylece yalnızca derlemenin geçtiğini doğrulamak yerine çıktısını kesme noktaları arasında kontrol eder.
Komutlar ve sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın; bunlar değişebilir.
# 1. Trae CLI'yi (trae-agent) kaynaktan edinin — uv gerekir
git clone https://github.com/bytedance/trae-agent.git
cd trae-agent
uv sync --all-extras
source .venv/bin/activate
# 2. LLM sağlayıcı anahtarınıza yönlendirerek kimlik doğrulayın
# ortamda (veya bir trae_config.yaml dosyasında) ayarlayın
export OPENAI_API_KEY=... # veya ANTHROPIC_API_KEY, GOOGLE_API_KEY, vb.
# 3. Projenizde bir görev çalıştırın
trae-cli run "Create a hello world page"
# veya bir oturum başlatın:
trae-cli interactive
# 4. Çözümlenen yapılandırmayı kontrol edin (anahtarlar maskelenir)
trae-cli show-configÖnceki kılavuzdan alınmış tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinden doğrulayın.
Referans Görselden Arayüze İş Akışı
Trae CLI ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüyü çalışan, duyarlı bir kullanıcı arayüzüne dönüştürmek ve eşleşene kadar yinelemektir.
Trae CLI modelden bağımsız olduğu için, modeli referanslarınızı iyi işleyen bir sağlayıcıya yönlendirin ve sonucu kontrol etmek için gerçek bir tarayıcıya güvenin.
Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir kahraman çekimi değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) tanımlayın.
İstemde spesifik olun; belirsiz istemler güçlü bir modelle bile genel kullanıcı arayüzü üretir.
Tasarım sisteminizi ve kurallarınızı repoda tutun ve Trae CLI'ye token'ların ve kanonik temel öğelerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Trae CLI'nin gerçek bir tarayıcıda işlemesini sağlayın, sonucu kontrol etmek için kesme noktalarına yeniden boyutlandırın.
Trae CLI'nin uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamakla kalmayın.
Etkileşimli bir oturum çalıştırın ve tek satırlık bir istek yerine somut kısıtlamalar verin:
Önceki kılavuzdan tarihsel komut örneği; geçerli sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Trae CLI modelden bağımsız olduğu için, modeli referanslarınızı iyi işleyen bir sağlayıcıya yönlendirin ve sonucu kontrol etmek için gerçek bir tarayıcıya güvenin.
Sahip olduğunuz en net görsel referanslardan başlayın — ve yalnızca bir kahraman çekimi değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) tanımlayın.
İstemde spesifik olun; belirsiz istemler güçlü bir modelle bile genel kullanıcı arayüzü üretir.
Tasarım sisteminizi ve kurallarınızı repoda tutun ve Trae CLI'ye token'ların ve kanonik temel öğelerin nerede olduğunu söyleyin.
Bir geliştirme sunucusu çalıştırın ve Trae CLI'nin gerçek bir tarayıcıda işlemesini sağlayın, sonucu kontrol etmek için kesme noktalarına yeniden boyutlandırın.
Trae CLI'nin uygulamasını referanslarla karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamakla kalmayın.
Etkileşimli bir oturum çalıştırın ve tek satırlık bir istek yerine somut kısıtlamalar verin:
trae-cli interactive
# in the session:
> Implement the attached reference design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Run the dev server, render it in the browser, and iterate until it
matches the references across breakpoints.Önceki kılavuzdan tarihsel komut örneği; geçerli sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Yapılandırma, araçlar ve sağlayıcılar
Üç uzantı noktası, Trae CLI'yi sürdürülebilir tasarım çalışmaları için pratik hale getirir ve üçü de açık bir tasarım iş akışına temiz bir şekilde eşlenir.
Yapılandırma dosyası: Trae CLI, sağlayıcınızı, modelinizi ve ayarlarınızı sabitleyen bir trae_config.yaml dosyasını okur — ajanın bir projede nasıl çalıştığına dair kalıcı, sürüm kontrol edilebilir bir yuva.
Sağlayıcı seçimi: Birçok sağlayıcıyı (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, Ollama) desteklediği için, tasarım çalışmalarını güvendiğiniz modele yönlendirir ve iş akışınızı yeniden yapılandırmadan değiştirirsiniz.
Yerleşik araçlar: Dosya düzenleme, kabuk ve yapılandırılmış akıl yürütme araçları, terminalden ayrılmadan bağlam toplamasına, derlemesine, bir geliştirme sunucusu çalıştırmasına ve doğrulama döngüsünü yürütmesine olanak tanır.
Bunlar taşınabilir, ajan düzeyinde yeteneklerdir — tam olarak OpenDesign'in proje başına yeniden oluşturmak yerine ACP üzerinden düzenlemek için inşa edildiği türden şeylerdir.
Yapılandırma dosyası: Trae CLI, sağlayıcınızı, modelinizi ve ayarlarınızı sabitleyen bir trae_config.yaml dosyasını okur — ajanın bir projede nasıl çalıştığına dair kalıcı, sürüm kontrol edilebilir bir yuva.
Sağlayıcı seçimi: Birçok sağlayıcıyı (OpenAI, Anthropic, Google, OpenRouter, Doubao, Azure, Ollama) desteklediği için, tasarım çalışmalarını güvendiğiniz modele yönlendirir ve iş akışınızı yeniden yapılandırmadan değiştirirsiniz.
Yerleşik araçlar: Dosya düzenleme, kabuk ve yapılandırılmış akıl yürütme araçları, terminalden ayrılmadan bağlam toplamasına, derlemesine, bir geliştirme sunucusu çalıştırmasına ve doğrulama döngüsünü yürütmesine olanak tanır.
Bunlar taşınabilir, ajan düzeyinde yeteneklerdir — tam olarak OpenDesign'in proje başına yeniden oluşturmak yerine ACP üzerinden düzenlemek için inşa edildiği türden şeylerdir.
Tasarım için Trae CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI
Tasarım işi için tek bir kazanan yok — her ajanın farklı bir gücü vardır ve deneyimli ekipler onları bir arada kullanır. Adil bir özet:
Trae CLI — Açık kaynak (MIT) ve modelden bağımsız; kendi sağlayıcı anahtarınızı getirin, yapılandırma odaklı ve şeffaf — Ücretsiz, incelenebilir bir ajan ve LLM sağlayıcılarını seçme veya değiştirme özgürlüğü isteyen ekipler
Codex — Bir ön uç becerisiyle güçlü görsel cila; sanal ortamda (sandbox) asenkron derlemeler — Yetkilendirilmiş asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, aralık, tip) ve kod tabanı farkındalıklı UX — Ön uç muhakemesi ve büyük bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel oluştur-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Gemini CLI — Güçlü çok modlu görüntü anlama ve 1M token bağlam; ücretsiz katmanlı açık kaynak — Ekran görüntüsü ağırlıklı çalışma ve tüm bir tasarım sistemini bağlamda tutma
Toplulukta sürekli yinelenen karar, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken asıl sorun budur — ve bu, tasarım aracı biçimindedir, model biçiminde değil.
Ajan — Tasarım gücü — En uygun olduğu
Trae CLI — Açık kaynak (MIT) ve modelden bağımsız; kendi sağlayıcı anahtarınızı getirin, yapılandırma odaklı ve şeffaf — Ücretsiz, incelenebilir bir ajan ve LLM sağlayıcılarını seçme veya değiştirme özgürlüğü isteyen ekipler
Codex — Bir ön uç becerisiyle güçlü görsel cila; sanal ortamda (sandbox) asenkron derlemeler — Yetkilendirilmiş asenkron derlemeler ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, aralık, tip) ve kod tabanı farkındalıklı UX — Ön uç muhakemesi ve büyük bağlamlı yeniden düzenlemeler
Cursor — Canlı önizleme ve satır içi düzenlemelerle görsel oluştur-ve-gör döngüsü — Bir IDE içinde sıkı yinele-ve-izle UI çalışması
Gemini CLI — Güçlü çok modlu görüntü anlama ve 1M token bağlam; ücretsiz katmanlı açık kaynak — Ekran görüntüsü ağırlıklı çalışma ve tüm bir tasarım sistemini bağlamda tutma
Toplulukta sürekli yinelenen karar, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak yönelir. Çözülmesi gereken asıl sorun budur — ve bu, tasarım aracı biçimindedir, model biçiminde değil.
Ajan — Tasarım gücü — En uygun olduğu
Tuzaklar ve “AI Slop” Görünümünden Kurtulma
Yapay zeka tarafından üretilen tasarım hakkındaki 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 bir Inter-ve-mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve UI metinlerine sızan talimatlar yer alır. Bunların hiçbiri Trae CLI'ye özgü değildir; herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.
Bir estetik becerisi ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yönelime bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Trae CLI'nin farklı kesme noktalarında işlemesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmaz.
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ı deponuza 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.
Dikkat edin ki her önlem, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
Bir estetik becerisi ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yönelime bağlanmaya zorlar.
Gerçek bir tarayıcıda doğrulayın: Trae CLI'nin farklı kesme noktalarında işlemesini ve kendi kendini kontrol etmesini sağlayın, böylece düzenler mobilde sessizce bozulmaz.
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ı deponuza 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.
Dikkat edin ki her önlem, ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı angaryadır.
Trae CLI ile OpenDesign İçinde Tasarım Yapmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Trae CLI'ı bir birinci taraf adaptör olarak ele alır — onu trae-cli ikilisi aracılığıyla Agent Client Protocol (ACP) üzerinden sürer — ve onu özenle seçilmiş bir skill ve tasarım sistemi kütüphanesi, yapılandırılmış bir render işlem hattı ve yerel bir masaüstü arayüzü ile sarar; böylece Trae CLI'ı iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. Her ikisi de açık kaynaklı ve yerel öncelikli, bu da eşleşmeyi doğal bir uyum haline getirir.
Kendi LLM sağlayıcı anahtarınızla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.
Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.
Her çıktı ve DESIGN.md dosyası kendi deponuzda bulunur, barındırılan bir bulutta değil.
Aynı Trae CLI ajanı, aynı sağlayıcı anahtarı — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve açık kaynaklıdır, böylece işiniz veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.
OpenDesign'ı yükleyin ve ajanınız olarak Trae CLI'ı seçin.
Kendi LLM sağlayıcı anahtarınızla (BYOK) kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy'lenmez.
Bir tasarım sistemi ve bir skill seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.
Her çıktı ve DESIGN.md dosyası kendi deponuzda bulunur, barındırılan bir bulutta değil.
Aynı Trae CLI ajanı, aynı sağlayıcı anahtarı — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve açık kaynaklıdır, böylece işiniz veya kimlik bilgileriniz hakkında hiçbir şey makinenizden ayrılmaz.
OpenDesign'ı yükleyin ve ajanınız olarak Trae CLI'ı seçin.
OpenDesign, ByteDance ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; Trae, ByteDance'in ticari markasıdır.