102.7K+İndir
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.

OpenDesign'ı indirin Kuruluma gidin

COPILOT TASARIMI İÇİN ÜÇ BAŞLANGIÇ NOKTASI

Copilot için Bir Başlangıç Noktası Seçin

BU KILAVUZ · UI TASARIMI

Copilot İle Bir Ürün Arayüzü Oluşturun

Bu kılavuzda: bir brif, referans görseller, tasarım kuralları ve inceleyeceğiniz bir HTML çıktısı.

Bu kılavuzu okuyun KURULUM

Copilot’u Sıfırdan Kurun

Temiz bir makineden Copilot CLI'nin arayüz oluşturup doğrulamasına kadar uzanan eksiksiz yol.

Kuruluma git KARŞILAŞTIRMA

Copilot’u Diğer Ajanlarla Karşılaştırın

Copilot'un tasarım çalışmalarında Codex, Claude Code ve Cursor'dan ayrıldığı noktalar ve başka bir iş akışının ne zaman daha uygun olduğu.

Karşılaştırmayı görün
Bu Sayfada Örnek
  1. Örnek
  2. Uygunluk
  3. Uyumluluk
  4. Kurulum
  5. İş Akışı
  6. Kaynaklar
  7. Sınırlamalar
  8. SSS

Uçtan Uca Tek Bir Copilot Tasarım Görevi

Tek Bir Copilot Tasarım Görevi: Briften Arayüze

Baştan sona izlenen tek bir görev: Copilot'a verdiğiniz brif ve kısıtlar, döndürdüğü çıktı ve tamamlanmadan önce hâlâ çalıştırdığınız kontroller. Aşağıdaki arayüz, bu sayfa için hazırlanmış örnek bir gösterimdir—kaydedilmiş bir Copilot çalıştırması değildir.

1Tasarım Brief'i ve Kısıtlar

Brief

Ekli rakip ekran görüntüsünü kullanarak bir CLI ürünü için lansman açılış sayfası tasarlayın: kurulum komutu içeren hero, üç özellik bloğu ve kanıt noktaları. Depodaki bileşenleri 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 komutu metni, birincil ve ikincil CTA, çapa navigasyonu
  • ÇıktıSabit data-od-id kancalarına sahip kendi kendine yeterli tek bir HTML dosyası

2Kim Ne Yapar: Siz, Copilot ve OpenDesign

  • Siz

    Brifi yazın, tasarım sistemini seçin ve kabul kriterlerini belirleyin.

  • Copilot

    Copilot yerleşimi planlar, HTML, CSS ve JavaScript yazar ve istendiğinde revize eder.

  • OpenDesign

    OpenDesign tasarım sistemini ve skill'i sağlar, önizlemeyi oluşturur ve her sürümü projede bir dosya olarak saklar.

  • İnceleme

    Teslimden önce görsel hiyerarşiyi, 8px ızgaradaki boşlukları, her iki kırılma noktasını ve her etkileşimi kontrol edin.

3Copilot Çıktısı: 1440px ve 390px'te Lansman Sayfası

Copilot Çıktısı: 1440px ve 390px'te Lansman Sayfası — Masaüstü
Örnek gösterim

4Teslimden Önce İnceleme

Düzen

Izgara ve Boşluklar

Hero, özellikler ve kanıtlar aynı 8px ızgarayı paylaşır; görsel sütunu metni asla katlanma çizgisinin 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 Ne Zaman Uygun—ve Ne Zaman Değil

Copilot Şu Durumlarda Uygundur

  • Ekran görüntüsü → UI. Güçlü bir çok modlu model seçin, bir referans görselini duyarlı işaretlemeye dönüştürün, ardından sonucu o görselle karşılaştırın.
  • Çoklu model seçimi. Görev başına Anthropic, OpenAI ve Google'ın öncü modelleri arasında geçiş yapmak için /model kullanın; hepsi Copilot aboneliğiniz kapsamında.
  • Talimatlar + MCP. .github/copilot-instructions.md ve AGENTS.md gibi özel talimatlar 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 ile çalışıyor. Bu ajanların kendi sayfaları var; çalışma alanı değişmez, ancak kurulum değişir. İlgili ajanlar bölümüne bakın.

Uyumluluk

Başlamadan Önce Copilot Gereksinimleri

Bu sayfa, OpenDesign masaüstü uygulaması üzerinden bağlanan Copilot'u ele alır. Yayımlanmış referanslar 6 Eylül 2026'da kontrol edilmiştir.

Araç KapsamıCopilot, GitHub tarafından

GitHub Copilot CLI, Copilot kodlama ajanıyla aynı ajan altyapısıyla çalışan, GitHub'ın terminale özgü kodlama ajanıdır. Kod tabanınızı okur, dosyaları düzenler, komutları çalıştırır ve GitHub sorunlarınız, PR'larınız ve depolarınızla çalışır. Bu sayfa, OpenDesign aracılığıyla Copilot ile arayüzler tasarlamayla ilgilidir; Copilot'un kendi arayüzüyle değil. OpenDesign'nin 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. 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

    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 in

    Yayınlanan kılavuzdaki Copilot kurulum notlarından. Güncel komut için satıcı belgelerini kontrol edin.

    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

    Küçük Bir Copilot Görevi Çalıştırın

    Tüm döngüyü, bir revizyon dahil, değerlendirebilecek kadar küçük bir brifle başlayın.

    Başlangıç brief’i

    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, kaydetme durumunu test edin ve belirli bir değişiklik isteyin. Oluşturulan bir dosya incelemeyi başlatır; onu sonlandırmaz.

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

Copilot tasarım iş akışı

Bir Copilot CLI Tasarım Görevinde Beş Adım

İlk briften incelediğiniz dosyaya kadar izlenen tek bir lansman sayfası. Her adım girdinizi, Copilot CLI'nin çalışmasını, OpenDesign'nin rolünü ve hâlâ yapmanız gereken kontrolü ortaya koyar.

  1. 1

    Tasarım Brief'i

    Brifi sade bir dille, üç ila altı satırda yazın. Kimin için olduğunu, ekranın ne yapması gerektiğini ve hangi platformların önemli olduğunu söyleyin.

    • SizBrifi siz yazarsınız ve varsa bir referans ekran görüntüsü eklersiniz.
    • CopilotCopilot CLI brifi ve deponun talimat dosyalarını — özel talimatlar ve AGENTS.md — okur ve bir şey belirsiz olduğunda sorar.
    • OpenDesignOpenDesign projeyi, istem yüzeyini ve çıktı türüne yönelik skill'i sağlar.
    • KontrolBrifin kabul kriterlerini adlandırdığını doğrularsınız. Bunları üretimden önce netleştirmek, sonradan eklemekten daha az maliyetlidir.
  2. 2

    Tasarım Kısıtları

    Bir tasarım sistemi ve katı kurallar, Copilot CLI'ın varsayılan bir görünüme geri düşmesini engelleyen şeydir.

    • SizBir tasarım sistemi seçersiniz, kesme noktalarını adlandırırsınız ve görünmesi gereken herhangi bir bileşeni işaretlersiniz.
    • CopilotCopilot CLI, bir satır yazmadan önce DESIGN.md belirteçlerini ve duruş kurallarını bağlama çeker.
    • OpenDesignOpenDesign tasarım sistemi kitaplığını sunar ve seçilen sistemi beceri şablonuna bağlar.
    • KontrolBelirteçlerin markanızla eşleştiğini kontrol edin: bir vurgu, amaçlanan yazı tipleri, amaçlanan yarıçap.
  3. 3

    Arayüzü Oluştur

    Copilot CLI kendi kendine yeten bir HTML eseri yazar: düzen, stiller, etkileşimler ve kararlı kancalar.

    • SizBeklersiniz veya açıklayıcı bir soruyu yanıtlarsınız. Burada yapılandırılacak bir şey yok.
    • CopilotCopilot CLI bölümleri planlar, HTML, CSS ve JavaScript'i yazar, dosyayı çalıştırır ve başarısız olanı onarır.
    • OpenDesignOpenDesign eseri proje klasöründe saklar ve önizleme için dizinler.
    • KontrolHenüz bir şey yok. Dosyayı işlendikten sonra değerlendirin, kaynaktan değil.
  4. 4

    Önizleme

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

    • SizGenişlikleri değiştirirsiniz, etkileşimleri dener ve öğelere yorum bırakırsınız.
    • CopilotCopilot CLI, önizlemedeki yorumlarınızı okur ve bir sonraki revizyonu hazırlar.
    • OpenDesignOpenDesign önizlemeyi işler ve yorumlar ile düzenlemeler için data-od-id hedeflerini sunar.
    • KontrolHiyerarşiyi, kontrastı, 390px'te taşmayı, odak durumlarını ve vurgunun idareli kullanılıp kullanılmadığını kontrol edersiniz.
  5. 5

    Revize Et ve Doğrula

    Önizlemedeki öğeleri işaret ederek değişiklik isteyin. Her revizyon yeni bir dosya olarak gelir; hiçbir şey haber verilmeden üzerine yazılmaz.

    • SizYorumları isteklere dönüştürürsünüz ve görevin ne zaman tamamlandığına karar verirsiniz.
    • CopilotCopilot CLI değişiklikleri yerinde uygular ve dosyayı yeniden çalıştırır.
    • OpenDesignOpenDesign sürümleri yan yana tutar ve işiniz bittiğinde bir görüntü veya HTML'i dışa aktarır.
    • KontrolYalnızca değişen alanı yeniden kontrol edersiniz, ardından her kesme noktasında bir kez tüm sayfayı kontrol edersiniz.

Kaynaklar

Copilot Tasarım Kaynakları

Skill'ler

Tasarım Skill'leri

Copilot'ın OpenDesign içinde ürettiği eser türleri, her tür için bir beceri ile.

Skill'lere göz atın Tasarım sistemleri

Tasarım Sistemleri

Copilot bir dosya oluşturmadan önce bağlanacak marka belirteçleri ve bileşenleri.

Sistemlere göz atın Şablonlar

Şablonlar

Sunumlar, açılış sayfaları ve ürün ekranları başlatmak için şablonlar.

Şablonlara göz atın

Sınırlamalar

Copilot Sınırları, Çalıştırdığınız Kontroller ve Yedekler

  • KapsamCopilot CLI özel talimat dosyalarını ve AGENTS.md'yi otomatik olarak okur ve görev başına Anthropic, OpenAI ve Google'dan öncü modeller arasında geçiş yapabilirsiniz. Bu sayfa, her Copilot özelliği değil, OpenDesign'a bağlı bir ajan olarak Copilot hakkındadır.
  • Kullanım LimitleriKullanım sınırları ve maliyet, kullandığınız kimlik bilgisine — bir GitHub Copilot aboneliğine — bağlıdır. Bu sayfa ücretsiz kotalarla ilgili hiç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ı kontrol edin.
  • Çıktı HTML'dirÇıktılar HTML dosyaları biçiminde gelir; vektör tasarım dosyaları biçiminde değil.
  • 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ü yalnızca ilk geçiş olarak değerlendirin.
  • Yedek ÇözümAjan kullanılamıyorsa veya bir görev başarısız olursa, yüklü sürüm için bağlantı talimatlarını ve kimlik doğrulamayı kontrol edin. Yapılandırmayı değiştirmeden önce hatayı ve son çalışan çıktıyı saklayın.

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ı Tasarıma Bu Kadar Uygun Kılan 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ı için: Copilot CLI mı yoksa 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 Bağlama
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.
GitHub Copilot CLI aslında nedir
GitHub Copilot CLI, GitHub'ın terminal-native kodlama ajanıdır. Deponuzu okur, dosyaları düzenler, kabuk komutlarını çalıştırır ve mevcut GitHub hesabınızla kimlik doğrulanmış olarak GitHub bağlamınızla — sorunlar, pull request'ler ve depolar — doğrudan çalışır. GitHub'ın Copilot kodlama ajanıyla aynı ajan tabanlı altyapı tarafından desteklenir, bu nedenle yalnızca satırları tamamlamak yerine karmaşık görevleri planlar ve yineler. Eylül 2025'te açılan bir genel önizlemenin ardından Şubat 2026'da genel kullanıma sunuldu.

Tasarım çalışmaları için iki özellik öne çıkar. Özel talimat dosyalarını okur — .github/copilot-instructions.md içindeki depo geneli kurallar artı AGENTS.md — böylece tasarım kurallarınız her çalıştırmada otomatik olarak dahil edilir. Ve birden çok temel model sağlayıcısını destekler, böylece /model komutuyla görev başına modeli, belirli bir UI hakkında en iyi akıl yürüten modele geçirebilirsiniz.

Talimat dosyaları: Copilot CLI, .github/copilot-instructions.md içindeki depo talimatlarını, .github/instructions altındaki yola özgü dosyaları ve AGENTS.md'yi okur — tasarım kurallarınızı, token'larınızı ve inceleme kontrol listelerinizi kodlamak için doğal yer.

Yerleşik araçlar + MCP: GitHub'ın MCP sunucusu yerleşik olarak gelir ve dosya ile kabuk araçlarını çalıştırır; canlı bir Figma dosyası gibi harici bağlam için /mcp add ile özel MCP sunucuları ekleyebilirsiniz (~/.copilot altındaki mcp-config.json içinde saklanır).

Model seçimi: Anthropic, OpenAI ve Google'dan öncü modeller arasından seçim yapmak için /model komutunu kullanın — görev başına geçiş yapın, hepsi mevcut Copilot aboneliğinizle.

Kimlik bilgisi: aktif bir GitHub Copilot aboneliği (Pro, Pro+, Business veya Enterprise)

Kurulum: npm install -g @github/copilot, ardından copilot'u çalıştırın

Sağlayıcı: GitHub
Depo talimatları ve model seçimi tasarıma neden uygundur
Copilot CLI'nin tasarım avantajı iki özellikten gelir — ancak her ajan için olduğu gibi, zevk yine de dışarıdan sağlanmalıdır.

Depoyla birlikte taşınan kurallar: Copilot CLI .github/copilot-instructions.md ve AGENTS.md'yi otomatik olarak okuduğu için, token'larınız, primitive'leriniz ve inceleme kurallarınız her çalıştırmada bağlamda olur — ajan varsayılan bir görünüm yerine bir markaya göre çalışır.

Görev başına doğru modeli seçin: Anthropic, OpenAI ve Google arasında model seçimi, belirli bir düzen hakkında en iyi akıl yürüten modele uzanabileceğiniz, ardından iş akışınızı değiştirmeden bir sonraki görev için geçiş yapabileceğiniz anlamına gelir.

MCP aracılığıyla gerçek spesifikasyonlar: Yerleşik GitHub MCP sunucusu artı bir Figma MCP sunucusu, ajanı token'larınıza, bileşenlerinize ve gerçek spesifikasyonlara yönlendirir, böylece yaklaşık değerler üretmek yerine kaynaktan inşa eder.

Zevk, 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ı ders: Copilot CLI 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ı).
Sıfırdan Tasarım Çalışmaları için Copilot CLI Kurulumu
Kurulum sırası: yükle → kimlik doğrula → bir model seç → talimatları yaz → tarayıcı doğrulamasını etkinleştir.

Tasarım kurallarınızı kodlayın: Token'larınızı, primitiflerinizi ve kurallarınızı .github/copilot-instructions.md veya AGENTS.md içine koyun, 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: Copilot'ın gerçek bir tarayıcıda işlenmesi ve yalnızca derlemenin geçtiğini onaylamak yerine çıktısını kesme noktaları arasında kontrol etmesi için bir Playwright veya tarayıcı MCP'si bağlayın.

Komutlar ve değişebilecek sürüme özgü ayrıntılar için güncel kurulum bölümünü kullanın.

# 1. Copilot CLI'yi yükleyin (Node.js gerekir) npm install -g @github/copilot # 2. Projenizde başlatın ve ilk çalıştırmada kimlik doğrulayın cd your-project copilot # /login komutunu çalıştırın ve oturum açmak için istemleri izleyin # 3. Görev için bir model seçin # oturum içinde: /model # Anthropic, OpenAI veya Google'dan bir öncü model seçin # 4. Özel talimatları ve Figma MCP sunucusunu ekleyin (isteğe bağlı) # .github/copilot-instructions.md veya AGENTS.md yazın /mcp add # tasarım teslimi için Figma MCP sunucusunu ekleyin
Önceki kılavuzdan tarihsel komut örneği; geçerli sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Ekran görüntüsünden UI'a iş akışı
Copilot CLI ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüsünü çalışan, duyarlı bir UI'a dönüştürmek ve eşleşene kadar yinelemektir — çıktıyı referansa geri karşılaştırmak için güçlü bir çok modlu modele yaslanarak.

Elindeki en net görsel referanslardan başla — ve sadece bir ana görsel değil, birden fazla durumu (masaüstü ve mobil, hover, boş, yükleniyor) dahil et.

İstemde spesifik ol; belirsiz istemler güçlü bir modelle bile genel UI üretir.

Tasarım sistemini ve kurallarını .github/copilot-instructions.md veya AGENTS.md içinde tut ve Copilot'a token'ların ve kurallı primitiflerin nerede olduğunu söyle.

Bir geliştirme sunucusu çalıştır ve Copilot'ın gerçek bir tarayıcıda işlenmesini sağla, sonucu kontrol etmek için kesme noktalarına yeniden boyutlandır.

Copilot'ın uygulamasını ekran görüntüleriyle karşılaştırmasını sağlayarak yinele — sadece derlendiğini onaylamasını değil.

Copilot'ı referans görüntülerine yönlendir ve somut kısıtlamalar ver; çalıştırmadan önce onayın için her dosya düzenlemesini veya komutu önizler:

