Aller au guide d’utilisation
design-critiquepar Anthropic

Design Critique Skill.

Un skill Claude Code et Codex pour la revue de design : retours structurés sur l'utilisabilité, la hiérarchie et la cohérence.

  • Revue de conception et accessibilité
  • Rapport de revue
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]
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 3 898 caractères au total

01 Ce qu'il fait

Ce que fait le skill design-critique dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

design-critique exécute une revue de design partagée pour toute personne disposant d'une URL Figma, d'une capture d'écran ou d'une description écrite, à n'importe quel stade, de l'exploration à la finition. Il fonctionne selon un cadre en cinq parties : première impression, utilisabilité, hiérarchie visuelle, cohérence et accessibilité. Les règles de retour poussent l'agent au-delà des remarques vagues : nommer l'élément en cause, expliquer pourquoi selon les principes de design ou les besoins des utilisateurs, proposer une alternative, et reconnaître ce qui fonctionne.

Le résultat est une critique en markdown comprenant une impression générale, un tableau d'utilisabilité noté par gravité (Critique, Modéré, Mineur), un tableau de cohérence, des notes d'accessibilité, une liste Ce qui fonctionne bien, et trois recommandations prioritaires. Lorsqu'un outil de design ou un connecteur de retour utilisateur est présent, il inspecte les composants et les tokens ou recoupe les tickets d'assistance.

Ce qu'il produit

  • Un tableau d'utilisabilité listant chaque constat avec un niveau de gravité et une correction recommandée.
  • Un tableau de cohérence pour les écarts de typographie, d'espacement et de couleur par rapport au design system.
  • Une liste finale de recommandations prioritaires classées par ordre d'impact.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Placez le design devant l'agent

    Une URL Figma est récupérée depuis Figma et un fichier référencé est lu ; si aucun des deux n'existe, l'agent demande à l'utilisateur de décrire ou de partager le design.

  2. 02
    Commencez par l'impression de deux secondes

    Avant toute analyse, il note ce qui attire l'œil en premier, si cela est correct, la réaction émotionnelle, et si le but est immédiatement clair.

  3. 03
    Parcourez les cinq dimensions dans l'ordre

    L'utilisabilité, la hiérarchie visuelle, la cohérence et l'accessibilité ont chacune leur propre série de questions, de l'ordre de lecture et des espaces blancs jusqu'aux ratios de contraste et aux zones tactiles.

  4. 04
    Rédigez les retours selon les règles de style énoncées

    Les constats doivent être précis, expliqués, accompagnés d'une alternative proposée, et équilibrés par des points qui fonctionnent déjà bien.

  5. 05
    Remplissez le modèle de sortie Markdown

    La structure fixe comprend l'impression générale, un tableau d'utilisabilité avec sévérités, des notes de hiérarchie, un tableau de cohérence, l'accessibilité, ce qui fonctionne bien, et des recommandations prioritaires classées.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-critique

Utilisez le skill design-critique dans Claude Code ou Codex lorsque le travail est une revue de design de ce type. L'adéquation et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

  • Coller un lien Figma ou une capture d'écran pour obtenir un retour avant que le design soit terminé, de l'exploration à la finalisation.
  • Un flux nommé et contextualisé, comme un flux de paiement pour un SaaS B2B, où le public et l'objectif affinent le retour.
  • Une revue ciblée, par exemple en lui demandant de ne regarder que la navigation pour obtenir plus de profondeur sur un domaine.
  • Des phrases déclencheuses informelles en cours de travail, comme lui demander de critiquer une maquette ou de dire ce qu'il pense d'un écran.

Connaître les limites

  • Il ne peut pas récupérer un fichier Figma en direct à moins qu'un connecteur d'outil de design ne soit configuré dans l'environnement.
  • Recouper les décisions avec de vraies plaintes d'utilisateurs nécessite une source de retours utilisateurs connectée.

Quoi fournir

  • Le design lui-mêmeUne URL Figma, une capture d'écran, ou une description écrite détaillée constituent le minimum requis.
  • Le contexteCe qu'est l'élément, à qui il s'adresse, et à quel stade il se trouve, choisi parmi exploration, raffinement, ou finalisation.
  • Un focus optionnelVous pouvez restreindre la revue, par exemple au mobile ou au flux d'onboarding, pour obtenir de la profondeur plutôt que de l'étendue.
  • Un argument de commande slashLa commande accepte un argument, quelle que soit la forme de votre matériel de design.

03 Dans le skill

Règles que le skill design-critique donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Ne jamais laisser un constat vague

    Le retour doit nommer l'élément concret en conflit, par exemple en disant que le CTA entre en concurrence avec la navigation plutôt qu'en qualifiant la mise en page de confuse.

  2. Toujours Proposer une Solution

    Identifier un problème n'est pas le livrable ; la critique doit suggérer des alternatives en regard de chaque problème.

  3. Reconnaître Ce Qui Fonctionne

    Les observations positives font partie intégrante d'un bon retour, ce n'est pas une simple politesse facultative, et le modèle de sortie comporte une section What Works Well pour cela.

  4. Adapter la Profondeur à l'Étape

    Une exploration initiale reçoit un retour différent d'une finalisation, l'agent doit donc s'adapter plutôt qu'appliquer un standard unique partout.

  5. Évaluer Chaque Constat d'Utilisabilité par Sévérité

    Le tableau d'utilisabilité utilise trois niveaux fixes : Critical, Moderate, Minor, chacun associé à une recommandation.

  6. Traiter l'Accessibilité comme une Passe à Part

    Le cadre inclut une dimension d'accessibilité dédiée plutôt que d'intégrer le contraste et la taille des cibles dans des notes générales d'utilisabilité.

  7. Demander Quand le Design Est Manquant

    Si aucune URL ni fichier n'est fourni, l'agent doit demander une description ou une capture d'écran plutôt que d'inventer une critique.

04 Mettez-le en pratique

Installer design-critique dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter design-critique à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

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

Forme générique de la CLI skills pour design/skills/design-critique/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de révision de conception

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • L'accessibilité doit indiquer une réussite ou un échec sur le contraste pour le texte clé en particulier.

Dans OpenDesign, importez design-critique depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Anthropic
Fichier du skill
design/skills/design-critique/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 8f877b6
License
Apache-2.0 D'après LICENSE.
Étoiles du dépôt
24 012 Capture GitHub prise le 14/09/2026 pour l'ensemble du dépôt anthropics/knowledge-work-plugins, qui contient 7 skills dans ce catalogue. Il ne s'agit ni d'une note ni d'un compteur d'usage pour design-critique.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. UtilisationComment la commande slash prend son argument et résout la source du design.
  2. Ce dont j'ai besoin de votre partLe design, le contexte, et une zone de focus optionnelle.
  3. Cadre de CritiqueCinq dimensions ordonnées : première impression, utilisabilité, hiérarchie, cohérence, accessibilité.
  4. Comment Formuler un RetourCinq règles de style pour formuler les constats, de la spécificité à l'adaptation à l'étape.
  5. SortieLe modèle markdown que la critique doit suivre, tableaux inclus.
  6. Si des Connecteurs Sont DisponiblesTravail préparatoire supplémentaire lorsqu'un outil de design ou une source de retours utilisateurs est connectée.
  7. AstucesPartagez le contexte, précisez l'étape, et demandez un focus plus restreint.
Description du skill lui-même
« Obtenez des retours structurés sur l'utilisabilité, la hiérarchie et la cohérence. Déclenchez avec "analysez ce design", "critiquez cette maquette", "que pensez-vous de cet écran ?", ou lors du partage d'un lien Figma ou d'une capture d'écran pour obtenir des retours, à n'importe quelle étape de l'exploration au polish final. »

Description du front-matter issue de SKILL.md. Le fichier complet fait environ 3 898 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le Skill design-critique

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Ai-je besoin d'un connecteur Figma pour que cela fonctionne ?

Non. Avec un outil de conception connecté, il peut extraire directement le design depuis Figma et inspecter les composants, tokens et calques. Sans cela, vous pouvez tout de même coller une capture d'écran ou décrire le design en détail pour obtenir le même cadre d'analyse.

Critique de design

Exécuter design-critique sur une vraie tâche de revue de design.

Téléchargez OpenDesign, importez design-critique depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

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

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows