Tasarım için GitHub Copilot CLI.

GitHub Copilot CLI gerçekte nedir

GitHub Copilot CLI, GitHub'ın terminal yerlisi kodlama ajanıdır. Deponuzu okur, dosyaları düzenler, kabuk komutları çalıştırır ve GitHub bağlamınızla — sorunlar, çekme istekleri ve depolar — doğrudan çalışır; mevcut GitHub hesabınızla kimliği doğrulanır. GitHub'ın Copilot kodlama ajanıyla aynı ajansal koşum takımıyla çalışır, bu yüzden 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 ulaştı.

Tasarım çalışmaları için iki özellik öne çıkar. Özel talimat dosyalarını okur — .github/copilot-instructions.md içindeki depo geneli kurallar ve AGENTS.md — böylece tasarım kurallarınız her çalıştırmada otomatik olarak dahil edilir. Ve birden fazla temel model sağlayıcısını destekler, böylece /model komutuyla görev başına modeli, belirli bir UI hakkında en iyi muhakeme yapan hangisiyse ona değiştirebilirsiniz.

• 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; ayrıca canlı bir Figma dosyası gibi harici bağlam için /mcp add ile (~/.copilot altında mcp-config.json'da saklanır) özel MCP sunucuları ekleyebilirsiniz.
• Model seçimi: Anthropic, OpenAI ve Google'ın öncü modelleri arasından seçim yapmak için /model komutunu kullanın — görev başına değiştirerek, tümü mevcut Copilot aboneliğinizde.

• Sağlayıcı: GitHub
• Kimlik bilgisi: etkin bir GitHub Copilot aboneliği (Pro, Pro+, Business veya Enterprise)
• Kurulum: npm install -g @github/copilot, ardından copilot çalıştırın

Depo talimatları ve model seçimi tasarıma neden uyar

Copilot CLI'nin tasarım avantajı iki özellikten gelir — ama her ajanda olduğu gibi, zevkin yine de sağlanması gerekir.

• Depoyla birlikte hareket eden kurallar: Copilot CLI .github/copilot-instructions.md ve AGENTS.md'yi otomatik okuduğundan, token'larınız, ilkelleriniz ve inceleme kurallarınız her çalıştırmada bağlamdadır — ajan varsayılan bir görünüm yerine bir markaya karşı çalışır.
• Görev başına doğru modeli seçin: Anthropic, OpenAI ve Google genelinde model seçimi, belirli bir düzen hakkında en iyi muhakeme yapan modele uzanabileceğiniz, ardından sonraki görev için değiştirebileceğiniz anlamına gelir — iş akışınızı değiştirmeden.
• 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 spesifikasyonlarınıza yönlendirir, böylece yaklaşık değer yerine kaynaktan inşa eder.

Ders, her ajanın öğrettiğiyle aynıdır: Copilot CLI varsayılan olarak zevke sahip değildir. Ona kısıtlamalar verdiğinizde — bir tasarım sistemi, estetik bir beceri ve somut referanslar — iyi tasarım üretir. Open Design tam olarak bu girdileri paketler, bu yüzden ikisi birbirine uyar (aşağıda daha fazlası).

Tasarım çalışmaları için Copilot CLI'yi sıfırdan kurun

Temiz bir makineden, UI oluşturup doğrulayabilen bir Copilot CLI'ye giden tam yol burada.

# 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

# 3. Choose a model for the task
#    inside the session:
/model            # pick a frontier model from Anthropic, OpenAI, or Google

# 4. Add custom instructions and the Figma MCP server (optional)
#    write .github/copilot-instructions.md or AGENTS.md
/mcp add          # add the Figma MCP server for design handoff

• Tasarım kurallarınızı kodlayın: Token'larınızı, ilkellerinizi ve kurallarınızı .github/copilot-instructions.md veya AGENTS.md içine koyun, böylece çıktı jenerik bir görünüme varsayılan olmak yerine bir markayla eşleşir.
• Tarayıcı doğrulaması ekleyin: Bir Playwright veya tarayıcı MCP'si bağlayın, böylece Copilot gerçek bir tarayıcıda işler ve yalnızca derlemenin geçtiğini onaylamak yerine çıktısını kırılma noktaları genelinde kontrol eder.

Ekran görüntüsünden UI'ye iş akışı

Copilot CLI ile en yüksek kaldıraçlı tasarım döngüsü, bir referans görüntüyü çalışan, duyarlı UI'ye dönüştürmek ve eşleşene kadar yinelemektir — çıktıyı referansla karşılaştırmak için güçlü bir çok modlu modele dayanarak.

1. Elinizdeki en net görsel referanslardan başlayın — ve yalnızca tek bir kahraman görüntü değil, birden fazla durum (masaüstü ve mobil, hover, boş, yükleniyor) ekleyin.
2. İstemde belirgin olun; belirsiz istemler güçlü bir modelle bile jenerik UI üretir.
3. Tasarım sisteminizi ve kurallarınızı .github/copilot-instructions.md veya AGENTS.md içinde tutun ve Copilot'a token'ların ve standart ilkellerin nerede olduğunu söyleyin.
4. Bir geliştirme sunucusu çalıştırın ve Copilot'un sonucu kontrol etmek için kırılma noktalarına yeniden boyutlandırarak gerçek bir tarayıcıda işlemesini sağlayın.
5. Copilot'un uygulamasını ekran görüntülerine geri karşılaştırmasını sağlayarak yineleyin — yalnızca derlendiğini onaylamak değil.

Copilot'u referans görüntülerinize yönlendirin ve somut kısıtlamalar verin; çalışmadan önce her dosya düzenlemesini veya komutu onayınız için önizler:

copilot
# in the prompt:
> Implement the design in reference-desktop.png and reference-mobile.png
  in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens described in
  .github/copilot-instructions.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

İstemleri küçük ve odaklı tutun, iyi yinelemeleri commit edin ve kötüleri geri alın (geri aldığınızda Copilot'a söyleyerek), böylece her geçiş temiz bir temel üzerine inşa edilir.

Özel talimatlar, MCP ve uzantılar

Üç uzantı noktası Copilot CLI'yi sürekli tasarım çalışmaları için pratik kılar ve üçü de açık bir tasarım iş akışına temiz bir şekilde eşlenir.

• Özel talimatlar: Depo kuralları .github/copilot-instructions.md içinde yaşar (.github/instructions altındaki yola özgü dosyalar ve AGENTS.md ile birlikte). Bunlar, her çalıştırmada otomatik olarak dahil edilen, tasarım kurallarınızın kalıcı yuvasıdır.
• MCP sunucuları: Copilot CLI, GitHub'ın MCP sunucusuyla yerleşik gelir ve /mcp add ile (~/.copilot altında mcp-config.json'da saklanır) özel sunucular eklemenize izin verir — en alakalı olarak Figma MCP sunucusu olmak üzere, yalnızca Copilot'ta değil ajanlar genelinde çalışan, tasarım bağlamını getirmenin taşınabilir yolu.
• Uzmanlaşmış ajanlar ve yerleşik araçlar: Copilot CLI'nin uzmanlaşmış modları — kod tabanı keşfi, derleme ve test çalıştırma, değişiklik incelemesi ve planlama için — artı dosya ve kabuk araçları, terminalden ayrılmadan referans toplamasına ve doğrulama döngüsünü çalıştırmasına izin verir.

Bunlar taşınabilir, çok ajanlı yeteneklerdir — Open Design'ın proje başına yeniden oluşturmak yerine orkestre etmek için inşa edildiği türden tam olarak budur.

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 onları üst üste koyar. Adil bir özet:

Tekrarlayan topluluk kanaati, zevkin insanlardan geldiğidir: hepsi beceriler, referanslar ve kısıtlamalar olmadan jenerik bir estetiğe varsayılan olur. Çözülmesi gereken gerçek sorun budur — ve bu, model biçimli değil, tasarım aracı biçimlidir.

Tuzaklar ve “yapay zeka çorbası” görünümünden nasıl kaçınılır

Yapay zeka tarafından üretilen tasarım hakkında en yaygın şikayet, jenerik göründüğüdür — yumuşak gradyanlar, yüzen paneller, aşırı büyük yuvarlatılmış köşeler, dramatik gölgeler, “bunu bir yapay zekanın yaptığını haykıran” bir 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 seçilmiş bir tasarım bağlamı olmadan çalıştığında olan şeydir.

• Estetik bir beceri ekleyin: Özenle seçilmiş bir tasarım becerisi, ajanı varsayılan görünüm yerine gerçek bir yöne bağlanmaya zorlar.
• Gerçek bir tarayıcıda doğrulayın: Bir tarayıcı MCP'siyle kırılma noktaları genelinde işleyin ve öz-denetim yapın, böylece düzenler mobilde sessizce bozulmaz.
• Token ve referans sağlayın: Gerçek tasarım token'ları ve referans ekran görüntüleri, çıktı kalitesi üzerindeki tek en büyük kaldıraçtır.
• Kuralları özel talimatlarda kodlayın: “Kahraman kartı yok, en fazla iki yazı tipi, marka öncelikli hiyerarşi” gibi kuralları, ajanın her çalıştırmada okuduğu .github/copilot-instructions.md veya AGENTS.md içine koyun.

Her hafifletmenin ajana özenle seçilmiş bir tasarım bağlamı vermekle ilgili olduğuna dikkat edin. Bu bağlamı proje başına elle sürdürmek, Open Design'ın ortadan kaldırdığı angaryadır.

Open Design içinde Copilot CLI ile tasarlamak

Open Design, yukarıdaki iş akışının sürekli istediği açık kaynaklı tasarım katmanıdır. GitHub Copilot CLI'yi birinci taraf bir adaptör olarak ele alır ve onu özenle seçilmiş bir beceri ve tasarım sistemi kütüphanesine, yapılandırılmış bir işleme hattına ve yerel bir masaüstü UI'sine sarar — böylece Copilot'u iyi yapan tasarım bağlamı, her seferinde elle birleştirilmek yerine ilk çalıştırmadan itibaren oradadır. Open Design bağımsız, açık kaynaklı (Apache-2.0) ve yerel önceliklidir, bu yüzden eşleşme uyar: ajan işi yapar, dosyalarınız ve kimlik bilgileriniz sizin kalır.

1. Open Design'ı kurun ve ajanınız olarak GitHub Copilot CLI'yi seçin.
2. GitHub Copilot aboneliğinizle kimlik doğrulayın — kimlik bilgileri makinenizde kalır ve asla bizim üzerimizden proxy yapılmaz.
3. Bir tasarım sistemi ve bir beceri seçin, ardından tutarlı bir zevkle sunumlar, prototipler ve açılış sayfaları oluşturun.
4. Her üretim ve DESIGN.md dosyası, barındırılan bir bulutta değil, kendi deponuzda yaşar.

Aynı Copilot CLI ajanı, aynı abonelik — artı etrafında gerçek, taşınabilir, açık kaynaklı bir tasarım iş akışı. Open Design yerel öncelikli ve Apache-2.0'dır, böylece çalışmanız veya kimlik bilgilerinizle ilgili hiçbir şey makinenizden ayrılmaz.

Sıkça sorulan sorular

1. 01 GitHub Copilot CLI gerçekten tasarım çalışması yapabilir mi? +

   Evet — bağlamda estetik bir beceri, bir tasarım sistemi ve gerçek referans görüntülerle, Copilot CLI üretim kalitesinde, duyarlı UI üretir ve çıktıyı referanslara karşı en iyi doğrulayan modeli seçebilirsiniz. Bu bağlam olmadan jenerik bir görünüme varsayılan olma eğilimindedir; bu da Open Design'ın doldurduğu boşluktur.

2. 02 Copilot CLI ile tasarım yapmak için bir aboneliğe ihtiyacım var mı? +

   Evet — Copilot CLI etkin bir GitHub Copilot aboneliği (Pro, Pro+, Business veya Enterprise) üzerinde çalışır; kendi anahtarını getir değildir. GitHub hesabınızla kimlik doğrularsınız. Open Design kimlik bilgilerinizi asla proxy yapmaz — aboneliğiniz doğrudan ajanınız tarafından kullanılır.

3. 03 Copilot CLI'yi özellikle tasarım için iyi yapan nedir? +

   İki şey: depo talimatlarını ve AGENTS.md'yi otomatik okur, böylece tasarım kurallarınız depoyla birlikte hareket eder; ve görev başına Anthropic, OpenAI ve Google'ın öncü modelleri arasında geçiş yapmanıza izin verir. Her ikisi de yardımcı olur — ama zevk yine de sağladığınız tasarım sisteminden, beceriden ve referanslardan gelir.

4. 04 Ön uç tasarımı için Copilot CLI mi Claude Code mu? +

   Her ikisi de güçlüdür. Claude Code, belirli, kod tabanından haberdar tasarım kararlarıyla bilinir; Copilot CLI'nin avantajı, sağlayıcılar genelinde model seçimi ve zaten sahip olabileceğiniz bir abonelikte derin GitHub entegrasyonudur. Birçok ekip her ikisini de kullanır — Open Design, tasarım iş akışınızı değiştirmeden ajan değiştirmenize izin verir.

5. 05 Copilot CLI'yi Figma'ya nasıl bağlarım? +

   /mcp add komutuyla Figma MCP sunucusunu ekleyin; ayarlar ~/.copilot altında mcp-config.json'da saklanır. Copilot daha sonra gerçek tasarım bağlamı çekebilir — bileşenler, değişkenler, düzen verileri — böylece üretilen kod yaklaşık değer yerine kaynağa eşleşir.

6. 06 Open Design GitHub veya Microsoft ile bağlantılı mı? +

   Hayır. GitHub Copilot CLI, GitHub'ın bir ürünüdür; Open Design, onu birinci taraf bir adaptör olarak destekleyen bağımsız bir açık kaynak projesidir. GitHub Copilot, GitHub, Inc. ve Microsoft'un ticari markasıdır.

7. 07 Dosyalarım ve kimlik bilgilerim güvende mi? +

   Evet — Open Design yerel öncelikli ve Apache-2.0'dır. Dosyalarınız, üretimleriniz ve DESIGN.md'niz kendi deponuzda kalır ve GitHub Copilot kimlik bilgileriniz doğrudan ajanınız tarafından kullanılır, asla Open Design sunucuları üzerinden yönlendirilmez.