Vai alla guida all’uso
design-critiquedi Anthropic

Design Critique Skill.

Una skill per Claude Code e Codex per la revisione del design: feedback strutturato su usabilità, gerarchia e coerenza.

  • Design Review & Accessibility
  • Report di revisione
anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md
--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]
Intestazione e titoli di sezione letti dal file upstream il 14/09/2026 · 3.898 caratteri in totale

01 Cosa fa

Cosa fa lo Skill design-critique 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

design-critique esegue una revisione condivisa del design per chiunque disponga di un URL Figma, uno screenshot o una descrizione scritta, in qualsiasi fase, dall'esplorazione alla rifinitura finale. Funziona attraverso un framework in cinque parti: prima impressione, usabilità, gerarchia visiva, coerenza e accessibilità. Le regole di feedback spingono l'agente oltre le critiche vaghe: nominare l'elemento in conflitto, spiegarne il motivo rispetto ai principi di design o alle esigenze degli utenti, proporre un'alternativa e riconoscere ciò che funziona.

L'output è una critica in markdown con un'impressione generale, una tabella di usabilità con livelli di gravità (Critico, Moderato, Minore), una tabella di coerenza, note sull'accessibilità, un elenco Cosa Funziona Bene e tre raccomandazioni prioritarie. Quando è presente uno strumento di design o un connettore per il feedback degli utenti, ispeziona componenti e token oppure incrocia i dati con i ticket di supporto.

Che cosa produce

  • Una tabella di usabilità che elenca ogni riscontro con un livello di gravità e una correzione consigliata.
  • Una tabella di coerenza per tipografia, spaziatura e deviazioni cromatiche rispetto al design system.
  • Un elenco conclusivo di raccomandazioni prioritarie ordinate per impatto.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Porta il Design Davanti a Sé

    Un URL di Figma viene recuperato da Figma e un file referenziato viene letto; se nessuno dei due esiste, l'agente chiede all'utente di descrivere o condividere il design.

  2. 02
    Inizia dall'Impressione di Due Secondi

    Prima di qualsiasi analisi, registra ciò che attira l'occhio per primo, se questo è corretto, la reazione emotiva e se lo scopo è immediatamente chiaro.

  3. 03
    Percorri le Cinque Dimensioni in Ordine

    Usabilità, gerarchia visiva, coerenza e accessibilità ricevono ciascuna il proprio set di prompt, dall'ordine di lettura e gli spazi bianchi ai rapporti di contrasto e alle aree touch.

  4. 04
    Scrivi Feedback in Base alle Regole di Stile Dichiarate

    I risultati devono essere specifici, spiegati, accompagnati da un'alternativa proposta e bilanciati con ciò che già funziona.

  5. 05
    Compila il Modello di Output in Markdown

    La struttura fissa è impressione generale, tabella di usabilità con livelli di gravità, note sulla gerarchia, tabella di coerenza, accessibilità, cosa funziona bene e raccomandazioni prioritarie ordinate.

02 Trova la tua applicazione

Quando usare la skill design-critique

Usa la skill design-critique in Claude Code o Codex quando il compito è una design review di questo tipo. Applicabilità e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

  • Incollare un link Figma o uno screenshot per ottenere feedback prima che il design sia finito, dall'esplorazione alla rifinitura finale.
  • Un flusso nominato e contestuale, come un flusso di checkout per un SaaS B2B, dove pubblico e scopo affinano il feedback.
  • Una revisione delimitata, ad esempio chiedendo di guardare solo la navigazione per ottenere maggiore profondità su un'area.
  • Frasi di attivazione informali durante il lavoro, come chiedere una critica su un mockup o un'opinione su una schermata.

Conosci i limiti

  • Non può recuperare un file Figma live a meno che un connettore per strumenti di design non sia configurato nell'ambiente.
  • Confrontare le decisioni con reclami reali degli utenti richiede una fonte di feedback utente connessa.

Cosa fornire

  • Il design stessoUn URL di Figma, uno screenshot o una descrizione scritta dettagliata sono il minimo richiesto.
  • ContestoChe cosa è, per chi è pensato e a quale fase si trova, scelto tra esplorazione, rifinitura o finale.
  • Un focus opzionalePuoi restringere la revisione, ad esempio al mobile o al flusso di onboarding, per ottenere profondità invece di ampiezza.
  • Un argomento di slash-commandIl comando accetta un argomento, in qualsiasi forma si presenti il tuo materiale di design.

03 Dentro la skill

Regole che la Skill design-critique Fornisce 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. Non Lasciare Mai un Risultato Vago

    Il feedback deve indicare l'elemento concreto in conflitto, ad esempio dicendo che la CTA compete con la navigazione, invece di definire il layout confuso.

  2. Proponi Sempre una Soluzione

    Individuare un problema non è il risultato finale; la critica deve suggerire alternative accanto a ogni criticità.

  3. Riconosci Ciò che Funziona

    Le osservazioni positive sono una parte obbligatoria di un buon feedback, non una cortesia opzionale, e il template di output prevede una sezione What Works Well dedicata.

  4. Adatta la Profondità alla Fase

    L'esplorazione iniziale riceve un feedback diverso rispetto alla rifinitura finale, quindi l'agente deve calibrare l'approccio invece di applicare uno standard uniforme ovunque.

  5. Valuta Ogni Rilievo di Usabilità in Base alla Gravità

    La tabella di usabilità utilizza tre livelli fissi: Critical, Moderate, Minor, ciascuno associato a una raccomandazione.

  6. Tratta l'Accessibilità come un Passaggio a Sé Stante

    Il framework include una dimensione dedicata all'accessibilità, invece di inglobare contrasto e dimensioni dei target nelle note generali di usabilità.

  7. Chiedi Quando il Design Manca

    Se non viene fornito alcun URL o file, l'agente deve richiedere una descrizione o uno screenshot invece di inventare una critica.

04 Mettila al lavoro

Installare design-critique 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-critique a Claude Code, Codex o il Tuo Agente

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

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

Forma generica del CLI skills per design/skills/design-critique/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 this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

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:

  • L'accessibilità deve riportare un esito positivo o negativo sul contrasto specificamente per il testo chiave.

In OpenDesign importi design-critique dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

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
Anthropic
File della skill
design/skills/design-critique/SKILL.md Checksum del contenuto registrato alla verifica; commit 8f877b6
License
Apache-2.0 Da LICENSE.
Stelle del repository
24.012 Snapshot GitHub acquisito il 14/09/2026 per l'intero repository anthropics/knowledge-work-plugins, che contiene 7 skill in questo catalogo. Non è un punteggio o un conteggio di utilizzo per design-critique.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

  1. UtilizzoCome lo slash command riceve il suo argomento e risolve la fonte del design.
  2. Ciò di cui ho Bisogno da LeiIl design, il contesto e un'area di focus opzionale.
  3. Framework di CriticaCinque dimensioni ordinate: prima impressione, usabilità, gerarchia, coerenza, accessibilità.
  4. Come Fornire FeedbackCinque regole di stile per formulare i rilievi, dalla specificità alla calibrazione sulla fase.
  5. OutputIl template markdown che la critica deve seguire, tabelle incluse.
  6. Se i Connettori sono DisponibiliLavoro preparatorio aggiuntivo quando è collegato uno strumento di design o una fonte di feedback utente.
  7. SuggerimentiCondivida il contesto, specifichi la fase e richieda un focus più ristretto.
Descrizione della skill
"Ottieni feedback di design strutturato su usabilità, gerarchia e coerenza. Si attiva con "rivedi questo design", "critica questo mockup", "cosa ne pensi di questa schermata?", o quando condividi un link Figma o uno screenshot per feedback in qualsiasi fase, dall'esplorazione alla rifinitura finale."

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

06 Prima di installare

Domande sulla Skill design-critique

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

Per far funzionare tutto questo, ho bisogno di un connettore Figma?

No. Con uno strumento di design collegato, può recuperare il design direttamente da Figma e ispezionare componenti, token e layer. Senza di esso, è comunque possibile incollare uno screenshot o descrivere il design in dettaglio e ottenere lo stesso framework applicato.

Critica del Design

Esegui design-critique su un'attività di revisione di design reale.

Scarica OpenDesign, importa design-critique dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Terminale
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows