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

Plan Design Review Skill.

Claude Code ve Codex için tasarım inceleme skill'i: uygulama öncesinde bir tasarım planını bütünlük ve deneyim riski açısından inceler.

  • Tasarım İncelemesi & Erişilebilirlik
  • İnceleme raporu
OpenDesign İndirKullanım kılavuzunu görüntüle
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (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)
Üst bilgi ve bölüm başlıkları 2026-09-14 tarihinde üst akış dosyasından okundu · tam halde 72.139 karakter

01 Ne yapar

plan-design-review 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

Uygulamaya geçmeden önce bir tasarım planını eksiksizlik ve deneyim riski açısından inceler. Yedi tasarım geçişi çalıştırır (Bilgi Mimarisi, Etkileşim Durumları, Kullanıcı Yolculuğu, Boş Durumlar, Görsel Hiyerarşi, AI Slop Riski, Erişilebilirlik), her birini 0-10 arasında puanlar, her birinin nasıl 10 olacağını açıklar, ardından planı buna göre düzeltir. UI kapsamdayken varsayılan olarak gstack designer ile görsel mockup'lar oluşturur.

İsteğe bağlı bir dış görüşler adımı içerir: Codex, OpenAI'nin katı tasarım kurallarına ve turnusol kontrollerine göre değerlendirme yapar; Claude alt ajanı bağımsız bir eksiksizlik incelemesi çalıştırır. Plan modunda çalışır. Canlı site görsel denetimleri için bunun yerine /design-review kullanın. Çıktı, plan hakkında bir belge değil, yapılandırılmış bir inceleme raporuyla birlikte daha iyi bir plandır.

Neler üretir

  • Tasarım açıkları kapatılmış, boyutları puanlanmış ve sona eklenmiş yapılandırılmış bir GSTACK REVIEW REPORT bölümü içeren geliştirilmiş bir plan dosyası
  • Kullanıcının seçtiği varyantı, puanları, yorumları ve geri bildirimleri kaydeden bir karşılaştırma panosu HTML dosyası ve approved.json
  • Dış görüşler çalıştırıldıysa Codex ve Claude alt ajanı bulgularını sentezleyen bir turnusol puan kartı
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Kapsam Kapısı İnceleme Hedefini Onaylar

    Her şeyden önce, plan modu etkin planı otomatik seçmediği veya kullanıcı açıkça bir hedef belirtmediği sürece, kullanıcıya neyin inceleneceğini (branch diff, plan belgesi veya belirli bir sayfa) onaylamasını sorar.

  2. 02
    Varsayılan Olarak Görsel Mockup'lar Oluşturur

    gstack designer kullanılabilir olduğunda ve planın UI kapsamı varsa, izin sormadan hemen mockup'lar oluşturur.

  3. 03
    İsteğe Bağlı Dış Tasarım Görüşleri Paralel Çalışır

    Kullanıcı kabul ederse, Codex'i (katı tasarım kuralları + turnusol kontrolleri) ve Claude alt ajanını (bağımsız eksiksizlik incelemesi) eş zamanlı olarak başlatır.

  4. 04
    Yedi Tasarım Geçişi 0-10 Arasında Puanlar ve Açıkları Düzeltir

    Her boyut için (Bilgi Mimarisi, Etkileşim Durumları, Kullanıcı Yolculuğu, Boş Durumlar, Görsel Hiyerarşi, AI Slop Riski, Erişilebilirlik) planı puanlar, 10/10'un nasıl göründüğünü açıklar, açıkları kapatmak için planı düzenler, yeniden puanlar ve 10 olana veya kullanıcı devam edilmesini söyleyene kadar tekrarlar.

  5. 05
    Plan Dosyasına Yapılandırılmış İnceleme Raporu Yazar

    Çalışmalar/durum/bulgular tablosu, bir VERDICT satırı ve dosyanın son boş olmayan satırı olarak çözülmemiş kararlar durumu içeren bir GSTACK REVIEW REPORT bölümü ekler.

