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

Plan Design Review Skill.

Uno skill per Claude Code e Codex dedicato alla revisione del design: esamina un piano di design per completezza e rischi d'esperienza prima dell'implementazione.

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

01 Cosa fa

Cosa fa la Skill plan-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

Verifica un piano di design per completezza e rischio sull'esperienza prima dell'implementazione. Esegue sette passaggi di design (Information Architecture, Interaction States, User Journey, Empty States, Visual Hierarchy, AI Slop Risk, Accessibility) valutando ciascuno da 0 a 10, spiega cosa lo renderebbe un 10, poi corregge il piano per arrivarci. Genera mockup visivi con il designer gstack per impostazione predefinita quando la UI è nell'ambito.

Include un passaggio opzionale di voci esterne: Codex valuta rispetto alle regole rigide di design di OpenAI e ai litmus check; un subagent Claude esegue una revisione di completezza indipendente. Opera in modalità piano. Per audit visivi su siti live, usare invece /design-review. Il risultato è un piano migliore con un report di revisione strutturato, non un documento sul piano.

Che cosa produce

  • Un file di piano migliorato con le lacune di design chiuse, dimensioni valutate e una sezione GSTACK REVIEW REPORT strutturata allegata
  • Un file HTML di board comparativa e approved.json che registra la variante scelta dall'utente, le valutazioni, i commenti e il feedback
  • Una scheda di valutazione litmus che sintetizza i risultati di Codex e del subagent Claude, se le voci esterne sono state eseguite
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Lo Scope Gate Conferma l'Obiettivo della Revisione

    Prima di ogni altra cosa, chiede all'utente di confermare cosa revisionare (diff di branch, documento del piano o pagina specifica), a meno che la modalità piano non selezioni automaticamente il piano attivo o l'utente non abbia indicato esplicitamente un obiettivo.

  2. 02
    Genera Mockup Visivi per Impostazione Predefinita

    Quando il designer gstack è disponibile e il piano ha ambito UI, genera i mockup immediatamente senza chiedere il permesso.

  3. 03
    Le Voci di Design Esterne Opzionali Vengono Eseguite in Parallelo

    Se l'utente sceglie di attivarle, avvia contemporaneamente Codex (regole rigide di design + litmus check) e il subagent Claude (revisione di completezza indipendente).

  4. 04
    Sette Passaggi di Design Valutano da 0 a 10 e Correggono le Lacune

    Per ciascuna dimensione (Information Architecture, Interaction States, User Journey, Empty States, Visual Hierarchy, AI Slop Risk, Accessibility), valuta il piano, spiega come si presenta un 10/10, modifica il piano per chiudere le lacune, ri-valuta e ripete finché non raggiunge il 10 o l'utente dice di andare avanti.

  5. 05
    Scrive un Report di Revisione Strutturato nel File del Piano

    Allega una sezione GSTACK REVIEW REPORT con una tabella di esecuzioni/stato/risultati, una riga VERDICT e uno stato delle decisioni non risolte come ultima riga non vuota del file.

02 Trova la tua applicazione

Quando usare la skill plan-design-review

Usa la skill plan-design-review in Claude Code o Codex quando il lavoro è una design review di questo tipo. I limiti e l'ambito seguenti sono presi dal file della skill stessa.

Buona applicazione

  • L'utente ha redatto un piano con componenti UI/UX che dovrebbero essere revisionati prima dell'inizio dell'implementazione
  • Un piano di design necessita di mockup visivi per rendere concrete le descrizioni astratte prima di iniziare a programmare
  • Un piano descrive cosa fa il backend ma non specifica mai cosa vede l'utente, gli stati vuoti, gli stati di errore o il comportamento responsive

Conosci i limiti

  • Modifiche puramente backend, solo API o infrastrutturali senza ambito UI
  • Audit visivi del sito live (usa /design-review invece)

Cosa fornire

  • Un piano di design o un diff di branch con scope UIIl file del piano, un documento incollato dall'utente, una pagina/percorso specifico, oppure il diff del branch corrente.
  • Feedback sui mockup tramite comparison boardIl gstack designer serve una comparison board via HTTP dove l'utente valuta le varianti, lascia commenti, clicca Regenerate/Remix, oppure invia una scelta finale.

03 Dentro la skill

Regole che la Skill plan-design-review fornisce a Claude Code e Codex

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

  1. Tutti gli Artifact di Design Vengono Salvati in ~/.gstack/projects/$SLUG/designs/

    Mockup, comparison board e approved.json devono essere salvati nella directory designs del progetto gstack dell'utente, mai in .context/, docs/designs/, /tmp/ o in qualsiasi directory locale al progetto.

  2. Gerarchia di Priorità: Step 0 > Mockup > Stati di Interazione > AI Slop > IA > User Journey

    Non saltare mai la valutazione dello scope allo Step 0 né la generazione dei mockup quando il designer è disponibile. I mockup prima dei passaggi di revisione non sono negoziabili.

  3. Le Design Review si Calibrano su DESIGN.md Quando Presente

    Se DESIGN.md esiste, tutte le decisioni di design devono essere allineate al design system dichiarato.

  4. Le Outside Voices pre-caricano gli Issue nei Pass

    I rigetti hard di Codex vengono segnalati come primi elementi nel Pass 1 taggati [HARD REJECTION]. Gli elementi Litmus DISAGREE mostrano entrambe le prospettive nel pass rilevante.

  5. Principio di Completezza: l'AI Rende la Completezza Economica

    Raccomanda copertura completa (test, edge case, percorsi di errore) — far bollire l'oceano un lago alla volta.

04 Mettila al lavoro

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

Forma generica della CLI skills per plan-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
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.

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:

  • Conferma che l'ultimo heading del file del piano sia ## GSTACK REVIEW REPORT prima di uscire dalla plan mode
  • Conferma che il report di revisione abbia una tabella runs/status/findings, una riga VERDICT e uno stato delle decisioni non risolte come ultima riga non vuota del file
  • Verifica che gstack-review-log sia stato chiamato e che gstack-review-read sia stato eseguito almeno una volta se un file del piano è nel contesto

In OpenDesign plan-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
plan-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 plan-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. Quando invocare questa skillUsala per le revisioni dei piani di design; suggeriscila proattivamente quando un piano UI/UX necessita revisione prima dell'implementazione
  2. Preambolo (eseguire prima)Esegue gstack-skill-start, gestisce la modalità degradata, legge i blocchi di istruzioni, imposta SESSION_KIND e i marcatori di telemetria
  3. Filosofia del DesignGarantisce che il design risulti intenzionale e non generato; trova ogni lacuna, spiega perché è importante, correggi quelle evidenti
  4. Il gstack designer — IL TUO STRUMENTO PRIMARIOGeneratore di mockup AI che crea visual reali a partire dai design brief; da usare di default quando esiste una UI
  5. Principi di DesignNove principi: gli stati vuoti sono funzionalità, la gerarchia conta, la specificità prevale sulle sensazioni, gli edge case sono UX, l'AI slop è il nemico, il responsive è intenzionale, l'accessibilità è obbligatoria, la sottrazione è il default, la fiducia si guadagna a livello di pixel
  6. Pattern Cognitivi — Come Vedono i Grandi DesignerDodici istinti percettivi: vedere sistemi non schermate, empatia come simulazione, gerarchia come servizio, culto del vincolo, riflesso della domanda, paranoia per gli edge case, il test del "me ne accorgerei?", gusto basato su principi, sottrazione come default, design per orizzonti temporali, design per la fiducia, storyboard dei percorsi utente
  7. Principi UX: come si comportano davvero gli utentiTre leggi (non farmi pensare, non contano i clic ma i pensieri, ometti poi ometti), comportamento dell'utente (scansione non lettura, si accontenta, si arrangia), design da cartellone pubblicitario, navigazione come orientamento, riserva di buona volontà, mobile posta più alta
  8. Gerarchia delle priorità sotto pressione di contestoStep 0 > mockup > Stati di interazione > AI Slop > IA > percorso utente; non saltare mai Step 0 né i mockup
  9. AUDIT DI SISTEMA PRE-REVIEW (prima dello Step 0)Raccoglie contesto da git log, diff stat, piano, CLAUDE.md, DESIGN.md, TODOS.md, mappa l'ambito UI e i pattern esistenti
  10. CONFIGURAZIONE DESIGN (esegui questo controllo PRIMA di qualsiasi comando di mockup di design)Verifica se il binario gstack designer è disponibile; stampa DESIGN_READY o DESIGN_NOT_AVAILABLE
  11. Contesto Brain (preflight)Carica il contesto strutturato del progetto (prodotto, brand, obiettivi, decisioni recenti) da gstack-brain-cache prima di porre domande di chiarimento
  12. Step 0: valutazione dell'ambito di designValutazione iniziale del design da 0 a 10, controllo dello stato di DESIGN.md, sfruttamento del design esistente, domanda sulle aree di focus (FERMATI finché l'utente non risponde)
Descrizione della skill
"Revisione del piano con occhio da designer — interattiva, come la revisione CEO e Eng. (gstack)"

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

Plan Design Review

Esegui plan-design-review su un task reale di revisione del design.

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