design-shotgunyazan Garry Tan

Design Shotgun Skill.

Claude Code ve Codex için kullanıcı arayüzü tasarımına yönelik bir skill: paralel olarak birkaç tasarım varyantı oluşturur ve geri bildirim için bir karşılaştırma panosu açar.

Web & UI
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

garrytan/gstack · design-shotgun/SKILL.mdSKILL.md

--- name: design-shotgun description: Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (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ı 2026-09-14 tarihinde kaynak dosyadan okundu · tam hali 52.851 karakter

01 Ne yapar

design-shotgun Skill'inin Claude Code ve Codex İçinde Yaptıkları

Ö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

design-shotgun, birden fazla AI tasarım varyantını paralel olarak üreten, bunları HTTP üzerinden sunulan bir karşılaştırma panosunda yan yana açan ve yapılandırılmış geri bildirim toplayan görsel bir tasarım keşif aracıdır. Kalıcı bir zevk profili (fontlar, renkler, düzenler, estetikler) aracılığıyla kullanıcının zevkini oturumlar arasında hatırlar ve yeni üretimleri kanıtlanmış tercihlere doğru yönlendirir.

Skill, yakınsama karşıtlığını zorunlu kılar (her varyant farklı fontlar, paletler ve düzenler kullanmalıdır) ve tüm ürünleri oturumlar arası kalıcılık için ~/.gstack/projects/$SLUG/designs/ dizinine kaydeder. Hem yeni keşifleri hem de önceki oturumları yeniden ziyaret etmeyi destekler; yeniden üretme, varyantlar arasında öğeleri yeniden karıştırma ve kullanıcı bir yönü onaylayana kadar yineleme için geri bildirim döngüleri sunar.

Neler üretir

~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png içine kaydedilen N varyant PNG dosyası
Rastgele bir portta HTTP üzerinden sunulan, geri bildirim toplama arayüzlü (design-board.html) HTML karşılaştırma panosu
Tercih edilen varyantı, puanlamaları, yorumları ve tarihi kaydeden, oturumlar arası zevk öğrenimi için approved.json dosyası
Her boyut için güven ağırlıklı onaylanmış/reddedilmiş kalıpları içeren güncellenmiş taste-profile.json (şema v1)

Örnek istemi görün ↗

Nasıl Çalışır

01
Oturum Tespiti ve Zevk Geri Kazanımı
Önceki oturumlardan approved.json dosyaları için ~/.gstack/projects/$SLUG/designs/ dizinini kontrol eder ve kalıcı taste-profile.json dosyasını okur (haftalık %5 güven azalmalı şema v1).
02
Yakınsama Karşıtlığıyla Paralel Varyant Üretimi
Eşzamanlı yürütme için tek bir mesajda N Agent alt ajanı (her varyant için bir tane) başlatır.
03
Geri Bildirim Döngülü HTTP Karşılaştırma Panosu
HTML panosu üretmek ve rastgele bir portta HTTP sunucusu başlatmak için $D compare --serve komutunu çalıştırır.
04
Geri Bildirim Onayı ve Zevk Güncellemesi
Tercih edilen varyantı, puanlamaları ve yorumları özetler; kaydetmeden önce AskUserQuestion aracılığıyla onaylar.

02 Uyumunuzu bulun

design-shotgun Skill Ne Zaman Kullanılır

Bu tür UI tasarımı işi için Claude Code veya Codex'te design-shotgun becerisini kullanın. Uygunluk ve sınırlar, becerinin kendi dosyasından alınmıştır.

İyi Uyum

Kullanıcının tanımladığı ancak henüz görmediği herhangi bir UI özelliği için geliştirme sırasında herhangi bir zamanda çalıştırılan bağımsız tasarım keşfi
Kullanıcı 'bunun görünümünü sevmiyorum' dediğinde ve mevcut bir sayfa için alternatif yönler görmek istediğinde yapılan görsel beyin fırtınası
Aynı ekran için seçimleri ayarlamak veya yeni varyantlar keşfetmek amacıyla önceki tasarım keşiflerine geri dönmek

Sınırları Bilin

Üretime hazır HTML/CSS uygulamasını sonlandırma (bunun için bir yön onaylandıktan sonra /design-html kullanın)
Karşılaştırmasız tek varyant üretimi (skill, yan yana karşılaştırma için paralel olarak birden çok varyant üretir)

Ne Sağlamalısınız

Evrim yolu için ekran görüntüsü URL'siKullanıcı 'BUNU sevmiyorum' derse URL'yi isteyin.
Varyant sayısı (varsayılan 3, en fazla 8)Bağlam toplama AskUserQuestion içinde sorulur. Önemli ekranlar için daha fazla varyant.

03 Skill'in içinde

design-shotgun Skill'inin 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ı.

Tüm Ürünler ~/.gstack/projects/$SLUG/designs/ Konumuna
Tasarım mockup'ları, karşılaştırma panoları ve approved.json ~/.gstack/projects/$SLUG/designs/ konumuna kaydedilmelidir; asla .context/, docs/designs/, /tmp/ veya proje-yerel dizinlere değil.
Zevk Belleği Varsayılan Olarak Üretimi Önyargılı Hale Getirir
taste-profile.json'ı (haftada %5 güven bozulmalı şema v1) okur ve her boyut (yazı tipleri, renkler, düzenler, estetik) için en iyi 3 onaylanan/reddedilen girişi özetler.
Sandbox Kısıtlamaları Nedeniyle Önce /tmp/'ye Üret, Sonra Kopyala
PNG'leri her zaman önce /tmp/variant-{letter}.png konumuna üretin, ardından son ~/.gstack/projects/$SLUG/designs/ konumuna cp yapın.
Bağlam Toplamada En Fazla İki Tur
DESIGN.md, PRODUCT.md ve kod tabanından çıkardığınız bilgileri önceden doldurun. Eksik bağlamı bir AskUserQuestion içinde isteyin.
Kaydetmeden Önce Geri Bildirimi Onaylayın
Geri bildirim alındıktan sonra (HTTP POST veya AskUserQuestion yedek yöntemi ile), tercih edilen varyant, puanlar, yorumlar ve yönü içeren bir özet çıktısı verin.
DESIGN.md Varsayılan Kısıtlamadır
DESIGN.md varsa, varsayılan olarak projenin tasarım sistemini izleyin.
Karşılaştırma Panosu Seçici Olandır, AskUserQuestion Değil
Kullanıcının hangi varyantı tercih ettiğini sormak için AskUserQuestion kullanmayın. Karşılaştırma panosu UI'ı seçicidir.

04 İşe koyun

Claude Code veya Codex'e design-shotgun Yükle

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

Claude Code, Codex veya Ajanınıza design-shotgun 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-shotgun

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

Skill'e İlk UI Tasarım Görevini Verin

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

Starter prompt

Explore design directions for the [dashboard homepage] where [enterprise SaaS users] land after login. I want to see 4 variants — one minimal/data-dense for power users, one with more guidance for first-timers, one that emphasizes recent activity, and one optimized for mobile-first. The existing dashboard in src/app/dashboard/ feels cluttered and users complain they can't find the export button. Edge cases: zero data state, 50+ recent items, and users who only use mobile.

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:

Pano açılmadan önce kullanıcının tüm varyantları terminalde bir kerede görmesi için her üretilen PNG'yi satır içinde okuyun
Karşılaştırma panosunun çalıştığını doğrulayın ve pano URL'sini stderr çıkışından ayrıştırın (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Tasarım dizininde geri bildirim dosyalarını kontrol edin (Gönder için feedback.json, Yeniden Oluştur/Remix için feedback-pending.json)
$D check --image <path> --brief <brief> komutunu kullanarak oluşturulan her varyant üzerinde kalite kontrolü çalıştırın; kontrol başarısız olursa oluşturma işlemini bir kez yeniden deneyin

OpenDesign'da design-shotgun'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hı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-shotgun/SKILL.md Doğrulama sırasında içerik checksum'ı kaydedildi; commit 71f6048
License: MIT LICENSE dosyasından.
Repository yıldızları: 132.921 GitHub anlık görüntüsü, bu katalogda 7 skill içeren garrytan/gstack deposunun tamamı için 2026-09-14 tarihinde alınmıştır. design-shotgun için bir derecelendirme 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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu skill ne zaman çağrılırUI özellikleri için bağımsız tasarım keşfi, görsel beyin fırtınası, 'bunun görünüşünü sevmedim' durumları
Ön bilgi (önce çalıştırın)gstack-skill-start'ı çalıştırır, STATUS satırlarını okur, düşürülmüş modu, talimat bloklarını, oturum tespitini yönetir
Plan Modu Güvenli İşlemlerPlan modunda izin verilenler: $B, $D, codex exec/review, ~/.gstack/'e yazma, plan dosyası, ürünler için open
Plan Modu Sırasında Skill ÇağırmaSkill talimatları yürütülebilirdir, referans değildir; AskUserQuestion tur sonunu karşılar; iş akışı tamamlandıktan sonra ExitPlanMode
AskUserQuestion BiçimiAraç çözümlemesi SESSION_KIND/CONDUCTOR_SESSION'a göre dallanır; kullanılamayan/başarısız çağrılar için düz metin yedeği; zorunlu onay üçlüsü
Ürün Senkronizasyonu (skill başlangıcı)Skill başlangıç çıkışı senkronizasyonu zaten çalıştırdı; GBrain ipucuna, ARTIFACTS_SYNC satırlarına, tek seferlik onay kapısına göre hareket edin
Modele Özgü Davranış Yaması (claude)Yapılacaklar listesi disiplini, ağır işlemlerden önce düşün, Bash yerine özel araçları tercih et
Ses TonuGStack ses tonu: somut, inşaatçıdan inşaatçıya, önce noktayı belirt, seçimleri kullanıcı sonuçlarına bağla, sınırlı kapanışlar
Bağlam KurtarmaOturum başlangıcında/sıkıştırmada: son ürünleri, kararları, kontrol noktalarını, zaman çizelgesini kurtarın; RECENT_PATTERN bir şey ima ediyorsa sonraki skill'i önerin
Yazım Stiliİlk kullanımda jargonu açıkla, sonuç odaklı çerçeveleme, kısa cümleler; EXPLAIN_LEVEL: terse ise veya kullanıcı kısa istekte bulunursa atla
Bütünlük İlkesi — Okyanusu KaynatYZ bütünlüğü ucuz kılar; kapsamlı çözümü önerin; kapsam farklıysa Bütünlük: X/10 belirtin
Kafa Karışıklığı ProtokolüYüksek riskli belirsizlik durumunda DUR, durumu adlandır, artı ve eksileriyle 2-3 seçenek sun, sor

Skill'in Kendi Açıklaması

"Design shotgun: birden çok AI tasarım varyantı oluşturun, bir karşılaştırma panosu açın, yapılandırılmış geri bildirim toplayın ve yineleyin. (gstack)"

SKILL.md dosyasından ön-kısım açıklaması. Dosyanın tamamı yaklaşık 52.851 karakter. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

design-shotgun 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.

Skill'in varyant oluşturmak için nelere gereksinimi var (bağımlılıklar, API anahtarları, yerel araçlar)?

Skill, ~/.claude/skills/gstack/design/dist/design konumundaki design ikili dosyasını gerektirir (DESIGN SETUP adımında kontrol edilir). Bu ikili dosya görüntü oluşturma ve kalite kontrollerini yönetir. Kullanılamıyorsa, skill HTML wireframe'lerine geri döner.

Karşılaştırma panosu, rastgele bir port üzerinde yerel bir HTTP sunucusu çalıştırır (harici bağımlılık yoktur). Beğeni hafızası ve approved.json dosyaları yerel olarak ~/.gstack/projects/$SLUG/designs/ dizininde saklanır.

Design Shotgun

design-shotgun'ı gerçek bir kullanıcı arayüzü tasarım görevinde çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından design-shotgun'ı içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın