/design-critique

Si vous voyez des placeholders inconnus ou devez vérifier quels outils sont connectés, consultez CONNECTORS.md.

Obtenez des retours de conception structurés selon plusieurs dimensions.

Utilisation

/design-critique $ARGUMENTS

Examiner la conception : @$1

Si une URL Figma est fournie, récupérez la conception de Figma. Si un fichier est référencé, lisez-le. Sinon, demandez à l'utilisateur de décrire ou de partager sa conception.

Ce dont j'ai besoin

• La conception : URL Figma, capture d'écran ou description détaillée
• Contexte : Qu'est-ce que c'est ? Pour qui ? Quel stade (exploration, affinage, final) ?
• Focus (optionnel) : « Concentrez-vous sur mobile » ou « Concentrez-vous sur le flux d'onboarding »

Cadre de critique

1. Première impression (2 secondes)

• Qu'est-ce qui attire le regard en premier ? Est-ce correct ?
• Quelle est la réaction émotionnelle ?
• L'objectif est-il immédiatement clair ?

2. Usabilité

• L'utilisateur peut-il atteindre son objectif ?
• La navigation est-elle intuitive ?
• Les éléments interactifs sont-ils évidents ?
• Y a-t-il des étapes inutiles ?

3. Hiérarchie visuelle

• Y a-t-il un ordre de lecture clair ?
• Les bons éléments sont-ils mis en avant ?
• L'espace blanc est-il utilisé efficacement ?
• La typographie crée-t-elle la bonne hiérarchie ?

4. Cohérence

• Respecte-t-elle le design system ?
• L'espacement, les couleurs et la typographie sont-ils cohérents ?
• Les éléments similaires se comportent-ils de la même façon ?

5. Accessibilité

• Ratios de contraste des couleurs
• Tailles des zones tactiles
• Lisibilité du texte
• Texte alternatif pour les images

Comment donner du feedback

• Soyez spécifique : « Le CTA entre en concurrence avec la navigation » plutôt que « la disposition est confuse »
• Expliquez pourquoi : Reliez le feedback aux principes de conception ou aux besoins des utilisateurs
• Proposez des alternatives : Ne vous contentez pas d'identifier les problèmes, proposez des solutions
• Reconnaissez ce qui fonctionne : Un bon feedback inclut des observations positives
• Adaptez au stade : L'exploration précoce reçoit un feedback différent de la finition finale

Sortie

## Critique de conception : [Nom de la conception]

### Impression générale
[1-2 phrases de première réaction — ce qui fonctionne, la meilleure opportunité]

### Usabilité
| Constat | Sévérité | Recommandation |
|---------|----------|----------------|
| [Problème] | 🔴 Critique / 🟡 Modéré / 🟢 Mineur | [Solution] |

### Hiérarchie visuelle
- **Ce qui attire le regard en premier** : [Élément] — [Est-ce correct ?]
- **Flux de lecture** : [Comment l'œil se déplace-t-il dans la disposition ?]
- **Emphase** : [Les bons éléments sont-ils mis en avant ?]

### Cohérence
| Élément | Problème | Recommandation |
|---------|----------|----------------|
| [Typographie/espacement/couleur] | [Incohérence] | [Solution] |

### Accessibilité
- **Contraste des couleurs** : [Conforme/non conforme pour les textes clés]
- **Zones tactiles** : [Taille adéquate ?]
- **Lisibilité du texte** : [Taille de police, interligne]

### Ce qui fonctionne bien
- [Observation positive 1]
- [Observation positive 2]

### Recommandations prioritaires
1. **[Changement le plus impactant]** — [Pourquoi et comment]
2. **[Deuxième priorité]** — [Pourquoi et comment]
3. **[Troisième priorité]** — [Pourquoi et comment]

Si les connecteurs sont disponibles

Si ~~design tool est connecté :

• Récupérez la conception directement de Figma et inspectez les composants, tokens et calques
• Comparez avec le design system existant pour la cohérence

Si ~~user feedback est connecté :

• Recoupez les décisions de conception avec les retours utilisateur récents et les tickets de support

Astuces

1. Partagez le contexte — « Ceci est un flux de paiement pour un SaaS B2B » m'aide à donner un feedback pertinent.
2. Spécifiez votre stade — L'exploration précoce reçoit un feedback différent de la finition finale.
3. Demandez-moi de me concentrer — « Regardez juste la navigation » vous donne plus de profondeur sur une zone.