83.3K+Scarica
Vai alla guida all’uso
design-reviewdi Garry Tan

Design Review Skill.

Una skill per Claude Code e Codex dedicata alla revisione del design: QA con occhio da designer di una pagina realizzata: incoerenze, spaziature, gerarchia, pattern trascurati; poi li corregge.

  • Design Review & Accessibility
  • Report di revisione
Scarica OpenDesignGuida all'uso
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)
Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 126.647 caratteri in totale

01 Cosa fa

Cosa fa la Skill design-review in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

QA con occhio da designer su un sito live. Apre le pagine nel browser dell'utente, ne acquisisce screenshot a 375, 768 e 1440, valuta dieci categorie dalla gerarchia visiva agli stati di interazione, poi modifica il codice sorgente per correggere quanto trovato, un commit per ogni correzione, riverificando con screenshot prima e dopo.

La profondità predefinita è di 5-8 pagine; senza URL su un branch di feature, diventa consapevole del diff. Chi legge riceve due voti principali, un Design Score pesato e un AI Slop Score indipendente, più 30 regole di rilevamento con nome come [kicker-above-heading] e [gradient-text] dietro le valutazioni.

Che cosa produce

  • Un report di audit in markdown strutturato nella directory di esecuzione.
  • Un file design-baseline.json scritto per il confronto di regressione nelle esecuzioni successive.
  • Coppie di screenshot prima e dopo per ogni correzione applicata.
  • Un DESIGN.md opzionale scritto a partire dalle osservazioni estratte, se l'utente accetta la proposta della Fase 2.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Reagire Prima di Analizzare

    La Fase 1 apre l'obiettivo e acquisisce uno screenshot desktop a pagina intera, poi scrive una prima impressione strutturata indicando dove va per primo lo sguardo.

  2. 02
    Estrarre il Sistema Renderizzato

    La Fase 2 analizza font, colori, scala dei titoli e target touch all'interno della pagina, poi propone di salvare i risultati come DESIGN.md.

  3. 03
    Audit Pagina per Pagina

    La Fase 3 esegue un hook di console, uno snapshot interattivo e uno screenshot annotato per pagina, ripetendo poi il tutto su tre larghezze di viewport.

  4. 04
    Percepire i Flussi

    La Fase 4 percorre 2-3 flussi utente, confrontando lo snapshot dopo ogni azione e monitorando un punteggio di goodwill per attrito e recupero.

  5. 05
    Correggere un Risultato alla Volta

    La Fase 8 apporta la modifica minima, la esegue in un commit isolato, e la ritesta prima di passare al risultato successivo.

  6. 06
    Assegnare Due Voti Principali

    Il design score è una media pesata su dieci categorie, mentre il voto AI slop è indipendente.

02 Trova la tua applicazione

Quando usare lo skill design-review

Usa lo skill design-review in Claude Code o Codex quando il lavoro è una design review di questo tipo. Ambito e limiti sotto sono presi dal file dello skill stesso.

Buona applicazione

  • Un audit pre-lancio o post-redesign in cui l'intero sito necessita di un passaggio sistematico, non un controllo puntuale.
  • Lavorando su un branch di feature che modifica la UI, in cui solo le route toccate devono essere sottoposte ad audit.
  • Quando menzioni incongruenze visive o vuoi perfezionare un sito live, la skill dovrebbe suggerirsi da sola.
  • Valutare se una pagina pubblicata risulta generata dall'IA, cosa che la maggior parte degli sviluppatori non può valutare da sola.
  • Un controllo rapido quando non c'è tempo per la verifica completa: homepage più due pagine chiave e una checklist abbreviata.

Conosci i limiti

  • Rivedere un design prima che venga realizzato: si tratta di uno skill separato in modalità plan.
  • I problemi esterni al codice sorgente, come widget di terze parti o testi che devono provenire dal team, vengono segnalati come rimandati invece che risolti.
  • Non toccherà la configurazione della CI e i test esistenti sono off-limits; possono essere creati solo nuovi file di test di regressione.

Cosa fornire

  • L'URL di destinazioneUn indirizzo attivo, incluso localhost. Senza di esso lo skill rileva automaticamente oppure, su main, lo richiede.
  • Un override dell'ambitoRestringe la verifica a una singola pagina o area quando non si desidera il giro completo.
  • Un flag di profonditàIl default è standard; --quick riduce a tre pagine e --deep espande a una verifica completa pre-lancio.
  • Il vostro DESIGN.md, se esisteI documenti di design nella root del repository vengono letti prima di tutto, così ogni decisione è calibrata rispetto al sistema dichiarato e le deviazioni vengono valutate con maggior rigore.
  • Una sessione del browser già autenticataL'audit funziona all'interno della sessione già attiva dell'utente, quindi le pagine autenticate non richiedono un flusso di login.

03 Dentro la skill

