DAHA FAZLA OKUMA
Qoder İçin Ek Okumalar
Qoder ile tasarım yapmak için öğreticiler, belgeler ve adım adım anlatımlar, yayımlanan kılavuzda listelendiği şekliyle.
Qoder 
OpenDesign Qoder ile
OpenDesign’da
tasarlayın.
OpenDesign'da Qoder ile arayüz tasarlamanın yolu: deponuz üzerinde spec odaklı bir görev, brief'ten incelenmiş dosyaya kadar bir teslimat metrikleri panosu ve başlamadan önce bilmeniz gereken sınırlar.
Briften arayüze01 / Qoder
FİKRİ SİZ GETİRİN↗
“Bir slayttan değil, repodan gelen
mühendislik metrikleri.”
BU QODER KILAVUZUNA ÜÇ GİRİŞ YOLU
Qoder İle Nereden Başlayacağınızı Seçin
BU KILAVUZ · UI TASARIMI
Qoder İle Bir Ürün Arayüzü Oluşturun
Bu kılavuz: brief, referanslar, tasarım kuralları ve incelenmiş bir HTML sonucu.
Bu kılavuzu okuyun KURULUMQoder'i Sıfırdan Kurun
Temiz bir makineden UI oluşturup doğrulayabilen bir Qoder CLI'a giden tam yol burada.
Kuruluma git KARŞILAŞTIRMAQoder'i Diğer Ajanlarla Karşılaştırın
Qoder'in tasarım işleri için Codex, Claude Code, Cursor'dan farkları ve ne zaman başka bir iş akışı seçmeniz gerektiği.
Karşılaştırmayı görünEksiksiz Bir Qoder Tasarım Görevi
Brief'ten Arayüze: Bir Qoder 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 hazırlanmış örnek niteliğinde bir tasarımdır, kaydedilmiş bir Qoder çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefBir platform ekibi için mühendislik metrikleri panosu tasarlayın: lead time, dağıtım sıklığı, değişiklik hata oranı ve inceleme süresi, bir trend grafiği ve en yavaş pull request'ler. Masaüstü ve telefon.
- Tasarım sistemiOpenDesign kağıt tuvali: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerTakım filtresi, dönem geçişi, PR ayrıntı görünümü
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2İş Bölümü: Siz, Qoder ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Qoder
Düzeni planlar, HTML, CSS ve JavaScript'i yazar ve talep üzerine gözden geçirir.
- OpenDesign
Tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.
- İnceleme
Görsel hiyerarşi, 8px ızgaradaki boşluklar, her iki kesme noktası ve tüm etkileşimler teslimden önce kontrol edilir.
3Qoder Artifact: 1440px ve 390px'de Metrikler Panosu
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Dört kart, trend ve PR listesi tek bir 8px ızgarada; PR başlıkları en fazla iki satıra sarar.
Hiyerarşi
Görsel Hiyerarşi
Lead time önce okunur; vurgu rengi bu haftanın çubuğunu ve ilgi gereken PR'ı işaretler.
Duyarlı
Mobil Düzen
Kartlar iki sütun halinde, trend altta, PR'lar sağda durumla birlikte liste olarak.
Etkileşim
Etkileşim Kontrolleri
Dönemi değiştirin, takıma göre filtreleyin, bir PR satırını açın.
Uygunluk
Qoder Görev İçin Ne Zaman Uygun, Ne Zaman Değil
Qoder Şu Durumlarda Uygun
- Derin repo anlayışı. Mimari ve konvansiyonlar hakkında bağlam — bir repo wiki'sinde damıtılmış — böylece çıktı gerçek bileşenlerinizi ve token'larınızı yeniden kullanır.
- Spec odaklı görevler. Quest modu, yazılı bir spec'i baştan sona planlanmış, uygulanmış ve kendi kendini doğrulamış bir sonuca dönüştürür.
- Kurallar + MCP. Proje kuralları konvansiyonlarınızı taşır; Figma MCP sunucusu gerçek tasarım bağlamını koda getirir.
- Lite / Efficient / Auto. Oturum başına bir model katmanı seçin; Auto ile Qoder'in zamanlayıcısı görev başına bir model seçer.
Ş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ıtlarınız yok. Bir design system veya örnek olmadan çıktı genel bir görünüme kayma eğilimindedir; önce brief'i yazın.
- Bu ajanın gerektirdiği kimlik bilgisine sahip değilsiniz. Gerekli: Qoder hesabı. OpenDesign kimlik bilgisi sağlamaz veya proxy'lemez.
- Ekibiniz Qwen veya Trae CLI ile çalışıyor. Bu ajanların kendi sayfaları vardır; çalışma alanı aynıdır, kurulum farklıdır. İlgili ajanlara bakın.
Uyumluluk
Başlamadan Önce Qoder Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Qoder'i ele alır. Yayımlanmış referanslar 6 Eylül 2026 itibarıyla kontrol edilmiştir.
Araç KapsamıQoder, Alibaba tarafından
Qoder, Alibaba'nın ajan tabanlı kodlama platformudur — masaüstü uygulaması ve CLI olarak sunulan bir yapay zeka geliştirme ortamı. Qoder CLI, bu motoru terminale getirir: kod tabanınızı okur, dosyaları düzenler, komutları çalıştırır ve görevleri doğal dilden yürütür. Bu sayfa, Qoder'in kendi arayüzüyle ilgili değil, OpenDesign aracılığıyla Qoder ile arayüz tasarlamakla ilgilidir. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaQoder hesabı
Qoder hesabı. Qoder hesabınızla kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır. Bu sayfa bir kota veya fiyat garanti etmez.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü sürümleri için indirme sayfasını kontrol edin. Kaynak quickstart'taki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırma için geçerlidir, bir masaüstü paketi kurulumu için değil. Minimum uyumlu Qoder sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Kurulu sürümünüzün gösterdiği bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Qoder'in bunu işlediğini ve üretilen dosyanın açıldığını doğrulayın. Sadece indirme, çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Qoder Kurulumu
Önce indirin, kurulu sürümünüz için Qoder kurulumunu tamamlayın, ardından küçük bir sonucu kontrol edin. Bu yolu izlemek için OpenDesign'ı kaynaktan derlemeniz gerekmez.
- 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 kurulu mu? Sonraki adıma geçin; yeniden indirmenize gerek yok. - 2
Qoder Bağlantınızı Hazırlayın
Kurulu sürümünüzdeki Qoder talimatlarını izleyin. Qoder hesabınızla kimlik doğrulaması yapın — kimlik bilgileri makinenizde kalır.
Qoder belgeleri# 1. Install Qoder CLI (Node 20+) npm install -g @qoder-ai/qodercli # (macOS/Linux via Homebrew also available) # 2. Verify the install qodercli --versionYayınlanan kılavuzdaki Qoder kurulum notlarından alınmıştır; güncel komut için satıcı belgelerini kontrol edin.
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
Küçük Bir Qoder 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’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, 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.
Qoder tasarım iş akışı
Beş Adımda Qoder Tasarım İş Akışı
Aynı metrikler panosu görevi, brief'ten doğrulanmış dosyaya kadar takip edilir. Her adımda sizin sağladığınız şey, Qoder'ın yaptığı şey, OpenDesign'ın kattığı şey ve sizin kontrol ettiğiniz şey listelenir.
- 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.
- QoderBrief'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.
- 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.
- QoderDESIGN.md token'larını ve tutum kurallarını, bir satır yazmadan önce 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.
- 3
Arayüzü Oluştur
Qoder, kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve sabit kancalar.
- SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
- QoderBölümleri planlar, HTML, CSS ve JavaScript kodunu 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.
- 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.
- QoderÖnizleme üzerindeki yorumlarınızı okur ve sonraki revizyonu hazırlar.
- OpenDesignÖnizlemeyi render eder, yorumlar ve düzenlemeler için
data-od-idhedeflerini açığa çıkarır. - KontrolHiyerarşi, kontrast, 390px'de taşma, focus durumları ve vurgu renginin ölçülü kullanılıp kullanılmadığı.
- 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.
- QoderDeğişiklikleri yerinde 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.
Kaynaklar
Qoder 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
Qoder'in OpenDesign içinde üretebileceği artifact türleri, her tür için bir skill.
Tasarım Sistemleri
Qoder herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenler.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Qoder Sınırlamaları, Manuel Kontroller ve Yedek Çözümler
- KapsamBu sayfa, Qoder'in tüm özelliklerini değil, OpenDesign'a bağlı bir ajan olarak Qoder'i ele alır.
- Kullanım SınırlarıKullanım sınırları ve maliyet, kullandığınız kimlik bilgisine (Qoder hesabı) bağlıdır. Bu sayfa ücretsiz kotalar hakkında herhangi bir iddiada bulunmaz.
- AğYerel proje dosyaları, çevrimdışı çıkarım anlamına gelmez. Hassas girdileri paylaşmadan önce ajanınızın sağlayıcı ayarlarını ve veri politikalarını inceleyin.
- Çıktı HTML'dirArtifact'lar HTML dosyalarıdır, vektör tasarım dosyaları değildir.
- Manuel İncelemeErişilebilirlik, gerçek içerik, marka uyumu ve etkileşim doğruluğu önizlemede sizin tarafınızdan incelenir. Ajan tarafından yapılan herhangi bir kendi kendini kontrolü ilk geçiş olarak değerlendirin.
- Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, kurulu sürümün bağlantı talimatlarını ve kimlik doğrulamasını kontrol edin. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan üretilen dosyayı koruyun.
SSS
Qoder ve OpenDesign Hakkında Sık Sorulan Sorular
Qoder CLI Gerçekten Tasarım İşi Yapabilir mi?
Evet — bağlamda bir estetik skill, bir design system ve gerçek referans görseller bulunduğunda Qoder CLI, üretim kalitesinde, duyarlı (responsive) bir UI üretir ve deponuza dair derin anlayışı, gerçek bileşenlerinizi yeniden kullanmasına yardımcı olur. Bu bağlam olmadan genellikle sıradan bir görünüme kayar; OpenDesign'ın doldurduğu boşluk da tam olarak budur.
Qoder CLI'da Kimlik Doğrulamasını Nasıl Yaparım?
qodercli'yi çalıştırın ve tarayıcı üzerinden Qoder hesabınızla giriş yapmak için /login komutunu kullanın veya etkileşimsiz ortamlar için bir Qoder kişisel erişim token'ı sağlayın. OpenDesign kimlik bilgilerinizi asla proxy'lemez — ajan bunları doğrudan kullanır.
Qoder CLI'yı Özellikle Tasarım İçin İyi Yapan Nedir?
İki şey: deponuz üzerinde derin bir bağlam oluşturur — mimari, kurallar ve bir repo wiki'si — böylece gerçek temel bileşenlerinizi yeniden kullanır ve spesifikasyon odaklı görevleri (quests) bir tasarım görevini baştan sona yürütür. Her ikisi de yardımcı olur, ancak zevk hâlâ sağladığınız design system, skill ve referanslardan gelir.
Lite, Efficient ve Auto Model Katmanları Nedir?
Qoder CLI, bir model katmanı seçmenize olanak tanır: Lite, Efficient veya Auto. Auto, Qoder'in zamanlayıcısının her görev için bir model seçmesine izin verir; böylece model seçimini elle yönetmezsiniz. İşe uygun katmanı seçin; Auto mantıklı bir varsayılandır.
Qoder CLI Figma'ya Nasıl Bağlanır?
Figma MCP sunucusunu Qoder'in MCP yapılandırmasına ekleyin. Qoder böylece gerçek tasarım bağlamını — bileşenler, değişkenler, düzen verileri — çekebilir; üretilen kod kaynağa yaklaşmak yerine kaynakla eşleşir.
Qoder ile İlk Tasarım Görevine Başlayın
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.