02 Uyumunuzu bulun

plan-design-review Skill Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu tür bir tasarım incelemesi olduğunda plan-design-review skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Kullanıcı, uygulamaya başlamadan önce incelenmesi gereken UI/UX bileşenleri içeren bir plan hazırladı
  • Kodlama başlamadan önce soyut açıklamaları somutlaştırmak için bir tasarım planının görsel mockup'lara ihtiyacı var
  • Bir plan, backend'in ne yaptığını açıklıyor ama kullanıcının ne göreceğini, boş durumları, hata durumlarını veya duyarlı davranışı hiç belirtmiyor

Sınırları Bilin

  • UI kapsamı olmayan yalnızca backend, yalnızca API veya altyapı değişiklikleri
  • Canlı site görsel denetimleri (bunun yerine /design-review kullanın)

Ne Sağlamalısınız

  • UI kapsamı olan bir tasarım planı veya branch diff'iPlan dosyası, kullanıcının yapıştırdığı bir doküman, belirli bir sayfa/yol veya mevcut branch diff'i.
  • Karşılaştırma panosu üzerinden mockup geri bildirimigstack tasarımcısı, kullanıcının varyantları puanladığı, yorum bıraktığı, Regenerate/Remix'e tıkladığı veya nihai bir seçim sunduğu bir karşılaştırma panosunu HTTP üzerinden sunar.

03 Skill'in içinde

plan-design-review Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Tüm Tasarım Ürünleri ~/.gstack/projects/$SLUG/designs/ Dizinine Kaydedilir

    Mockup'lar, karşılaştırma panoları ve approved.json, kullanıcının gstack proje tasarımlar dizinine kaydedilmelidir; asla .context/, docs/designs/, /tmp/ veya herhangi bir proje-yerel dizine kaydedilmemelidir.

  2. Öncelik Hiyerarşisi: Step 0 > Mockup'lar > Etkileşim Durumları > AI Slop > IA > Kullanıcı Yolculuğu

    Tasarımcı kullanılabilir olduğunda Step 0 kapsam değerlendirmesini veya mockup oluşturmayı asla atlamayın. İnceleme geçişlerinden önce mockup'lar üzerinde pazarlık yapılamaz.

  3. Mevcut Olduğunda Tasarım İncelemeleri DESIGN.md'ye Göre Kalibre Edilir

    DESIGN.md varsa, tüm tasarım kararları belirtilen tasarım sistemiyle uyumlu olmalıdır.

  4. Dış Sesler Sorunları Geçişlere Önceden Yükler

    Codex'ten gelen sert reddedişler, Pass 1'de [HARD REJECTION] etiketiyle ilk öğeler olarak belirtilir. Litmus DISAGREE öğeleri ilgili geçişte her iki bakış açısını da ortaya çıkarır.

  5. Eksiksizlik İlkesi: AI Eksiksizliği Ucuzlaştırır

    Tam kapsam önerin (testler, uç durumlar, hata yolları) — okyanusu bir kerede bir göl olarak kaynatın.

04 İşe koyun

Claude Code veya Codex'e plan-design-review kurun

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 plan-design-review ekleyin

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

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

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

Beceriye İlk Tasarım İnceleme Görevi Verin

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

Starter prompt
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if you can.

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:

  • Plan modundan çıkmadan önce plan dosyasının son başlığının ## GSTACK REVIEW REPORT olduğunu doğrulayın
  • İnceleme raporunun bir runs/status/findings tablosuna, bir VERDICT satırına ve dosyanın son boşluk olmayan satırı olarak çözülmemiş kararlar durumuna sahip olduğunu doğrulayın
  • Bağlamda bir plan dosyası varsa gstack-review-log'un çağrıldığını ve gstack-review-read'in en az bir kez çalıştırıldığını doğrulayın

