Trae CLI ile
OpenDesign’da
tasarlayın.

docs-product-landing.html · 1440pxsearch · analyticssearch · analytics

4Teslimden Önce İnceleme

1. 1

   OpenDesign Masaüstü Uygulamasını İndirin

   Bilgisayarınıza uygun paketi seçin, kurun ve uygulamayı açın.

   OpenDesign'ı indirin

   KONTROL NOKTASI

   Masaüstü uygulaması açılır. Zaten kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok.
2. 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 NOKTASI

   Hedeflenen ajanı ve hesabı doğrulayın. Kullanılamıyorsa, daha büyük bir görev denemeden önce uyumluluğu kontrol edin.
3. 3

   Tek Bir Küçük Trae CLI Görevi Çalıştırın

   Bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilmeniz için küçük bir brief kullanın.

   Başlangıç brief’i Kopyala

   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.

   KONTROL NOKTASI

   Sonucu açın, kayıt durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan bir dosya, incelemenin sonu değil başlangıcıdır.

OpenDesign'ı kaynak koddan çalıştırmak için bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.

1. 1

   Tasarım Brief'i

   Sade bir dil, üç ile altı satır arasında. Hedef kitleyi, ekranın işlevini ve platformları belirtin.

   • SizBrief'i yazın; varsa referans bir ekran görüntüsü ekleyin.
   • Trae CLIBrief'i ve projenin talimat dosyasını okur; bir şey belirsiz olduğunda sorar.
   • OpenDesignProjeyi, prompt yüzeyini ve ilgili artifact türü için skill'i sağlar.
   • KontrolBrief'in kabul kriterlerini belirttiğini doğrulayın. Bunları şimdi eklemek, üretimden sonra eklemekten daha ucuzdur.

   New project · PromptTrae CLI

   You

   Design the Docsmith landing page: hero, search demo, three benefits, logos. Check each pass in a real browser at 1440 and 390.

   Trae CLI

   Understood. Should the search demo be interactive or a static frame with a focus state? The brief says live-looking.
2. 2

   Tasarım Kısıtları

   Bir design system ve birkaç katı kural. Marka uyumlu bir çıktıyı sıradan bir görünümden ayıran şey budur.

   • SizBir design system seçin; breakpoint'leri ve kullanılması gereken bileşenleri belirtin.
   • Trae CLIBir satır yazmadan önce DESIGN.md token'larını ve tutum kurallarını bağlama yükler.
   • OpenDesignDesign-system kütüphanesini sunar ve seçilen olanı skill şablonuna bağlar.
   • KontrolToken'lar markanızla eşleşir. Bir vurgu rengi, doğru fontlar, doğru radius.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Arayüzü Oluştur

   Trae CLI kendi kendine yeten bir HTML dosyası yazar: yerleşim, stiller, etkileşimler ve kararlı bağlantı noktaları.

   • SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
   • Trae CLIBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanları düzeltir.
   • OpenDesignArtifact'ı proje klasörüne kaydeder ve önizleme için indeksler.
   • KontrolHenüz yok. Dosyayı kaynak koddan değil, render edildikten sonra değerlendirin.

   Project files3 files

   • docs-product-landing.htmlnew
   • trae_config.yamlbound
   • DESIGN.mdread
4. 4

   Önizleme

   Dosya, istediğiniz genişliklerde OpenDesign içinde render edilir. Tasarımın değerlendirildiği yer burasıdır.

   • SizGenişlikleri değiştirin, etkileşimlere tıklayın, öğeler üzerine yorum bırakın.
   • Trae CLIÖnizleme üzerindeki yorumlarınızı okur ve bir sonraki revizyonu hazırlar.
   • OpenDesignÖnizlemeyi render eder, yorumlar ve düzenlemeler için data-od-id hedeflerini açığa çıkarır.
   • KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.

   Preview · 390pxComment mode

   Comment on · demo

   Static frame with a real focus state is enough; no fake typing animation.

   Comment on · logos

   Logo row scrolls on the phone; do not shrink logos below 24px.
5. 5

   Revize Et ve Doğrula

   Önizlemede öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosyadır; hiçbir şey sessizce üzerine yazılmaz.

   • SizYorumları isteklere dönüştürür; görevin ne zaman tamamlandığına karar verirsiniz.
   • Trae CLIDeğişiklikleri olduğu yerde uygular ve dosyayı yeniden çalıştırır.
   • OpenDesignSürümleri yan yana tutar; işiniz bittiğinde bir görüntü veya HTML dışa aktarır.
   • KontrolÖnce sadece değişen alanı, ardından her bir kırılma noktasında sayfanın tamamını bir kez yeniden kontrol edin.

   Verification · v23 of 4

   • ✓Demo has a focus state
   • ✓Logo row scrolls at 390px
   • ✓No horizontal scroll at 390px
   • Browser pass at both widths — checked by you