İstemleri küçük ve odaklı tut, iyi yinelemeleri işle ve kötüleri geri al (geri aldığında Copilot'a söyle), böylece her geçiş temiz bir temel üzerine inşa edilir.

copilot # istemde: > Tasarımı reference-desktop.png ve reference-mobile.png içinde uygula React + Vite + Tailwind + TypeScript ile. .github/copilot-instructions.md içinde açıklanan 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 kesme noktaları arasında referanslarla eşleşene kadar yinele.
Önceki kılavuzdan tarihsel komut örneği; geçerli sözdizimini bağlantılı satıcı belgelerinde doğrulayın.
Özel talimatlar, MCP ve uzantılar
Üç uzantı noktası, Copilot 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 oturur.

Özel talimatlar: Depo kuralları .github/copilot-instructions.md dosyasında bulunur (yola özgü dosyalar .github/instructions ve AGENTS.md altında). Tasarım kurallarınız için kalıcı bir yuvadır ve her çalıştırmada otomatik olarak dahil edilir.

MCP sunucuları: Copilot CLI, GitHub'ın MCP sunucusuyla birlikte gelir ve /mcp add aracılığıyla özel sunucular eklemenize olanak tanır (~/.copilot altındaki mcp-config.json dosyasında saklanır) — tasarım bağlamını getirmenin taşınabilir yolu, en alakalı olarak Figma MCP sunucusu, yalnızca Copilot'ta değil, ajanlar arasında çalışır.

Özelleştirilmiş ajanlar ve yerleşik araçlar: Copilot CLI'nin özelleştirilmiş modları — kod tabanı keşfi, derlemeleri ve testleri çalıştırma, değişiklik incelemesi ve planlama — artı dosya ve kabuk araçları, terminalden ayrılmadan referansları toplamasına ve doğrulama döngüsünü çalıştırmasına olanak tanır.

Bunlar taşınabilir, çok ajanlı yeteneklerdir — tam olarak OpenDesign'in her proje için yeniden oluşturmak yerine orkestre etmek için tasarlandığı türden şeyler.
Tasarım için Copilot CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI
Tasarım çalışmaları için tek bir kazanan yoktur — her ajanın farklı bir gücü vardır ve deneyimli ekipler bunları bir arada kullanır. Adil bir özet:

Copilot CLI — Çoklu model seçimi (Anthropic, OpenAI, Google) ve Copilot aboneliğinizde derin GitHub entegrasyonu — Göreve göre en iyi modeli seçme ve GitHub deponuza bağlı talimat odaklı çalışma

Codex — Bir ön uç becerisiyle güçlü görsel cila; korumalı alanda eşzamansız derlemeler — Devredilen eşzamansız 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 arayüz ç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

Topluluğun yinelenen kararı, zevkin insanlardan geldiğidir: hepsi, beceriler, referanslar ve kısıtlamalar olmadan genel bir estetiğe varsayılan olarak sahiptir. Çö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
AI tarafından üretilen tasarımla ilgili en yaygın şikâyet, genel görünmesidir — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir AI yaptı” diye bağıran Inter ve mor havası. Bildirilen diğer sorunlar arasında bozuk mobil düzenler ve talimatların UI metnine sızması yer alır. Bunların hiçbiri Copilot CLI'ye özgü değildir; herhangi bir ajan özenle derlenmiş bir tasarım bağlamı olmadan çalıştığında olan şeylerdir.

Estetik bir beceri ekleyin: Özenle derlenmiş 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: Düzenlerin mobilde sessizce bozulmaması için bir tarayıcı MCP ile kırılma noktaları boyunca render edin ve kendi kendinizi kontrol edin.

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ı özel talimatlara kodlayın: “hero kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” tarzındaki kuralları, ajanın her çalıştırmada okuduğu .github/copilot-instructions.md veya AGENTS.md içine koyun.

Dikkat edin: Her hafifletme, ajana özenle derlenmiş bir tasarım bağlamı vermekle ilgilidir. Bu bağlamı her proje için elle sürdürmek, OpenDesign'in ortadan kaldırdığı zahmetli iştir.
OpenDesign içinde Copilot CLI ile tasarım yapma
OpenDesign, yukarıdaki iş akışının sürekli talep ettiği açık kaynak tasarım katmanıdır. GitHub Copilot CLI'yi birinci taraf bağdaştırıcı olarak ele alır ve onu özenle derlenmiş bir beceri ve tasarım sistemi kütüphanesi, yapılandırılmış bir render hattı ve yerel bir masaüstü UI içine sarar — böylece Copilot'u iyi yapan tasarım bağlamı ilk çalıştırmadan itibaren oradadır, her seferinde elle bir araya getirilmez. OpenDesign bağımsız, açık kaynaklı (Apache-2.0) ve yerel önceliklidir; bu yüzden eşleşme uygundur: işi ajan yapar, dosyalarınız ve kimlik bilgileriniz sizde kalır.

OpenDesign'i kurun ve ajanınız olarak GitHub Copilot CLI'yi seçin.

GitHub Copilot aboneliğinizle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerinden proxy'lenmez.

Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları üretin.

Her çıktı ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi deponuzda yaşar.

Aynı Copilot CLI ajanı, aynı abonelik — artı çevresinde gerçek, taşınabilir, açık kaynak bir tasarım iş akışı. OpenDesign yerel öncelikli ve Apache-2.0'dır, bu yüzden işiniz veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.
OpenDesign GitHub veya Microsoft ile bağlantılı mı?
Hayır. OpenDesign bağımsızdır; GitHub Copilot, GitHub, Inc. ve Microsoft'un ticari markasıdır.