OpenDesign'da plan-design-review paket olarak gelir: Plugins → Skills, üst çubukta 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ı
plan-design-review/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, bu katalogda 7 skill içeren garrytan/gstack deposunun tamamı için alınmıştır. plan-design-review için kullanım sayısı veya değerlendirme 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ırTasarım plan incelemeleri için kullanın; uygulamadan önce UI/UX planının incelenmesi gerektiğinde proaktif olarak önerin
  2. Ön hazırlık (önce çalıştırılır)gstack-skill-start'ı çalıştırır, düşük performans modunu yönetir, talimat bloklarını okur, SESSION_KIND ve telemetri işaretleyicilerini ayarlar
  3. Tasarım FelsefesiTasarımın üretilmiş değil kasıtlı hissettirilmesini sağlar; her boşluğu bulun, neden önemli olduğunu açıklayın, açık olanları düzeltin
  4. gstack tasarımcısı — BİRİNCİL ARACINIZTasarım brieflerinden gerçek görseller oluşturan AI mockup üreticisi; UI mevcut olduğunda varsayılan olarak kullanın
  5. Tasarım İlkeleriDokuz ilke: boş durumlar özelliktir, hiyerarşi önemlidir, izlenimler yerine somutluk, uç durumlar UX'tir, AI slop düşmandır, duyarlılık kasıtlıdır, erişilebilirlik zorunludur, çıkarma varsayılandır, güven piksel seviyesinde kazanılır
  6. Bilişsel Kalıplar — Harika Tasarımcılar Nasıl GörürOn iki algısal içgüdü: ekranlar değil sistemler görme, empati simülasyon olarak, hizmet olarak hiyerarşi, kısıtlama tapınması, soru refleksi, uç durum paranoyası, fark eder miydim testi, ilkeli zevk, çıkarma varsayılanı, zaman ufku tasarımı, güven için tasarım, storyboard yolculukları
  7. UX İlkeleri: Kullanıcılar Gerçekte Nasıl DavranırÜç yasa (beni düşündürme, tıklamalar önemli değil düşünme önemli, çıkar sonra çıkar), kullanıcı davranışı (okumak yerine göz gezdirme, en iyisini değil yeterince iyiyi seçme, idare etme), reklam panosu tasarımı, yön bulma olarak gezinme, iyi niyet rezervi, mobilde daha yüksek risk
  8. Bağlam Baskısı Altında Öncelik HiyerarşisiAdım 0 > maketler > Etkileşim Durumları > AI Slop > IA > Kullanıcı Yolculuğu; Adım 0'ı veya maketleri asla atlamayın
  9. ÖN İNCELEME SİSTEM DENETİMİ (Adım 0'dan önce)git log, diff stat, plan, CLAUDE.md, DESIGN.md, TODOS.md'den bağlam toplar; UI kapsamını ve mevcut kalıpları haritalandırır
  10. TASARIM KURULUMU (herhangi bir tasarım maketi komutundan ÖNCE bu kontrolü çalıştırın)gstack designer ikili dosyasının mevcut olup olmadığını kontrol eder; DESIGN_READY veya DESIGN_NOT_AVAILABLE yazdırır
  11. Beyin Bağlamı (ön kontrol)Açıklayıcı sorular sormadan önce gstack-brain-cache'den yapılandırılmış proje bağlamını (ürün, marka, hedefler, son kararlar) yükler
  12. Adım 0: Tasarım Kapsamı Değerlendirmesi0-10 arası ilk tasarım puanı, DESIGN.md durum kontrolü, mevcut tasarımdan yararlanma, odak alanları sorusu (kullanıcı yanıtlayana kadar DUR)
Skill'in Kendi Açıklaması
"Tasarımcı gözüyle plan incelemesi — CEO ve Mühendislik incelemesi gibi etkileşimli. (gstack)"

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

Plan Tasarım İncelemesi

plan-design-review'ı gerçek bir tasarım inceleme görevinde çalıştırın.

plan-design-review becerisi OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'te beceriyi seçin, yukarıdaki prompt'u 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 plan-design-review