83.3K+İndir
Kullanım kılavuzuna geç
design-consultationyazan Garry Tan

Design Consultation Skill.

Marka ve tasarım sistemi çalışmaları için Claude Code ve Codex skill: tam bir tasarım sistemi öneren ürün tasarımı danışmanlığı: estetik, tipografi, renk, düzen, hareket.

  • Brand & Design Systems
  • Tasarım sistemi
OpenDesign İndirKullanım kılavuzunu görüntüle
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okunmuştur · tam hali 67.098 karakter

01 Ne yapar

design-consultation Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Kıdemli bir ürün tasarımcısı gibi davranarak eksiksiz bir tasarım sistemi oluşturan bir tasarım danışmanlığı skill'i. Web araması ve görsel analiz yoluyla ürün ortamını araştırır; tipografi (varsayılanlar değil, belirli fontlar), renk sistemleri (hex değerli CSS değişkenleri), düzen yaklaşımları (kompozisyon odaklı) ve estetik yön önerir. Skill, projenin tasarım kaynağı olarak DESIGN.md dosyası üretir; isteğe bağlı olarak sistemin gerçek ekranlara uygulanışını gösteren AI mockup'lar da sunar.

Hem Aside tarayıcısını (kullanıcının gerçek oturumları) hem de headless yedek modu destekler, oturumlar arasında kalıcı bir zevk profili tutar ve Codex ile Claude subagent'tan dış tasarım seslerini entegre eder. Skill, katı bir form gibi değil sohbet tarzında çalışır, her önerinin gerekçesini açıklar ve tek başına en iyi seçimler yerine bütünlüğe öncelik verir.

Neler üretir

  • Tasarım sisteminin gerçek ekranlara uygulanışını gösteren AI mockup'lar (gstack designer mevcutsa)
  • Canlı tipografi ve renk örnekleri içeren HTML önizleme sayfası (designer mevcut olmadığında yedek)
  • Oturumlar arasında onaylanan ve reddedilen tasarım seçimlerini takip eden kalıcı zevk profili JSON'u
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Ürün Bağlamını Topla

    Ürünü anlamak için mevcut DESIGN.md, PRODUCT.md, README, package.json ve office-hours çıktısını okur.

  2. 02
    Ortamı Araştır

    İstendiğinde, 5-10 rakip ürün bulmak için Aside tarayıcısını veya WebSearch'ü kullanır, tam sayfa ekran görüntüleri alır, fontları, renkleri, düzenleri ve estetik yönü analiz eder.

  3. 03
    Dış Sesleri Danış

    İsteğe bağlı olarak bağımsız tasarım önerileri üretmek için Codex ve Claude subagent'ı paralel olarak başlatır.

  4. 04
    Eksiksiz Tasarım Sistemi Öner

    Belirli font adları, hex renk değerleri, CSS değişkenleri, düzen yaklaşımı ve estetik yön içeren fikir sahibi bir öneri sunar.

  5. 05
    Önizleme Ürünleri Oluştur

    gstack designer mevcut olduğunda tasarım sistemini gerçek ekranlara uygulanmış şekilde gösteren AI mockup'ları veya canlı tipografi ve renk örnekleri içeren bir HTML önizleme sayfası oluşturur.

  6. 06
    DESIGN.md Yazın

    Projenin tasarım doğruluk kaynağını, front-matter token'ları ve gerekçe bölümleriyle açık DESIGN.md formatında üretir.

02 Uyumunuzu bulun

design-consultation Skill Ne Zaman Kullanılır

Bu tür marka ve tasarım sistemi işlerinde Claude Code veya Codex'te design-consultation skill'ini kullanın. Uygunluk ve sınırlamalar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Mevcut bir tasarım sistemi veya DESIGN.md olmadan yeni bir projenin arayüzüne başlarken
  • Açıkça tasarım sistemi, marka kılavuzları veya DESIGN.md oluşturulması istendiğinde
  • Kategori normlarından bilinçli tasarım ayrılıklarıyla farklılaşmaya ihtiyaç duyan ürünler

Sınırları Bilin

  • İddia edilen bir sınırlama veya gereksinim ("API bunu yapamaz", "X bir kimlik bilgisi gerektirir", "bu platformda bu imkansız") maddi bir iddiadır.
  • Bunu sadece aynen hata, belgelenmiş ifade veya canlı bir deneme elinizde olduğunda belirtin — bir hatayı tanıdık bir hikayeyle eşleştirmek kanıt değildir.
  • Ucuz bir deneme soruyu çözdüğünde, kullanıcıya herhangi bir şey sormadan veya bir adımı engellenmiş ilan etmeden ÖNCE çalıştırın.

Ne Sağlamalısınız

  • Araştırma tercihiRakip ürünleri web araması ve görsel analiz yoluyla mı araştıracak, yoksa skill'in yerleşik tasarım bilgisinden mi çalışacak.
  • Dış görüşler seçimiİsteğe bağlı: bağımsız perspektifler için Codex tasarım değerlendirmesini ve Claude alt ajan tasarım önerisini paralel olarak çalıştırıp çalıştırmama.
  • Mevcut DESIGN.mdVarsa, skill bunu okur ve güncelleme, sıfırdan başlama veya iptal etme konusunda sorar. Eski formattan açık spesifikasyona dönüştürmeyi de yönetir.

03 Skill'in içinde

design-consultation Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Asla Yasaklı Yazı Tipleri, Asla Fazla Kullanılan Görüntü Yazı Tipleri

    Operate veya Read yüzeylerindeki gövde veya arayüz metni, role özgü bir listeyi takip eder. Hiçbir rolde yasaklı bir yazı tipi, görüntü sesi olarak da fazla kullanılan bir yazı tipi bulunmaz.

  2. Varsayılanlar Değil, Belirli Yazı Tipleri Gereklidir

    Tipografi önerileri belirli yazı tiplerini adlandırmalıdır—asla Inter, Roboto, Arial veya sistem varsayılanları değil.

  3. Uyum, Bireysel Optimizasyona Üstün Gelir

    Her parçanın diğer her parçayı güçlendirdiği bir tasarım sistemi, bireysel olarak optimal ama birbiriyle uyumsuz seçimlerden oluşan bir sistemden daha iyidir.

  4. Her Öneri İçin Gerekçe Gereklidir

    Asla nedenini açıklamadan bir tasarım seçimi önermeyin. Her yazı tipi, renk, düzen veya estetik karar; ürün bağlamına, kullanıcı ihtiyaçlarına veya farklılaşma stratejisine bağlanmalıdır.

  5. Zevk Profili Kalıcıdır ve Zamanla Azalır

    Skill, oturumlar arasında onaylanan ve reddedilen tasarım seçimlerini takip eden ~/.gstack/projects/$SLUG/taste-profile.json dosyasını sürdürür. Güven puanları haftada %5 azalır.

  6. Akılda Kalıcı Şey Zorlayıcı Faktörü

    Bir tasarım sistemi önermeden önce skill, kullanıcıya ilk karşılaşmadan sonra ne hatırlanmasını istediğini sorar.

  7. Katı Bir İş Akışı Değil, Sohbet Odaklı

    Skill, bir form değil bir tasarım danışmanı olarak çalışır. Kullanıcılar kararları tartışmak için herhangi bir noktada sohbete girebilir.

04 İşe koyun

design-consultation'ı Claude Code veya Codex'e Kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

design-consultation'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

design-consultation/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Marka ve Tasarım Sistemi İş Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • DESIGN.md mevcut ve tasarım token'larını (renkler, yazı tipleri, boşluklar) içeren front-matter barındırıyor
  • Renk sistemi; arka plan, yüzey, birincil metin, soluk metin, vurgu için hex değerli CSS değişkenleri içeriyor
  • Zevk profili varsa, tasarım önerisi yerleşik tercihlere atıfta bulunuyor veya bilinçli olarak onlardan ayrılıyor

OpenDesign'da design-consultation dahili olarak gelir: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill dosyası
design-consultation/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 71f6048
License
MIT LICENSE dosyasından.
Repository yıldızları
132.921 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm garrytan/gstack deposu için alınmıştır; bu katalogda 7 skill içerir. design-consultation için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Bu skill ne zaman çağrılırDESIGN.md oluşturur; mevcut siteler için /plan-design-review kullanılır; tasarım sistemi taleplerinde tetiklenir
  2. Ön hazırlık (önce çalıştırılır)gstack-skill-start'ı çalıştırır; düşük modu yönetir; talimat bloklarını işler; oturum türünü belirler
  3. TARAYICI KURULUMUAside tarayıcısının kullanılabilirliğini kontrol eder; gerçek oturum onayını yönetir; kullanıcının tarayıcısını yönlendirme kurallarını tanımlar
  4. Tarayıcı yedeği: gstack'in kendi başsız tarayıcısıAside kullanılamadığında $B ikili dosyasını bulur; Aside komut dosyalarını $B komutlarına çevirir; çerezsiz oturumları yönetir
  5. TASARIM KURULUMUAI mockup üretimi için gstack designer ikili dosyasını kontrol eder; kullanılabilir komutları listeler; artifact yol kurallarını belirler
  6. Önceki ÖğrenimlerProje genelinde veya projeye özel öğrenimleri arar; ilk çalıştırmada proje genelindeki tercih için sorar
  7. Aşama 0: Ön kontrollerMevcut DESIGN.md'yi kontrol eder; güncelleme/yeniden başlatma/iptal sunar; biçimi doğrular; dönüştürmeyi yönetir; kod tabanından ürün bağlamını toplar
  8. Aşama 1: Ürün BağlamıÜrün/hedef kitle/sektör/tür kapsayan tek soru; hatırlanabilir şey zorlayıcı sorusu; varsa zevk profilini okur
  9. Web araştırması Aside içinde çalışırWeb aramaları için Aside ajanını kullanır; WebSearch aracına geri döner; sorguları temizler; sonuçları güvenilmeyen içerik olarak ele alır
  10. Aşama 2: Araştırma5-10 rakip ürünü belirler; ekran görüntüleri alır; yazı tiplerini/renkleri/düzenleri analiz eder; üç katman üzerinden sentezler
  11. Design Outside Voicesİsteğe bağlı olarak Codex ve Claude alt ajanını paralel çalıştırır; uyumları ve farklılıkları sentezler; sonucu kaydeder
  12. Önemli KurallarMenü sunmak yerine öner; gerekçe zorunlu; bireysel seçimler yerine bütünlük; katı değil sohbet havasında; nihai seçimi kabul et
Skill'in Kendi Açıklaması
"Tasarım danışmanlığı: ürününüzü anlar, alanı araştırır, eksiksiz bir tasarım sistemi önerir (estetik, tipografi, renk, düzen, boşluk, hareket) ve yazı tipi + renk önizlemesi oluşturur... (gstack)"

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 67.098 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

design-consultation Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bu, Cursor, Windsurf veya diğer Claude tabanlı ajanlarla çalışır mı?

Evet, ancak tarayıcı entegrasyonu Aside'a (yalnızca macOS 15+) veya gstack başsız tarayıcı yedeğine bağlıdır. İkisi de yoksa, skill görsel rekabet araştırmasını atlar ve dahili tasarım bilgisinden çalışır. Temel tasarım danışmanlığı—ürün bağlamı, tipografi/renk/düzen önerisi, DESIGN.md oluşturma—her ortamda çalışır.

Tasarım Danışmanlığı

design-consultation'ı gerçek bir marka ve design-system çalışma görevi üzerinde çalıştırın.

design-consultation skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills bölümünden skill'i seçin, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation