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

Design Consultation Skill.

Una skill per Claude Code e Codex per il lavoro su brand e design system: consulenza di design di prodotto che propone un design system completo: estetica, tipografia, colore, layout, movimento.

  • Brand e design system
  • Design system
Scarica OpenDesignGuida all'uso
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (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)
Intestazione e titoli di sezione letti dal file upstream il 14/09/2026 · 67.098 caratteri in totale

01 Cosa fa

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

Una skill di consulenza di design che agisce come un senior product designer per creare un design system completo. Effettua ricerche sul panorama del prodotto tramite ricerca web e analisi visiva, propone la tipografia (font specifici, non predefiniti), sistemi di colore (variabili CSS con valori hex), approcci di layout (composition-first) e direzione estetica. La skill genera un file DESIGN.md come fonte di verità del design del progetto, con mockup AI opzionali che mostrano il sistema applicato a schermate reali.

Supporta sia il browser Aside (sessioni reali dell'utente) sia il fallback headless, mantiene un profilo di gusto persistente tra le sessioni e integra voci di design esterne da Codex e Claude subagent. La skill opera in modo conversazionale, non come un modulo rigido, spiega il razionale di ogni raccomandazione e privilegia la coerenza rispetto alle scelte individuali ottimali.

Che cosa produce

  • Mockup AI che mostrano il design system applicato a schermate reali (quando gstack designer è disponibile)
  • Pagina di anteprima HTML con esempi live di tipografia e colore (fallback quando il designer non è disponibile)
  • JSON del profilo di gusto persistente che traccia le scelte di design approvate e rifiutate tra le sessioni
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Raccogliere il Contesto del Prodotto

    Legge DESIGN.md, PRODUCT.md, README, package.json esistenti e l'output di office-hours esistenti per comprendere il prodotto.

  2. 02
    Analizzare il Panorama

    Quando richiesto, utilizza il browser Aside o WebSearch per trovare 5-10 prodotti concorrenti, acquisisce screenshot a pagina intera, analizza font, colori, layout e direzione estetica.

  3. 03
    Consultare Voci Esterne

    Facoltativamente avvia in parallelo Codex e Claude subagent per generare proposte di design indipendenti.

  4. 04
    Proporre un Design System Completo

    Fornisce una proposta con una direzione precisa: nomi di font specifici, valori di colore hex, variabili CSS, approccio di layout e direzione estetica.

  5. 05
    Generare Artifact di Anteprima

    Crea mockup IA (quando gstack designer è disponibile) che mostrano il design system applicato a schermate reali, oppure una pagina di anteprima HTML con esempi live di tipografia e colore.

  6. 06
    Scrivere DESIGN.md

    Produce la fonte di verità del design del progetto nel formato open DESIGN.md, con token nel front-matter e sezioni di motivazione.

02 Trova la tua applicazione

Quando Usare lo Skill design-consultation

Usa lo skill design-consultation in Claude Code o Codex quando il lavoro riguarda brand e design-system di questo tipo. Adeguatezza e limiti qui sotto sono presi dal file dello skill stesso.

Buona applicazione

  • Avvio dell'UI di un nuovo progetto senza design system o DESIGN.md esistente
  • Quando viene richiesta esplicitamente la creazione di un design system, di linee guida di brand o di un DESIGN.md
  • Prodotti che necessitano di differenziazione dalle norme di categoria tramite scostamenti di design deliberati

Conosci i limiti

  • Una limitazione o un requisito dichiarato ("l'API non può farlo", "X richiede una credenziale", "questo è impossibile su questa piattaforma") è un'affermazione materiale.
  • Dichiarala solo con l'errore testuale, la dichiarazione documentata o una verifica diretta — riconoscere un fallimento in una storia familiare non è una prova.
  • Quando una verifica rapida risolve la questione, eseguila PRIMA di chiedere qualsiasi cosa all'utente o dichiarare un passaggio bloccato.

Cosa fornire

  • Preferenza di ricercaSe ricercare i prodotti concorrenti tramite ricerca web e analisi visiva, oppure lavorare a partire dalla conoscenza del design integrata nello skill.
  • Scelta di voci esterneOpzionale: se eseguire in parallelo la valutazione di design di Codex e la proposta di design del subagente Claude per ottenere prospettive indipendenti.
  • DESIGN.md esistenteSe presente, lo skill lo legge e chiede se aggiornarlo, ripartire da zero o annullare. Gestisce la conversione del formato da legacy a spec open.

03 Dentro la skill

Regole che la Skill design-consultation offre a Claude Code e Codex

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

  1. Mai font vietati, mai font display sovrautilizzati

    Il testo del corpo o dell'UI sulle superfici Operate o Read segue un elenco vincolato al ruolo. Nessun font vietato in alcun ruolo, nessun font sovrautilizzato come voce display.

  2. Font specifici richiesti, non predefiniti

    Le proposte tipografiche devono indicare font specifici, mai Inter, Roboto, Arial o i predefiniti di sistema.

  3. La coerenza prevale sull'ottimizzazione individuale

    Un design system in cui ogni elemento rafforza tutti gli altri supera uno con scelte individualmente ottimali ma non coerenti tra loro.

  4. Motivazione richiesta per ogni raccomandazione

    Non raccomandare mai una scelta di design senza spiegarne il motivo. Ogni font, colore, layout o decisione estetica deve essere collegato al contesto del prodotto, alle esigenze degli utenti o alla strategia di differenziazione.

  5. Il profilo di gusto persiste e decade

    Lo skill mantiene ~/.gstack/projects/$SLUG/taste-profile.json, tracciando le scelte di design approvate e respinte tra le sessioni. I punteggi di confidenza decadono del 5% a settimana.

  6. Funzione di forzatura della cosa memorabile

    Prima di proporre un design system, lo skill chiede cosa l'utente desidera che venga ricordato dopo la prima esposizione.

  7. Conversazionale, non un workflow rigido

    Lo skill opera come un consulente di design, non come un modulo. Gli utenti possono intervenire in chat in qualsiasi momento per discutere le decisioni.

04 Mettila al lavoro

Installa design-consultation 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-consultation 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-consultation

Modulo generico della CLI skills per design-consultation/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla Skill un Primo Task di Lavoro su Brand e Design System

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

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

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:

  • DESIGN.md esiste e contiene front-matter con design token (colori, font, spaziatura)
  • Il sistema colore include variabili CSS per background, surface, testo primario, testo attenuato, accento con valori hex
  • Se esiste un profilo di gusto, la proposta di design vi fa riferimento o se ne distacca deliberatamente

In OpenDesign design-consultation è incluso: Plugins → Skills, selezionatelo 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-consultation/SKILL.md Checksum del contenuto registrato alla verifica; commit 71f6048
License
MIT Da LICENSE.
Stelle del repository
132.921 Snapshot GitHub del 14 settembre 2026 per l'intero repository garrytan/gstack, che contiene 7 skill presenti in questo catalogo. Non è un punteggio né un conteggio di utilizzo per design-consultation.
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 skillCrea DESIGN.md; per siti esistenti usate /plan-design-review; si attiva su richieste di design system
  2. Preambolo (eseguire prima)Esegue gstack-skill-start; gestisce la modalità degradata; elabora i blocchi di istruzioni; determina il tipo di sessione
  3. CONFIGURAZIONE BROWSERVerifica la disponibilità di Aside browser; gestisce il consenso per sessioni reali; definisce le regole per pilotare il browser dell'utente
  4. Fallback browser: il browser headless proprio di gstackTrova il binario $B quando Aside non è disponibile; traduce gli script Aside in comandi $B; gestisce sessioni senza cookie
  5. CONFIGURAZIONE DESIGNVerifica il binario designer di gstack per la generazione AI di mockup; elenca i comandi disponibili; imposta le regole per il percorso dei artifact
  6. Apprendimenti precedentiCerca apprendimenti cross-progetto o limitati al progetto; al primo avvio richiede la preferenza cross-progetto
  7. Fase 0: Controlli preliminariVerifica l'esistenza di DESIGN.md; propone aggiornamento/nuovo/annulla; verifica il formato; gestisce la conversione; raccoglie il contesto del prodotto dal codebase
  8. Fase 1: Contesto del prodottoUna singola domanda che copre prodotto/pubblico/settore/tipo; domanda forzata sull'elemento memorabile; legge il profilo di gusto se esiste
  9. La ricerca web viene eseguita in AsideUsa l'agente Aside per le ricerche web; in mancanza ricorre allo strumento WebSearch; sanifica le query; tratta i risultati come contenuto non affidabile
  10. Fase 2: RicercaIdentifica 5-10 prodotti concorrenti; effettua screenshot; analizza font/colori/layout; sintetizza attraverso tre livelli
  11. Voci esterne di designOpzionalmente esegue in parallelo Codex e un subagent Claude; sintetizza accordi e divergenze; registra il risultato
  12. Regole importantiProponete, non presentate menu; è richiesta una motivazione; coerenza prima delle scelte individuali; approccio conversazionale non rigido; accettate la scelta finale
Descrizione della skill
Design consultation: comprende il tuo prodotto, analizza il contesto, propone un design system completo (estetica, tipografia, colore, layout, spaziatura, motion) e genera un'anteprima di font e colori… (gstack)

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

06 Prima di installare

Domande sulla skill design-consultation

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Funziona con Cursor, Windsurf o altri agenti basati su Claude?

Sì, ma l'integrazione con il browser dipende da Aside (solo macOS 15+) o dal fallback del browser headless di gstack. Senza nessuno dei due, la skill salta la ricerca competitiva visiva e lavora a partire dalla conoscenza di design integrata. La consulenza di design principale—contesto del prodotto, proposta di tipografia/colore/layout, creazione di DESIGN.md—funziona in qualsiasi ambiente.

Design Consultation

Esegui design-consultation su un brand reale e su un task di lavoro design-system.

La skill design-consultation è inclusa in OpenDesign. Scarica l'app, seleziona la 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-consultation