DAHA FAZLA OKUMA
Copilot İçin Ek Okumalar
Yayınlanan kılavuzda listelendiği şekliyle Copilot ile tasarım yapmaya yönelik eğitimler, dokümantasyon ve adım adım anlatımlar.
Copilot 
OpenDesign Copilot ile
OpenDesign’da
tasarlayın.
OpenDesign’da GitHub Copilot CLI ile arayüz tasarlama: girdi olarak bir ekran görüntüsü, deponuzdaki bileşenlerin yeniden kullanımı, brief’ten incelenmiş dosyaya tek bir açılış sayfası görevi ve başlamadan önce bilinmesi gereken sınırlar.
Briften arayüze01 / Copilot
FİKRİ SİZ GETİRİN↗
“Ekran görüntüsünden, bileşenlerimizle
oluşturulmuş bir lansman sayfası.”
BU COPILOT KILAVUZUNA GİRMENİN ÜÇ YOLU
Copilot İle Nereden Başlayacağınızı Seçin
BU KILAVUZ · UI TASARIMI
Copilot İ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 KURULUMCopilot’u Sıfırdan Kurun
İşte temiz bir makineden UI oluşturup doğrulayabilen bir Copilot CLI’ya kadar tüm yol.
Kuruluma git KARŞILAŞTIRMACopilot’u Diğer Ajanlarla Karşılaştırın
Copilot’un tasarım işleri için Codex, Claude Code, Cursor’dan farkı ve başka bir workflow seçmeniz gereken durumlar.
Karşılaştırmayı görünUçtan Uca Tek Bir Copilot Tasarım Görevi
Brief’ten Arayüze: Bir Copilot 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 tamamlanmadan önce çalıştırdığınız kontroller. Aşağıdaki arayüz, bu sayfa için oluşturulmuş açıklayıcı bir örnektir; kaydedilmiş bir Copilot çalıştırması değildir.
1Tasarım Brief'i ve Kısıtlar
BriefEkli bir rakip sayfa ekran görüntüsünden, kurulum komutunu içeren bir hero, üç özellik bloğu ve kanıt noktaları ile bir CLI ürünü için açılış sayfası tasarlayın. Deponun bileşenlerini yeniden kullanın. Masaüstü ve telefon.
- Tasarım sistemiDepo bileşenleri ve token’ları; Albert Sans, tek yeşil vurgu
- Kesme noktaları (breakpoints)1440px masaüstü ve 390px mobil, yatay kaydırma yok
- EtkileşimlerKurulum komutunu kopyalama, birincil ve ikincil CTA, çapa navigasyonu
- ÇıktıSabit
data-od-idkancalarına sahip kendi kendine yeterli tek bir HTML dosyası
2İş Dağılımı: Siz, Copilot ve OpenDesign
- Siz
Brief'i yazın, tasarım sistemini seçin ve kabul kriterlerini tanımlayın.
- Copilot
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.
3Copilot Artifact: 1440px ve 390px'de Lansman Sayfası
4Teslimden Önce İnceleme
Düzen
Izgara ve Boşluklar
Hero, özellikler ve kanıt bölümü aynı 8px grid’i paylaşır; görsel sütun metni asla sayfanın altına itmez.
Hiyerarşi
Görsel Hiyerarşi
Önce başlık, sonra kurulum komutu, ardından özellikler; vurgu rengi yalnızca kurulum düğmesini işaretler.
Duyarlı
Mobil Düzen
Önce metin, sonra görsel, özellikler alt alta dizilmiş; kurulum komutu kopyalanabilir kalır.
Etkileşim
Etkileşim Kontrolleri
Komutu kopyalayın, her iki CTA’yı takip edin, bir özellik çapasına atlayın.
Uygunluk
Copilot Görev İçin Uygun Olduğunda ve Olmadığında
Copilot Şu Durumlarda Uygundur
- Ekran görüntüsü → UI. Güçlü bir multimodal model seçin ve bir referans görseli duyarlı markup'a dönüştürün, ardından sonucu görselle karşılaştırın.
- Çok modelli seçim. /model ile göreve göre Anthropic, OpenAI ve Google'ın öncü modelleri arasında geçiş yapın, hepsi Copilot aboneliğiniz üzerinden.
- Talimatlar + MCP. Özel talimatlar ve AGENTS.md kurallarınızı taşır; Figma MCP sunucusu gerçek tasarım bağlamını koda getirir.
- Derin GitHub entegrasyonu. Yerleşik GitHub MCP sunucusu ve mevcut GitHub hesabınızla kimlik doğrulanmış repo, issue ve PR'lerinize erişim.
Ş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: GitHub Copilot aboneliği. OpenDesign kimlik bilgisi sağlamaz veya aracılık etmez.
- Ekibiniz Codex veya Claude Code üzerinde çalışıyor. Bu ajanların kendi sayfaları vardır; çalışma alanı aynıdır, kurulum farklıdır. Bkz. ilgili ajanlar.
Uyumluluk
Başlamadan Önce Copilot Gereksinimleri
Bu kılavuz, OpenDesign masaüstü uygulaması üzerinden bağlanan Copilot'ı ele alır. Yayımlanmış referanslar 6 Eylül 2026 itibarıyla kontrol edilmiştir.
Araç KapsamıCopilot, GitHub tarafından
GitHub Copilot CLI, Copilot kodlama ajanıyla aynı ajan altyapısı tarafından desteklenen GitHub'ın terminal-native kodlama ajanıdır. Kod tabanınızı okur, dosyaları düzenler, komutlar çalıştırır ve GitHub issue'larınız, PR'larınız ve repolarınızla çalışır. Bu sayfa OpenDesign üzerinden Copilot ile arayüz tasarlamayla ilgilidir, Copilot'un kendi arayüzüyle ilgili değildir. OpenDesign'ın kurulum notları mevcut ajanları listeler.
Hesaplar ve Kimlik DoğrulamaGitHub Copilot aboneliği
GitHub Copilot aboneliği. GitHub Copilot aboneliğinizle kimlik doğrulayın — kimlik bilgileri makinenizde kalır. Bu sayfa bir 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ıçtaki Node.js ve pnpm gereksinimleri, kaynaktan çalıştırmaya uygulanır, bir masaüstü paketi kurmaya değil. Minimum uyumlu Copilot sürümü: burada doğrulanmadı.
Bağlantı KontrolüBaşarı sinyali
Kurulu sürümünüzde gösterilen bağlantı talimatlarını izleyin, ardından küçük bir görev çalıştırın. Copilot'un bunu ele aldığını ve ürünün açıldığını doğrulayın. Yalnızca indirme, çalışan bir bağlantı kurmaz.
Masaüstü uygulamasıyla başlayın
Üç Adımda Copilot Kurulumu
Önce indirin, kurulu sürümünüz için Copilot 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
Copilot Bağlantınızı Hazırlayın
Kurulu sürümünüzdeki Copilot talimatlarını izleyin. GitHub Copilot aboneliğinizle kimlik doğrulayın — kimlik bilgileri makinenizde kalır.
GitHub Copilot CLI kullanımı# 1. Install Copilot CLI (Node.js required) npm install -g @github/copilot # 2. Start it in your project and authenticate on first run cd your-project copilot # run /login and follow the prompts to sign inYayınlanan kılavuzdaki Copilot kurulum notlarından. 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 Copilot 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.
Copilot tasarım iş akışı
Beş Adımda Copilot Tasarım İş Akışı
Aynı lansman sayfası görevi, brief'ten doğrulanmış dosyaya kadar takip edilir. Her adımda sizin sağladığınız şey, Copilot'un 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.
- CopilotBrief'i ve projenin talimat dosyasını okur; belirsiz bir şey 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.
- CopilotBir 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.
- 3
Arayüzü Oluştur
Copilot kendi kendine yeten bir HTML dosyası yazar: yerleşim, stiller, etkileşimler ve sabit kancalar.
- SizBekleyin veya netleştirici bir soruyu yanıtlayın. Yapılandırılacak bir şey yok.
- CopilotBölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanı 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.
- CopilotÖnizleme üzerindeki yorumlarınızı okur ve bir 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.
- CopilotDeğ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
Copilot 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
Copilot'un OpenDesign'da üretebileceği artifact türleri, tür başına bir skill.
Tasarım Sistemleri
Copilot herhangi bir şey oluşturmadan ö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
Copilot Sınırlamaları, Manuel Kontroller ve Yedek Çözümler
- KapsamÖzel talimat dosyalarını ve AGENTS.md'yi otomatik olarak okur ve göreve göre Anthropic, OpenAI ve Google'dan öncü modeller arasında geçiş yapmanıza olanak tanır. Bu sayfa Copilot'u OpenDesign'a bağlı bir ajan olarak ele alır, her Copilot özelliğini değil.
- Kullanım LimitleriKullanım limitleri ve maliyet, kullandığınız kimlik bilgisine (GitHub Copilot aboneliği) göre değişir. Bu sayfa ücretsiz kotalar hakkında 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
Copilot ve OpenDesign Hakkında Sık Sorulan Sorular
GitHub Copilot CLI Gerçekten Tasarım İşi Yapabilir mi?
Evet — bir estetik skill, bir tasarım sistemi ve bağlamda gerçek referans görselleri ile Copilot CLI üretim kalitesinde, duyarlı UI üretir ve çıktıyı referanslara karşı en iyi doğrulayan modeli seçebilirsiniz. Bu bağlam olmadan genellikle jenerik bir görünüme kayma eğilimindedir; OpenDesign'ın doldurduğu boşluk da budur.
Copilot CLI İle Tasarım Yapmak İçin Aboneliğe İhtiyacım Var mı?
Evet — Copilot CLI aktif bir GitHub Copilot aboneliği (Pro, Pro+, Business veya Enterprise) üzerinde çalışır; kendi anahtarınızı getirme (bring-your-own-key) değildir. GitHub hesabınızla kimlik doğrularsınız. OpenDesign kimlik bilgilerinizi asla proxy'lemez — aboneliğiniz doğrudan ajanınız tarafından kullanılır.
Copilot CLI'yı Özellikle Tasarım İçin İyi Yapan Nedir?
İki şey: depo talimatlarını ve AGENTS.md'yi otomatik olarak okur, böylece tasarım kurallarınız depoyla birlikte taşınır; ve göreve göre Anthropic, OpenAI ve Google'dan öncü modeller arasında geçiş yapmanıza olanak tanır. Her ikisi de yardımcı olur — ancak beğeni hâlâ sağladığınız tasarım sistemi, skill ve referanslardan gelir.
Frontend Tasarımı İçin Copilot CLI mı, Claude Code mu?
İkisi de güçlü. Claude Code, kod tabanını tanıyan spesifik tasarım kararlarıyla bilinir; Copilot CLI'nin avantajı ise sağlayıcılar arasında model seçimi ve halihazırda sahip olabileceğiniz bir abonelikle derin GitHub entegrasyonudur. Birçok ekip ikisini de kullanır — OpenDesign, tasarım iş akışınızı değiştirmeden ajanlar arasında geçiş yapmanıza olanak tanır.
Copilot CLI'yi Figma'ya Nasıl Bağlarım?
Figma MCP sunucusunu /mcp add komutuyla ekleyin; ayarlar ~/.copilot altındaki mcp-config.json içinde saklanır. Ardından Copilot, bileşenler, değişkenler ve layout verileri gibi gerçek design context'i çekebilir; böylece üretilen kod kaynağa yaklaşık değil, kaynakla eşleşir.
Copilot 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.