DAHA FAZLA OKUMA
Qwen İçin Daha Fazla Okuma
Yayımlanan kılavuz, Qwen tasarım çalışmalarına yönelik eğitimlere, belgelere ve adım adım anlatımlara bağlantı verir.
Qwen 
OpenDesign Qwen ile
OpenDesign’da
tasarlayın.
OpenDesign'da Qwen Code ile arayüz tasarlama: girdi olarak bir referans görsel, kural kitabı olarak QWEN.md, brief'ten incelenmiş dosyaya kadar bir takım takvimi görevi ve başlamadan önce bilmeniz gereken sınırlar.
BU QWEN CODE KILAVUZUNA ÜÇ YOL
Qwen Code ile Nereden Başlamalı
BU KILAVUZ · UI TASARIMI
Qwen Code ile Bir Ürün Arayüzü Oluşturun
Bu kılavuz bir brief, referanslar, tasarım kuralları ve gözden geçirilmiş bir HTML artefaktını kapsar.
Bu kılavuzu okuyun KURULUMQwen'i Sıfırdan Kurun
Temiz bir makineden, arayüz oluşturan ve doğrulayan Qwen Code'a: eksiksiz kurulum yolu.
Kuruluma git KARŞILAŞTIRMAQwen'i Diğer Ajanlarla Karşılaştırın
Qwen Code'un tasarım çalışmaları için Codex, Claude Code ve Cursor ile nasıl karşılaştırıldığı ve başka bir iş akışının ne zaman daha uygun olduğu.
Karşılaştırmayı görünUçtan Uca Bir Qwen Tasarım Görevi
Bir Qwen Code Tasarım Görevi: Brief'ten Arayüze
Bu adım adım kılavuz bir görevi takip eder: brief ve kısıtlamalar olarak ne teslim ettiğiniz, Qwen Code'un döndürdüğü artefakt ve onaydan önce kalan kontroller. Aşağıdaki arayüz bu sayfa için örnek niteliğindedir, yakalanmış bir Qwen Code çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefEkli referanstan, bir ekip takvimi hafta görünümü tasarlayın: beş gün, çalışma saatleri, takvime göre renk kodlu ve telefonda günlük ajanda. Masaüstü ve telefonu kapsayın.
- Tasarım sistemiOpenDesign kağıt tuvali: Albert Sans, tek bir yeşil vurgu
- Kesme noktaları (breakpoints)Masaüstü 1440px'te, mobil 390px'te, yatay kaydırma olmadan
- EtkileşimlerHafta gezinme, bir etkinliği açma, takvim açma/kapama ve bugüne atlama
- ÇıktıSabit
data-od-idkancalarına sahip tek, kendi kendine yeten bir HTML dosyası
2Kim Ne Yapar: Siz, Qwen Code ve OpenDesign
- Siz
Brief'i siz yazarsınız, tasarım sistemini seçersiniz ve kabul kriterlerini belirlersiniz.
- Qwen
Qwen Code düzeni planlar, HTML, CSS ve JavaScript yazar, ardından istek üzerine revize eder.
- OpenDesign
OpenDesign tasarım sistemini ve yeteneği sağlar, önizlemeyi oluşturur ve her sürümü bir proje dosyası olarak kaydeder.
- İnceleme
Devir teslimden önce görsel hiyerarşiyi, 8px'lik ızgara aralığını, her iki kırılma noktasını ve her etkileşimi kontrol edersiniz.
3Qwen Code Artefaktı: 1440px ve 390px'te Ekip Takvimi
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Saat satırları ve gün sütunları 8px'lik ızgaraya oturur; etkinlikler saat çizgilerine hizalanır.
Hiyerarşi
Görsel Hiyerarşi
Bugün ve odaklanmış etkinlik önce gelir; vurgu yalnızca o etkinlikte ve bugünün başlığında görünür.
Duyarlı
Mobil Düzen
Hafta, bir gün şeridi artı bir ajanda listesine daralır; bugün seçili kalır.
Etkileşim
Etkileşim Kontrolleri
Bir haftayı taşımayı, bir etkinliği açmayı, bir takvimi açıp kapatmayı ve bugüne atlamayı test edin.
Uygunluk
Qwen Code Ne Zaman Uygundur ve Ne Zaman Değildir
Qwen Şu Durumlarda Uygun
- Referans → Arayüz. Güçlü ajan tabanlı kodlama, net bir referans ve brief'i duyarlı işaretlemeye dönüştürür, ardından bu referansa karşı kendi kendini kontrol eder.
- Geniş bağlam. Eksiksiz bir tasarım sistemi, bileşen kitaplığı ve referans seti bir araya gelir ve çıktının gerçek temel öğelerinizi yeniden kullanmasını sağlar.
- QWEN.md + MCP. Bağlam dosyaları kurallarınızı tutar, Figma MCP sunucusu ise gerçek tasarım bağlamını koda çeker.
- Açık ve BYOK. Apache-2.0 ve anahtarlar konusunda esnek — DashScope veya Qwen API anahtarı, OpenAI uyumlu bir uç nokta veya ModelScope.
Şu Durumlarda Başka Bir Workflow Seçin
- Düzenlenebilir vektör dosyalarına ihtiyacınız var. Çıktı HTML'dir, düzenlenebilir bir tasarım dosyası değildir. Gereken varlık biçiminiz 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 örnek olmadan çıktı genelleşir; brief yazarak başlayın.
- Bu ajanın ihtiyaç duyduğu kimlik bilgisine sahip değilsiniz. Gerekli: DashScope / Qwen API anahtarı (kendi anahtarınızı getirin). OpenDesign kimlik bilgilerini ne sağlar ne de vekillik eder.
- Ekibiniz Kimi veya Qoder'da çalışıyor. Bu ajanların her birinin kendi sayfası ve kendi kurulum yolu vardır. İlgili ajanlar bölümüne bakın.
Uyumluluk
Başlamadan Önce Qwen Gereksinimleri
Bu sayfa, OpenDesign masaüstü uygulaması aracılığıyla bağlanan Qwen hakkındadır. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.
Araç KapsamıQwen, Alibaba tarafından
Qwen Code, Alibaba'nın açık kaynaklı (Apache-2.0) terminal yapay zeka ajanıdır ve Google'ın Gemini CLI'ından uyarlanmıştır. Kod tabanınızı okur, dosyaları düzenler, komutları çalıştırır ve web'de çalışır. Bu sayfa, OpenDesign aracılığıyla Qwen ile arayüz tasarlamaya odaklanır, Qwen'in kendi arayüzüne değil. OpenDesign'in kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaDashScope / Qwen API anahtarı (BYOK)
DashScope / Qwen API anahtarı (BYOK). DashScope veya Qwen API anahtarınızla (BYOK) kimlik doğrulayın; kimlik bilgileri makinenizde kalır. Bu sayfada kota veya fiyat taahhüdü verilmemektedir.
Sistem ve SürümlerMasaüstü uygulama veya kaynak kod
Masaüstü sürümleri için indirme sayfasına bakın. Kaynak hızlı başlangıç kılavuzundaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırırken geçerlidir, masaüstü paketi yüklerken değil. Minimum uyumlu Qwen sürümü: burada doğrulanmamıştır.
Bağlantı KontrolüBaşarı sinyali
Yüklü sürümünüzün gösterdiği bağlantı talimatlarını kullanın, ardından küçük bir görev çalıştırın. Qwen'in bunu halledip etmediğini ve artefaktın açıldığını doğrulayın. Tek başına bir indirme, çalışan bir bağlantıyı kanıtlamaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Qwen Kurulumu
İndirme ile başlayın, yüklü sürümünüz için Qwen kurulumunu tamamlayın, ardından küçük bir sonucu doğrulayın. Bu yol, OpenDesign'i kaynaktan derlemeyi gerektirmez.
- 1
OpenDesign Masaüstü Uygulamasını İndirin
Bilgisayarınız için paketi seçin, yükleyin ve uygulamayı açın.
OpenDesign'ı indirinKONTROL NOKTASIMasaüstü uygulaması açılır. Zaten yüklüyse, sonraki adıma geçin — ikinci bir indirmeye gerek yok. - 2
Qwen Bağlantınızı Hazırlayın
Yüklü sürümünüzle birlikte gelen Qwen talimatlarını izleyin. DashScope veya Qwen API anahtarınızla (BYOK) kimlik doğrulayın; kimlik bilgileri makinenizde kalır.
Qwen Code dokümantasyonu# 1. Install Qwen Code (Node 22+) npm install -g @qwen-code/qwen-code@latest # or: brew install qwen-code # 2. Start it in your project and authenticate on first run cd your-project qwen # run /auth, or set a key in ~/.qwen/settings.jsonYayımlanmış kılavuzdaki Qwen kurulum notlarından; güncel komutu satıcı belgelerinden doğrulayın.
KONTROL NOKTASIKullanmayı planladığınız ajanı ve hesabı doğrulayın. İkisinden biri kullanılamıyorsa, daha büyük bir göreve kalkışmadan önce uyumluluğu gözden geçirin. - 3
Küçük Bir Qwen Görevi Çalıştırın
Brief'i, bir revizyon dahil olmak üzere tüm döngüyü değerlendirebilecek kadar küçük tutun.
Başlangıç brief’iBir profil formu ve kaydetme onayı içeren bir ayarlar ekranı oluşturun. Tasarım 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. Oluşturulan bir dosya yine de sizin inceleme geçişinize ihtiyaç duyar.
OpenDesign'i kaynaktan çalıştırmayı planlıyorsanız, bunun yerine teknik hızlı başlangıç kılavuzunu izleyin.
Qwen tasarım iş akışı
Qwen'in Beş Adımlı Tasarım İş Akışı
Bir ekip takvimi görevini brief'ten doğrulanmış bir dosyaya kadar takip edin. Her adım, sizin girdinizi, Qwen Code'un işini, OpenDesign'in rolünü ve gerçekleştirdiğiniz kontrolü ayırır.
- 1
Tasarım Brief'i
Üç ila altı düz satır yeterlidir. Ekranın kime hizmet ettiğini, ne yapması gerektiğini ve hangi platformların önemli olduğunu belirtin.
- SizBrief'i taslak haline getirin ve varsa bir referans ekran görüntüsü ekleyin.
- QwenBrief'i ve projenin QWEN.md dosyasını okur; belirsizlik kalırsa soru sorar.
- OpenDesignProjeyi, istem yüzeyini ve artefakt türüyle eşleşen yeteneği sağlar.
- KontrolBrief'in kabul kriterlerini adlandırdığından emin olun. Bunları burada eklemek, oluşturmdan sonra eklemekten daha az maliyetlidir.
- 2
Tasarım Kısıtları
Bir tasarım sistemi artı birkaç kesin kural. Çıktıyı genel olmaktan çıkarıp markaya uygun tutan şey bu kombinasyondur.
- SizBir tasarım sistemi seçin; kırılma noktalarını ve görünmesi gereken bileşenleri adlandırın.
- QwenHerhangi bir kod yazmadan önce DESIGN.md belirteçlerini ve duruş kurallarını bağlama çeker.
- OpenDesignTasarım sistemi kitaplığını sağlar ve seçiminizi yetenek şablonuna bağlar.
- KontrolBelirteçlerin markayla eşleştiğini kontrol edin: bir vurgu, doğru yazı tipleri, doğru yarıçap.
- 3
Arayüzü Oluştur
Qwen Code tek, kendi kendine yeten bir HTML dosyası yazar: düzen, stiller, etkileşimler ve sabit kancalar.
- SizBekleyin veya açıklayıcı bir soruyu yanıtlayın. Burada yapılandırılacak bir şey yok.
- QwenBölümleri planlar, HTML, CSS ve JavaScript yazar, dosyayı çalıştırır ve hataları düzeltir.
- OpenDesignArtefaktı proje klasöründe saklar ve önizleme için dizinler.
- KontrolBekleyin. Kaynağı değil, render edilen dosyayı değerlendirin.
- 4
Önizleme
OpenDesign dosyayı brief'te belirtilen genişliklerde render eder. Tasarımın değerlendirildiği yer burasıdır.
- SizGenişlikleri değiştirin, etkileşimleri deneyin ve öğelere yorum bırakın.
- QwenÖnizleme yorumlarını okur ve sonraki revizyonu hazırlar.
- OpenDesignÖnizlemeyi render eder ve yorumlar ile düzenlemeler için
data-od-idhedeflerini kullanıma sunar. - KontrolHiyerarşiyi, kontrastı, 390px'te taşmayı, odak durumlarını ve vurgu renginin ölçülü kalıp kalmadığını kontrol edin.
- 5
Revize Et ve Doğrula
Değişiklikleri önizleme öğelerini işaret ederek isteyin. Her revizyon yeni bir dosya olur; hiçbir şey bildirilmeden üzerine yazılmaz.
- SizYorumları isteklere dönüştürün ve görevin ne zaman tamamlandığına karar verin.
- QwenDeğişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
- OpenDesignSürümleri yan yana tutar ve işiniz bittiğinde bir görsel veya HTML'yi dışa aktarır.
- KontrolYalnızca değişen alanı yeniden kontrol edin, ardından her kesme noktası için bir kez tam sayfayı kontrol edin.
Kaynaklar
Qwen 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
Qwen Code'un OpenDesign içinde üretebileceği çıktı türleri; her tür için bir beceri.
Tasarım Sistemleri
Qwen Code herhangi bir şey üretmeden önce bağlanması gereken marka token'ları ve bileşenleri.
Şablonlar
Sunumlar, açılış sayfaları ve ürün ekranları için başlangıç noktaları.
Sınırlamalar
Qwen'in Sınırlamaları, Manuel Kontroller ve Yedekler
- KapsamSayfa, OpenDesign ile bağlantılı bir ajan olarak Qwen Code'u ele alır; her Qwen özelliğini değil.
- Kullanım LimitleriKullanım sınırları ve maliyet, sağladığınız kimlik bilgisine (DashScope / Qwen API anahtarı) bağlıdır. Burada ücretsiz kota iddiası yoktur.
- 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ı kontrol edin.
- Çıktı HTML'dirÇıktılar 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 geçiş olarak değerlendirin.
- Yedek ÇözümAjan kullanılamadığında veya bir görev başarısız olduğunda, yüklü sürümün bağlantı talimatlarına ve kimlik doğrulamasına başvurun. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan çıktıyı kaydedin.
SSS
Qwen ve OpenDesign Hakkında Sık Sorulan Sorular
Qwen Code Gerçekten Tasarım İşi Yapabilir mi?
Evet — bağlamda bir estetik skill, bir design system ve gerçek referans görselleri bulunduğunda, Qwen Code üretim kalitesinde, responsive bir UI üretir ve ajan döngüsü çıktıyı referanslara göre oluşturur, render eder ve doğrular. Bu bağlam olmadan genellikle sıradan bir görünüme kayar; OpenDesign'ın doldurduğu boşluk da budur.
Qwen Code ile Tasarım Yapmak İçin Ödeme Yapmam Gerekir mi?
Qwen Code ücretsiz ve açık kaynaklıdır, ancak BYOK modelidir — kendi DashScope (Alibaba Cloud Model Studio) API anahtarınızı, OpenAI uyumlu bir endpoint'i veya ModelScope'u getirirsiniz. Alibaba ayrıca sabit ücretli bir kodlama planı sunar. OpenDesign her iki durumda da kimlik bilgilerinizi asla proxy'lemez.
Qwen Code'u Tasarım İçin Özellikle Yararlı Kılan Nedir?
İki şey: Qwen3-Coder modelleri ajan tabanlı kodlama için ayarlanmıştır, bu nedenle ajan responsive UI'yi oluşturur ve kendi kendine düzeltir; ayrıca büyük bağlam pencereleri tüm bir design system'i ve referans setini aynı anda tutabilir. İkisi de yardımcı olur — ama zevk yine de sağladığınız design system, skill ve referanslardan gelir.
Qwen Code, Gemini CLI ile Aynı mı?
Hayır. Qwen Code, Google'ın Gemini CLI'sından uyarlanmıştır — aynı açık kaynak soy ağacına sahiptir — ve Qwen3-Coder modellerine göre ayarlayan parser düzeyinde ve prompt düzeyinde uyarlamalar içerir. OpenDesign her ikisini de destekler, böylece tasarım workflow'unuzu değiştirmeden ajanlar arasında geçiş yapabilirsiniz.
Qwen Code'u Figma'ya Nasıl Bağlarım?
Figma MCP sunucusunu ~/.qwen/settings.json içindeki mcpServers altına ekleyin. Böylece Qwen Code gerçek tasarım bağlamını — bileşenler, değişkenler, layout verileri — çekebilir; bu sayede üretilen kod kaynağa yaklaşık değil, tam olarak uyar.
Qwen Code aslında nedir
Qwen Code, Alibaba'nın terminal için sunduğu açık kaynaklı (Apache-2.0) bir yapay zeka ajanıdır. Deponuzu okur, dosyaları düzenler, kabuk komutlarını çalıştırır ve web üzerinde çalışır — yalnızca satırları tamamlamak yerine doğal dil görevlerinden işi planlar ve doğrular. Google'ın Gemini CLI'sinden uyarlanmıştır; ayrıştırıcı düzeyinde ve istem uyarlamaları, Qwen3-Coder modellerini ajan tabanlı kodlama görevlerinde açığa çıkaracak şekilde ayarlanmıştır.
Tasarım çalışmaları için iki özellik öne çıkar. Yetenekli bir ajan tabanlı kodlayıcıdır; bu nedenle bir referansı ve net bir brief'i alıp duyarlı arayüz oluşturabilir, çalıştırabilir ve kendi kendini düzeltebilir. Qwen3-Coder modelleri ayrıca geniş bir bağlam penceresi taşır; bu pencere tüm tasarım sisteminizi, bileşen kitaplığınızı ve referans kümenizi özetleyip yok etmek yerine aynı anda tutacak kadar büyüktür.
Bağlam dosyaları: Qwen Code, kalıcı proje bağlamı için bir QWEN.md dosyasını okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yerdir. Kişisel ve proje ayarları bunun üzerine katmanlanır.
Yerleşik araçlar + MCP: Dosya, kabuk ve web araçlarını kutudan çıktığı gibi sunar ve canlı bir Figma dosyası gibi harici bağlam eklemek için MCP sunucularını (~/.qwen/settings.json içindeki mcpServers altında yapılandırılır) destekler.
Başlamak için BYOK: Kendi anahtarınızı getirirsiniz — bir DashScope (Alibaba Cloud Model Studio) API anahtarı ya da herhangi bir OpenAI uyumlu uç nokta veya ModelScope — ve settings.json içinde yapılandırırsınız.
Kimlik bilgisi: DashScope / Qwen API anahtarı (BYOK) veya OpenAI uyumlu uç nokta / ModelScope
Lisans: Apache-2.0, açık kaynak (Gemini CLI'dan uyarlanmıştır)
Satıcı: Alibaba
Tasarım çalışmaları için iki özellik öne çıkar. Yetenekli bir ajan tabanlı kodlayıcıdır; bu nedenle bir referansı ve net bir brief'i alıp duyarlı arayüz oluşturabilir, çalıştırabilir ve kendi kendini düzeltebilir. Qwen3-Coder modelleri ayrıca geniş bir bağlam penceresi taşır; bu pencere tüm tasarım sisteminizi, bileşen kitaplığınızı ve referans kümenizi özetleyip yok etmek yerine aynı anda tutacak kadar büyüktür.
Bağlam dosyaları: Qwen Code, kalıcı proje bağlamı için bir QWEN.md dosyasını okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yerdir. Kişisel ve proje ayarları bunun üzerine katmanlanır.
Yerleşik araçlar + MCP: Dosya, kabuk ve web araçlarını kutudan çıktığı gibi sunar ve canlı bir Figma dosyası gibi harici bağlam eklemek için MCP sunucularını (~/.qwen/settings.json içindeki mcpServers altında yapılandırılır) destekler.
Başlamak için BYOK: Kendi anahtarınızı getirirsiniz — bir DashScope (Alibaba Cloud Model Studio) API anahtarı ya da herhangi bir OpenAI uyumlu uç nokta veya ModelScope — ve settings.json içinde yapılandırırsınız.
Kimlik bilgisi: DashScope / Qwen API anahtarı (BYOK) veya OpenAI uyumlu uç nokta / ModelScope
Lisans: Apache-2.0, açık kaynak (Gemini CLI'dan uyarlanmıştır)
Satıcı: Alibaba
Güçlü bir kodlayıcı modeli ve büyük bir bağlam neden tasarıma uygundur
Qwen Code'un tasarım avantajı iki özellikten gelir — ancak her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.
Güçlü ajan tabanlı kodlama: Qwen3-Coder modelleri ajan tabanlı görevler için ayarlanmıştır; bu nedenle ajan planlar, düzenler, derlemeyi çalıştırır ve kendi kendini düzeltir — net bir referansı ve brief'i tek seferlik bir tahmin yerine duyarlı işaretlemeye dönüştürür.
Geniş bağlam penceresi: Qwen3-Coder'ın geniş bağlamı, tüm tasarım sisteminin, token'ların ve birçok referans durumunun aynı anda sığması anlamına gelir; böylece ajan tek seferlik stiller icat etmek yerine gerçek ilkel öğelerinizi yeniden kullanır.
QWEN.md içindeki kurallar: Bir QWEN.md (artı Figma MCP sunucusu), ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.
Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Ders, her ajanın öğrettiği aynı derstir: Qwen Code varsayılan olarak zevke sahip değildir. 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; bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Güçlü ajan tabanlı kodlama: Qwen3-Coder modelleri ajan tabanlı görevler için ayarlanmıştır; bu nedenle ajan planlar, düzenler, derlemeyi çalıştırır ve kendi kendini düzeltir — net bir referansı ve brief'i tek seferlik bir tahmin yerine duyarlı işaretlemeye dönüştürür.
Geniş bağlam penceresi: Qwen3-Coder'ın geniş bağlamı, tüm tasarım sisteminin, token'ların ve birçok referans durumunun aynı anda sığması anlamına gelir; böylece ajan tek seferlik stiller icat etmek yerine gerçek ilkel öğelerinizi yeniden kullanır.
QWEN.md içindeki kurallar: Bir QWEN.md (artı Figma MCP sunucusu), ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlarınıza yönlendirir; böylece varsayılan bir görünüm yerine bir markaya göre çalışır.
Zevk, sizin sağladığınız üç girdiden gelir: bir tasarım sistemi, bir beceri ve gerçek referans görselleri.
Ders, her ajanın öğrettiği aynı derstir: Qwen Code varsayılan olarak zevke sahip değildir. 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; bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).
Qwen Code'u tasarım çalışmaları için sıfırdan kurun
Kurulum sırası: kur → kimlik doğrula → QWEN.md'yi yapılandır → bir yetenek 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ı QWEN.md'ye koyun ve Qwen Code'u 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: Bir Playwright veya tarayıcı MCP bağlayın; böylece Qwen Code gerçek bir tarayıcıda işlenir ve çıktısını yalnızca derlemenin geçtiğini doğrulamak yerine kesme noktaları arasında kontrol eder.
Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Tasarım kurallarınızı kodlayın: Token'larınızı, temel öğelerinizi ve kurallarınızı QWEN.md'ye koyun ve Qwen Code'u 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: Bir Playwright veya tarayıcı MCP bağlayın; böylece Qwen Code gerçek bir tarayıcıda işlenir ve çıktısını yalnızca derlemenin geçtiğini doğrulamak yerine kesme noktaları arasında kontrol eder.
Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.
# 1. Qwen Code'u kur (Node 22+)
npm install -g @qwen-code/qwen-code@latest
# veya: brew install qwen-code
# 2. Projenizde başlatın ve ilk çalıştırmada kimlik doğrulayın
cd your-project
qwen # /auth komutunu çalıştırın veya ~/.qwen/settings.json içinde bir anahtar ayarlayın
# 3. settings.json içinde bir DashScope (OpenAI uyumlu) anahtarı yapılandırın
# baseUrl: https://dashscope.aliyuncs.com/compatible-mode/v1
# model: qwen3-coder-plus (DASHSCOPE_API_KEY ayarlayın)
# 4. Bir QWEN.md ekleyin ve Figma MCP sunucusunu bağlayın (isteğe bağlı)
# ~/.qwen/settings.json içinde "mcpServers" altına MCP ekleyinÖnceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Referanstan arayüze iş akışı
Qwen Code ile en yüksek kaldıraçlı tasarım döngüsü, bir referansı çalışan, duyarlı bir arayüze dönüştürmek ve eşleşene kadar yinelemektir — ajanın oluşturmasına, işlemesine ve çıktısını referansla karşılaştırmasına güvenerek.
Elindeki en net görsel referanslardan başla — ve yalnızca tek bir hero görüntüsü değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) tanımla.
İstemde spesifik ol; belirsiz istemler güçlü bir modelle bile genel arayüz üretir.
Tasarım sistemini ve kurallarını QWEN.md'de tut ve Qwen Code'a token'ların ve kurallı temel öğelerin nerede olduğunu söyle.
Bir geliştirme sunucusu çalıştır ve Qwen Code'un gerçek bir tarayıcıda işlemesini sağla; sonucu kontrol etmek için kesme noktalarına yeniden boyutlandır.
Qwen Code'un uygulamasını referanslarla karşılaştırmasını sağlayarak yinele — yalnızca derlendiğini doğrulamasını değil.
Bir dosyayı @ ile referans vererek isteme ekle, ardından somut kısıtlamalar ver:
İstemleri küçük ve odaklı tut, iyi yinelemeleri işle ve kötü olanları geri al (geri aldığında Qwen Code'a söyle), böylece her geçiş temiz bir temel üzerine inşa edilir.
Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Elindeki en net görsel referanslardan başla — ve yalnızca tek bir hero görüntüsü değil, birden çok durumu (masaüstü ve mobil, hover, boş, yükleniyor) tanımla.
İstemde spesifik ol; belirsiz istemler güçlü bir modelle bile genel arayüz üretir.
Tasarım sistemini ve kurallarını QWEN.md'de tut ve Qwen Code'a token'ların ve kurallı temel öğelerin nerede olduğunu söyle.
Bir geliştirme sunucusu çalıştır ve Qwen Code'un gerçek bir tarayıcıda işlemesini sağla; sonucu kontrol etmek için kesme noktalarına yeniden boyutlandır.
Qwen Code'un uygulamasını referanslarla karşılaştırmasını sağlayarak yinele — yalnızca derlendiğini doğrulamasını değil.
Bir dosyayı @ ile referans vererek isteme ekle, ardından somut kısıtlamalar ver:
İstemleri küçük ve odaklı tut, iyi yinelemeleri işle ve kötü olanları geri al (geri aldığında Qwen Code'a söyle), böylece her geçiş temiz bir temel üzerine inşa edilir.
qwen
# istemde:
> @reference-desktop.png @reference-mobile.png
Bu tasarımı React + Vite + Tailwind + TypeScript ile uygula.
QWEN.md'deki mevcut tasarım sistemi bileşenlerimi ve token'larımı yeniden kullan.
Boşluk, düzen ve hiyerarşiyi eşleştir; duyarlı hale getir.
Tarayıcıda işle ve referanslarla eşleşene kadar yinele
kesme noktaları arasında.Önceki kılavuzdan tarihsel komut örneği; güncel sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
QWEN.md, MCP ve uzantılar
Üç uzantı noktası Qwen Code'u 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 oturur.
QWEN.md bağlamı: Proje kuralları, depo kökündeki bir QWEN.md dosyasında yaşar (genel ve proje katmanlarıyla birlikte). Tasarım kurallarınız için kalıcı bir yuvadır ve her çalıştırmada okunur.
MCP sunucuları: MCP sunucularını ~/.qwen/settings.json içindeki mcpServers altında yapılandırın — tasarım bağlamını ve harici araçları (en ilgili olarak, yalnızca Qwen Code'da değil, ajanlar arasında çalışan Figma MCP sunucusu) getirmenin taşınabilir yolu.
Yetenekler ve yerleşik araçlar: Qwen Code yetenekleri ve yerleşik dosya, kabuk ve web araçları, terminalden ayrılmadan referans toplamasını ve doğrulama döngüsünü çalıştırmasını sağlar.
Bunlar taşınabilir, çoklu ajan yetenekleridir — tam olarak OpenDesign'in her projede yeniden oluşturmak yerine orkestre etmek için inşa edildiği türden şeylerdir.
QWEN.md bağlamı: Proje kuralları, depo kökündeki bir QWEN.md dosyasında yaşar (genel ve proje katmanlarıyla birlikte). Tasarım kurallarınız için kalıcı bir yuvadır ve her çalıştırmada okunur.
MCP sunucuları: MCP sunucularını ~/.qwen/settings.json içindeki mcpServers altında yapılandırın — tasarım bağlamını ve harici araçları (en ilgili olarak, yalnızca Qwen Code'da değil, ajanlar arasında çalışan Figma MCP sunucusu) getirmenin taşınabilir yolu.
Yetenekler ve yerleşik araçlar: Qwen Code yetenekleri ve yerleşik dosya, kabuk ve web araçları, terminalden ayrılmadan referans toplamasını ve doğrulama döngüsünü çalıştırmasını sağlar.
Bunlar taşınabilir, çoklu ajan yetenekleridir — tam olarak OpenDesign'in her projede yeniden oluşturmak yerine orkestre etmek için inşa edildiği türden şeylerdir.
Tasarım için Qwen Code 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 bunları bir arada kullanır. Adil bir özet:
Qwen Code — Açık Qwen3-Coder modelleri üzerinde geniş bağlamlı güçlü ajan tabanlı kodlama; açık kaynak ve BYOK — Tüm bir tasarım sistemini bağlamda tutan açık kaynak, anahtar esnekliği olan yapılar
Codex — Bir frontend yeteneğiyle güçlü görsel cila; sanal alanda eşzamansız yapılar — Devredilen eşzamansız yapılar ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanına duyarlı UX — Frontend muhakemesi ve geniş 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 kipli görüntü anlama ve 1M token bağlam; Qwen Code'un uyarlandığı ajan — Ekran görüntüsü ağırlıklı işler ve çok geniş bağlam
Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: hepsi, yetenekler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak başvurur. Çözülmesi gereken asıl sorun budur — ve bu, model şeklinde değil, tasarım aracı şeklindedir.
Ajan — Tasarım gücü — En uygun olduğu
Qwen Code — Açık Qwen3-Coder modelleri üzerinde geniş bağlamlı güçlü ajan tabanlı kodlama; açık kaynak ve BYOK — Tüm bir tasarım sistemini bağlamda tutan açık kaynak, anahtar esnekliği olan yapılar
Codex — Bir frontend yeteneğiyle güçlü görsel cila; sanal alanda eşzamansız yapılar — Devredilen eşzamansız yapılar ve taşınabilir AGENTS.md kuralları
Claude Code — Belirli tasarım kararları (hex, boşluk, tipografi) ve kod tabanına duyarlı UX — Frontend muhakemesi ve geniş 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 kipli görüntü anlama ve 1M token bağlam; Qwen Code'un uyarlandığı ajan — Ekran görüntüsü ağırlıklı işler ve çok geniş bağlam
Toplulukta tekrar eden yargı, zevkin insanlardan geldiğidir: hepsi, yetenekler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak başvurur. Çözülmesi gereken asıl sorun budur — ve bu, model şeklinde değil, tasarım aracı şeklindedir.
Ajan — Tasarım gücü — En uygun olduğu
Tuzaklar ve “AI slop” görünümünden nasıl kaçınılır
Yapay zeka tarafından üretilen tasarımla ilgili 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, “bir yapay zekanın bunu yaptığını haykıran” Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve arayüz metinlerine sızan talimatlar yer alıyor. Bunların hiçbiri Qwen Code'a özgü değil; herhangi bir ajanın özenle seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.
Estetik bir beceri 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: Ajanın farklı kesme noktalarında oluşturmasını 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ı QWEN.md'ye kodlayın: “hero kartları yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Her önlemin, ajana özenle seçilmiş bir tasarım bağlamı sağlamakla ilgili olduğuna dikkat edin. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı zahmetli iştir.
Estetik bir beceri 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: Ajanın farklı kesme noktalarında oluşturmasını 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ı QWEN.md'ye kodlayın: “hero kartları yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzı kuralları ajanın her çalıştırmada okuduğu yere koyun.
Her önlemin, ajana özenle seçilmiş bir tasarım bağlamı sağlamakla ilgili olduğuna dikkat edin. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı zahmetli iştir.
OpenDesign içinde Qwen Code ile tasarım yapmak
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynaklı tasarım katmanıdır. Qwen Code'u birinci taraf bağdaştırıcı olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir oluşturma işlem hattı ve yerel bir masaüstü kullanıcı arayüzü ile sarar — böylece Qwen Code'u 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 getiriyor.
DashScope veya Qwen API anahtarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim aracılığımızla iletilmez.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.
Her çıktı ve DESIGN.md dosyası kendi deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Qwen Code ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, böylece işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i yükleyin ve ajanınız olarak Qwen Code'u seçin.
DashScope veya Qwen API anahtarınızla (BYOK) kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim aracılığımızla iletilmez.
Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.
Her çıktı ve DESIGN.md dosyası kendi deponuzda yaşar, barındırılan bir bulutta değil.
Aynı Qwen Code ajanı, aynı anahtar — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Yerel öncelikli ve Apache-2.0'dır, böylece işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign'i yükleyin ve ajanınız olarak Qwen Code'u seçin.
OpenDesign, Alibaba veya Qwen ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; Qwen, Alibaba'nın ticari markasıdır.