Regole che la skill design-review dà a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Giudicare il Render, Non il Repository

    L'audit non legge mai i file di implementazione: i risultati devono provenire dalla pagina renderizzata. L'unica eccezione è la scrittura di DESIGN.md a partire da osservazioni estratte.

  2. Un Commit per Ogni Fix

    Ogni fix viene commesso singolarmente con il formato del messaggio style(design): FINDING-NNN più una breve descrizione.

  3. Albero Pulito Prima di Iniziare

    Un working tree sporco interrompe l'esecuzione: l'agente deve chiedere se fare commit, stash o interrompere prima che esista un commit di fix.

  4. Chiedere Prima di Agire su un Account Reale

    Su un target non locale, le azioni che modificano dati richiedono una domanda di consenso per esecuzione, che elenchi esattamente cosa verrà fatto; i percorsi di logout ed eliminazione non vengono mai seguiti.

  5. Le Credenziali Restano Fuori dall'Agente

    La sessione pre-autenticata viene usata così com'è. Password, codici temporanei, dati di pagamento, cookie, token e localStorage sono tutti off-limits.

  6. Gli Screenshot Confermano Ogni Segnalazione

    Una segnalazione senza almeno uno screenshot non conta, e le immagini vengono estratte e lette in modo che l'utente le veda in linea.

  7. Annullare Non Appena Peggiora

    Ogni regressione attiva immediatamente un git revert HEAD e il rilievo viene contrassegnato come rinviato piuttosto che corretto in modo improvvisato.

  8. Interruzione a 30 correzioni

    Il ciclo aumenta di livello ogni cinque correzioni e si interrompe del tutto quando il rischio di design-fix supera il 20% o il numero di correzioni raggiunge 30.

04 Mettila al lavoro

Installa design-review in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi design-review a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per design-review/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo task di revisione del design

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Ripete il test della pagina interessata dopo ogni correzione e verifica che l'elenco degli errori in console sia vuoto o non peggiore rispetto al basale.
  • Quando è stato generato un mockup di riferimento, confronta lo screenshot corretto con esso e registra l'esito, positivo o negativo.
  • Ogni correzione viene classificata: verificata quando il nuovo test la confirma senza nuovi errori.
  • La Fase 9 riesamina le pagine interessate e avverte con evidenza se i voti finali risultano inferiori al basale.
  • Il report indica il numero di rilievi del detector come delta dall'inizio alla fine, oppure segnala che il detector non era installato o era disattivato.

In OpenDesign design-review è incluso: Plugins → Skills, selezionalo nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Garry Tan
Repository
github.com/garrytan/gstack Branch main
File della skill
design-review/SKILL.md Checksum del contenuto registrato alla verifica; commit 71f6048
License
MIT Da LICENSE.
Stelle del repository
132.921 Snapshot GitHub del 2026-09-14 per l'intero repository garrytan/gstack, che contiene 7 skill in questo catalogo. Non è un punteggio o un conteggio di utilizzo per design-review.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. ConfigurazioneAnalizza URL, ambito, profondità e autenticazione; verifica DESIGN.md, albero pulito, browser, test.
  2. ModalitàGli ambiti completo, rapido, approfondito, diff-aware e di regressione determinano quali pagine vengono visitate.
  3. Fase 1: Prima ImpressioneScreenshot desktop a pagina intera, seguito da una reazione istintiva strutturata e un test delle aree della pagina.
  4. Fase 2: Estrazione del Design SystemAnalizza font, colori, scala dei titoli e aree tattili, poi propone di salvare un DESIGN.md.
  5. Fase 3: Audit Visivo Pagina per PaginaIstantanee, scatti annotati e responsive, test del tronco, poi una checklist a 10 categorie.
  6. Fase 4: Revisione del Flusso di InterazionePercorre 2-3 flussi, confronta ogni passaggio e assegna un punteggio a un indicatore di buona volontà a partire da 70.
  7. Fase 5: Coerenza tra PagineConfronta navigazione, footer, componenti, tono e ritmo degli spazi tra le pagine.
  8. Fase 6: Compilazione del ReportAssegna un voto da A a F a ogni categoria e scrive il report più design-baseline.json.
  9. Fase 7: TriageOrdina i rilievi per impatto e rinvia ciò che le modifiche al codice sorgente non possono risolvere.
  10. Fase 8: Ciclo di CorrezioneIndividua la fonte, esegue la correzione minima, effettua il commit, ripete il test, classifica, si autoregola.
  11. Fase 9: Audit Finale del DesignRiesamina le pagine interessate, ricalcola i punteggi e il numero di rilievi del detector, avverte in caso di regressioni.
  12. Fase 10: ReportScrive il report completo, il riepilogo dell'indice del progetto, la riga per la PR e il delta del detector.
Descrizione della skill
"QA con occhio del designer: trova incoerenze visive, problemi di spaziatura, problemi di gerarchia, pattern AI generati, e interazioni lente — poi li corregge. (gstack)"

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 126.647 caratteri. Leggi il file completo su GitHub.

Design Review

Esegui design-review su un'attività di Design Review reale.

Lo skill design-review è incluso in OpenDesign. Scarica l'app, seleziona lo skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/garrytan/gstack --skill design-review