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

Design Review Skill.

Claude Code ve Codex için tasarım incelemesine yönelik bir skill: oluşturulmuş bir sayfanın tasarımcı bakış açısıyla kalite kontrolü: tutarsızlık, boşluk, hiyerarşi, özensizlik kalıpları; ardından bunları düzeltir.

  • Tasarım İncelemesi & Erişilebilirlik
  • İnceleme raporu
OpenDesign İndirKullanım kılavuzunu görüntüle
garrytan/gstack · design-review/SKILL.mdSKILL.md
--- name: design-review description: Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (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ı yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 126.647 karakter

01 Ne yapar

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

Canlı bir sitenin tasarımcı gözüyle QA'sı. Sayfaları kullanıcının kendi tarayıcısında açar, 375, 768 ve 1440'ta ekran görüntüsü alır, görsel hiyerarşiden etkileşim durumlarına kadar on kategoriyi derecelendirir, ardından bulduklarını düzeltmek için kaynağı düzenler; her düzeltme için tek bir commit yapar ve öncesi-sonrası ekran görüntüleriyle yeniden doğrular.

Derinlik varsayılan olarak 5-8 sayfadır; bir feature branch üzerinde URL yoksa diff-farkındalı çalışır. Okuyucular iki başlık notu, ağırlıklı bir Design Score ve bağımsız bir AI Slop Score alır; ayrıca değerlendirmelerin arkasında [kicker-above-heading] ve [gradient-text] gibi 30 adet adlandırılmış dedektör kuralı bulunur.

Neler üretir

  • Çalıştırma dizininde yapılandırılmış bir markdown denetim raporu.
  • Sonraki çalıştırmalarda regresyon karşılaştırması için yazılmış bir design-baseline.json dosyası.
  • Uygulanan her düzeltme için öncesi-sonrası ekran görüntüsü çiftleri.
  • Kullanıcı Aşama 2 önerisini kabul ederse, çıkarılan gözlemlerden yazılmış isteğe bağlı bir DESIGN.md.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Analiz Etmeden Önce Tepki Ver

    Aşama 1 hedefi açar ve tam sayfa masaüstü ekran görüntüsü alır, ardından gözün ilk nereye gittiğini belirten yapılandırılmış bir ilk izlenim yazar.

  2. 02
    Görüntülenen Sistemi Çıkar

    Aşama 2, sayfa içinde fontları, renkleri, başlık ölçeğini ve dokunma hedeflerini inceler, ardından bulguları bir DESIGN.md olarak kaydetmeyi önerir.

  3. 03
    Sayfa Sayfa Denetim Yap

    Aşama 3, her sayfa için bir konsol hook'u, etkileşimli anlık görüntü ve açıklamalı ekran görüntüsü çalıştırır, ardından bunu üç viewport genişliğinde tekrarlar.

  4. 04
    Akışları Hisset

    Aşama 4, 2-3 kullanıcı akışında gezinir, her eylemden sonra anlık görüntüyü karşılaştırır ve sürtünme ile onarım için bir iyi niyet skoru takip eder.

  5. 05
    Bulguları Birer Birer Düzelt

    Aşama 8 minimum değişikliği yapar, onu tek başına commit eder ve bir sonraki bulguya geçmeden önce yeniden test eder.

  6. 06
    İki Başlığı Puanla

    Design score, on kategori üzerinden ağırlıklı bir ortalamadır; AI slop notu ise kendi başına durur.

02 Uyumunuzu bulun

design-review Skill Ne Zaman Kullanılır

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

İyi Uyum

  • Tüm sitenin nokta kontrolü değil, sistematik bir geçiş gerektirdiği, lansman öncesi veya yeniden tasarım sonrası bir denetim.
  • UI'yi değiştiren bir feature branch üzerinde çalışırken, yalnızca dokunulan rotaların denetlenmesi gerektiği durum.
  • Görsel tutarsızlıklardan bahsettiğinizde veya canlı bir siteyi cilalamak istediğinizde, skill kendini önermelidir.
  • Yayınlanmış bir sayfanın AI tarafından oluşturulmuş gibi görünüp görünmediğine karar vermek; bunu geliştiricilerin çoğu kendi başına değerlendiremez.
  • Kapsamlı bir tarama için zaman yokken yapılan hızlı bir sağlık kontrolü: ana sayfa artı iki kilit sayfa ve kısaltılmış bir kontrol listesi.

Sınırları Bilin

  • Bir tasarımı inşa edilmeden önce incelemek: bu, ayrı bir plan modu skill'idir.
  • Kaynağın dışında yaşayan sorunlar, örneğin üçüncü taraf widget'ları veya ekipten gelmesi gereken metinler, düzeltilmiş olarak değil, ertelenmiş olarak işaretlenir.
  • CI kurulumunuza dokunmaz ve mevcut testler dokunulmazdır; yalnızca yeni regresyon test dosyaları oluşturulabilir.

Ne Sağlamalısınız

  • Hedef URLLocalhost dahil, canlı bir adres. Bir adres verilmezse skill otomatik algılar veya main üzerinde sizden ister.
  • Bir kapsam geçersiz kılmaTam turu istemediğinizde taramayı tek bir sayfaya veya alana daraltın.
  • Bir derinlik bayrağıVarsayılan standarttır; --quick üç sayfaya indirir ve --deep tam bir yayın öncesi taramaya genişletir.
  • Varsa DESIGN.md dosyanızRepo kökündeki tasarım belgeleri önce okunur, böylece her karar belirtilen sisteme göre kalibre edilir ve sapmalar daha sert değerlendirilir.
  • Zaten oturum açmış bir tarayıcı oturumuDenetim, kullanıcının zaten sahip olduğu oturum içinde çalışır, bu yüzden kimlik doğrulaması gereken sayfalar için giriş akışına gerek yoktur.

03 Skill'in içinde

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

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

  1. Render'ı Yargıla, Repo'yu Değil

    Denetim asla uygulama dosyalarını okumaz: bulgular render edilmiş sayfadan gelmelidir. Tek istisna, çıkarılan gözlemlerden DESIGN.md yazmaktır.

  2. Düzeltme Başına Bir Commit

    Her düzeltme, style(design): FINDING-NNN artı kısa bir açıklama biçimindeki mesajla tek başına commit edilir.

  3. Başlamadan Önce Temiz Çalışma Ağacı

    Kirli bir çalışma ağacı çalışmayı durdurur: ajan, herhangi bir düzeltme commit'i olmadan önce commit mi yapılacağını, stash mi yapılacağını yoksa iptal mi edileceğini sormalıdır.

  4. Gerçek Bir Hesapta Harekete Geçmeden Önce Sor

    Yerel olmayan bir hedefte, değiştirici işlemler için çalıştırma başına tam olarak ne yapılacağını listeleyen bir onay sorusu gerekir; çıkış yapma ve silme yolları asla izlenmez.

  5. Kimlik Bilgileri Ajanın Dışında Kalır

    Önceden oturum açılmış oturum olduğu gibi kullanılır. Parolalar, tek kullanımlık kodlar, ödeme bilgileri, çerezler, token'lar ve localStorage tümü yasaktır.

  6. Her Bulgunun Arkasında Ekran Görüntüsü Vardır

    En az bir ekran görüntüsü olmayan bir bulgu sayılmaz ve görüntüler dışarı kopyalanıp okunur, böylece kullanıcı onları satır içinde görür.

  7. Kötüleştiği An Geri Al

    Herhangi bir regresyon anında bir git revert HEAD tetikler ve bulgu düzeltilmek yerine ertelenmiş olarak işaretlenir.

  8. 30 Düzeltmede Dur

    Döngü her beş düzeltmede bir yükselir ve tasarım düzeltme riski %20'yi geçtiğinde veya düzeltme sayısı 30'a ulaştığında tamamen durur.

04 İşe koyun

design-review'i Claude Code veya Codex'e yükleyin

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

design-review'i Claude Code, Codex veya kendi 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-review

design-review/SKILL.md için genel skills CLI biçimi; depo kendi yolunu ayrıca 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
Audit the design of [https://myapp.com/dashboard] at standard depth. Focus on the settings page. I'm signed in as [[email protected]] in Aside. Flag the AI slop patterns and anything that breaks the spacing scale, then fix what 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:

  • Her düzeltmeden sonra etkilenen sayfayı yeniden test edin ve konsol hata listesinin boş olduğunu veya taban çizgisinden daha kötü olmadığını doğrulayın.
  • Bir hedef mockup üretildiğinde, düzeltilmiş ekran görüntüsünü onunla karşılaştırın ve geçti veya başarısız olarak kaydedin.
  • Her düzeltme sınıflandırılır: yeniden test hiçbir yeni hata olmadan doğruladığında doğrulanmış sayılır.
  • Faz 9 etkilenen sayfaları yeniden denetler ve nihai notlar taban çizgisinin altına düşerse yüksek sesle uyarır.
  • Rapor, detektör sayısını baştan sona bir fark olarak belirtir veya detektörün kurulmadığını ya da kapalı olduğunu söyler.

OpenDesign'da design-review dahil edilmiştir: üst çubukta Plugins → Skills üzerinden 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-review/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 71f6048
License
MIT LICENSE dosyasından.
Repository yıldızları
132.921 Tüm garrytan/gstack deposu için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü; bu katalogda 7 beceri içerir. design-review 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 paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. KurulumURL, kapsam, derinlik ve kimlik doğrulamasını çözümler; DESIGN.md, temiz ağaç, tarayıcı, testleri kontrol eder.
  2. ModlarTam, hızlı, derin, diff-farkındalıklı ve regresyon kapsamları hangi sayfaların ziyaret edileceğine karar verir.
  3. Faz 1: İlk İzlenimTam sayfa masaüstü ekran görüntüsü, ardından yapılandırılmış bir ilk tepki ve sayfa alanı testi.
  4. Faz 2: Tasarım Sistemi ÇıkarımıYazı tiplerini, renkleri, başlık ölçeğini ve dokunma hedeflerini inceler, ardından bir DESIGN.md kaydetmeyi önerir.
  5. Faz 3: Sayfa Sayfa Görsel DenetimAnlık görüntüler, açıklamalı ve duyarlı çekimler, ana hat testi, ardından 10 kategorilik bir kontrol listesi.
  6. Faz 4: Etkileşim Akışı İncelemesi2-3 akışı gözden geçirir, her adımı karşılaştırır ve 70'ten başlayan bir iyi niyet ölçeği puanlar.
  7. Faz 5: Sayfalar Arası TutarlılıkSayfalar arasında navigasyonu, altbilgiyi, bileşenleri, tonu ve boşluk ritmini karşılaştırır.
  8. Faz 6: Raporu DerleHer kategoriyi A-F ile notlandırır ve raporu ile design-baseline.json'ı yazar.
  9. Faz 7: ÖnceliklendirmeBulguları etkiye göre sıralar ve kaynak düzenlemelerinin çözemeyeceklerini erteler.
  10. Faz 8: Düzeltme DöngüsüKaynağı bulur, minimal düzeltmeyi yapar, commit eder, yeniden test eder, sınıflandırır, kendini düzenler.
  11. Faz 9: Nihai Tasarım DenetimiEtkilenen sayfaları yeniden denetler, puanları ve detektör sayılarını yeniden hesaplar, regresyonlara karşı uyarır.
  12. Faz 10: RaporTam raporu, proje indeks özetini, PR satırını ve detektör farkını yazar.
Skill'in Kendi Açıklaması
"Tasarımcı gözüyle kalite kontrol: görsel tutarsızlıkları, boşluk sorunlarını, hiyerarşi problemlerini, yapay zeka kaynaklı kalite düşüklüğü desenlerini ve yavaş etkileşimleri bulur — sonra düzeltir. (gstack)"

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 126.647 karakterdir. Tam dosyayı GitHub'da okuyun.

Design Review

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

design-review becerisi OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills bölümünden 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 design-review