Compétence de critique · Expertise en 5 dimensions
Produisez un rapport d'audit de conception HTML "monofichier" qui évalue n'importe quel artefact selon 5 dimensions et propose des corrections exploitables. Inspiré du flux d'expert-critique huashu-design.
Quand l'utiliser
- Après que l'agent (ou l'utilisateur) a généré un artefact (slide / prototype / page d'accueil) et que l'utilisateur demande "qu'est-ce qui cloche ?" ou "revue ceci"
- Comme une boucle d'auto-vérification que l'agent peut exécuter sur son propre résultat avant de l'émettre
- Pour comparer deux variantes d'une même conception
Ce que vous produisez
Un rapport d'audit autonome <artifact type="text/html"> comprenant :
- En-tête — artefact passé en revue, date, critique ("OD · Critique skill"), verdict en une ligne
- Diagramme radar (SVG inline, sans bibliothèque) affichant les 5 scores
- Cinq fiches de dimension, chacune avec :
- Score 0–10 (avec niveau : 0–4 Cassé · 5–6 Fonctionnel · 7–8 Solide · 9–10 Exceptionnel)
- 1 paragraphe de preuve (citer des éléments / fichiers / lignes spécifiques)
- Un point À conserver / À corriger / Gain rapide
- Listes d'actions combinées en bas :
- À conserver — ce qui fonctionne, ne pas toucher
- À corriger — problèmes P0/P1 visuellement coûteux
- Gains rapides — ajustements de 5 à 15 minutes à impact disproportionné
Les 5 dimensions
Chaque dimension est indépendante — un slide peut être 9/10 en Innovation mais 4/10 en Hiérarchie et le rapport doit le dire clairement. Ne lissez pas les échecs intéressants.
1. Cohérence philosophique · 哲学一致性
L'artefact choisit-il une direction claire et s'y tient-il dans chaque micro-décision (chrome / kicker / espacement / accent) ?
Éléments de preuve à rechercher :
- Y a-t-il une direction de conception déclarée (p. ex. Monocle / WIRED / Kinfolk) ou est-ce trois styles en une seule couche ?
- Le vocabulaire du chrome / kicker reste-t-il dans un même registre, ou la page 3 dit "Vol.04 · Printemps" et la page 7 "MAIS ATTENDS 🔥" ?
- Les accents / serif / mono sont-ils utilisés selon la même règle partout ?
0–4 Trois styles en conflit. 5–6 Une direction mais la moitié des éléments dérivent. 7–8 Cohérent, dérive occasionnelle sur les pages marginales. 9–10 Chaque élément défend la même thèse.
2. Hiérarchie visuelle · 视觉层级
Un étranger peut-il deviner quoi lire en premier, second, troisième — sans qu'on le lui dise ?
Éléments de preuve à rechercher :
- Le plus grand texte est-il clairement l'élément le plus important sur chaque page ?
- Les rôles mono / serif / sans correspondent-ils au rôle de l'information (méta / corps / affichage) ?
- Beaucoup d'éléments "forts" en compétition ? Ou une hiérarchie claire primaire + secondaire + tertiaire ?
0–4 Tout crie. 5–6 La hiérarchie fonctionne sur les pages hero mais se brise sur le corps. 7–8 Niveaux clairs, collision occasionnelle. 9–10 L'œil se déplace sans friction.
3. Exécution des détails · 细节执行
Les 90/10 — alignement, interlignage, crénage aux grandes tailles, cadrage des images, chrome/polissage, espacement des cas limites.
Éléments de preuve à rechercher :
- Pages avec grands chiffres : le nombre repose-t-il sur une ligne de base, ou flotte-t-il ?
- Les sommets des colonnes gauche/droite sont-ils alignés dans
grid-2-7-5? - Proportions
frame-img+ légende cohérentes entre les pages ? - Étiquettes mono : même espacement des lettres ? même règle de majuscules ?
- Un
<br>orphelin causant des lignes de 1 caractère ?
0–4 Du ruban adhésif et de la ficelle visibles. 5–6 La plupart des pages propres, 1–2 irrégulières. 7–8 Poli, l'œil expert trouve 2–3 défauts. 9–10 Qualité magazine — le genre de détail qui fait hocher la tête des typographes imprimant à la main.
4. Fonctionnalité · 功能性
L'artefact fonctionne-t-il pour son usage prévu ? Cibles de clic, navigation, lisibilité à distance de présentation, copier-coller pour les blocs de code, repli mobile si pertinent.
Éléments de preuve à rechercher :
- Slide : navigation clavier / molette / tactile fonctionne-t-elle ? Repli de défilement iframe ?
- Page d'accueil : CTA au-dessus de la ligne de flottaison ? Numéro de téléphone tapable sur mobile ?
- Runbook : blocs de code copiables, police mono, pas de guillemets courbes ?
- Informations critiques lisibles à 4 m (présentation grand écran) ?
0–4 Visuellement correct mais n'accomplit pas sa tâche. 5–6 Le flux principal fonctionne, cas limites cassés. 7–8 Robuste en usage normal. 9–10 Ingénierie défensive — gère l'iframe / le plein écran / le collage / l'impression sans broncher.
5. Innovation · 创新性
Cela dépasse-t-il la médiane ? Y a-t-il un élément qui fait se pencher les gens ?
Éléments de preuve à rechercher :
- Un mouvement inattendu de mise en page / animation / typographie qui n'était pas demandé ?
- Ou 100 % sécurisé — pourrait être n'importe quel slide/page d'accueil de n'importe quelle agence ?
- L'innovation est-elle méritée (correspond à la direction) ou greffée (WebGL aléatoire sur un slide Kinfolk slow-living) ?
0–4 Médiocrité générique d'IA. 5–6 Compétent et oubliable. 7–8 Un moment mémorable, le reste solide. 9–10 Plusieurs mouvements que vous voleriez — mais chacun sert la thèse.
Discipline de notation (lisez avant de noter)
- Toujours citer une preuve — "noté 4 car la page hero mélange Playfair display avec Inter sans sur la même ligne" bat "semble incohérent". Les nombres sans preuve sont rejetés.
- Ne lissez pas vers le haut — si Hiérarchie est 5 parce que la page 3 est cassée, ne passez pas à 7 parce que les pages 1 et 2 sont correctes. Le score est le pire niveau soutenu.
- N'inflatez pas les notes — un 7 signifie solide, pas acceptable. Si tous les scores sont 7+, vous ne critiquez pas.
- L'innovation peut être basse — 5/10 est acceptable pour les livrables de production. Ne pénalisez pas le conservatisme approprié.
Flux de travail
Étape 1 — Acquérir l'artefact
Trois modes :
- Fichier du projet — l'utilisateur a dit "revois le index.html que je viens de faire" : ouvrez-le depuis le dossier du projet.
- HTML collé — l'utilisateur a collé du code dans le chat : lisez-le depuis le message.
- Généré par vous dans ce tour — vous venez d'émettre un artefact ci-dessus et voulez l'auto-critiquer : relisez votre propre
<artifact>.
Si plusieurs fichiers HTML existent, demandez lequel (ne révisez pas tous).
Étape 2 — Lire suffisamment pour noter
Parcourez tout le <style>, puis lisez 6 à 8 blocs de contenu représentatifs. Ne notez pas uniquement à partir du frontmatter. Le score dépend de la conception exécutée, pas de l'intention déclarée.
Étape 3 — Noter avec preuve
Pour chacune des 5 dimensions, écrivez le score et un paragraphe de preuve de 30 à 80 mots citant des éléments spécifiques. Utilisez des numéros de ligne, noms de classe, numéros de page.
Exemple :
Dimension : Exécution des détails
Score : 6 / 10
Preuve : Les cartes statistiques de la page 3 s'alignent proprement (grid-6, 3×2), mais sur la page 8 le pied de colonne droite est 2vh plus haut que la gauche car .callout a une marge supérieure de 3vh tandis que la figure n'en a pas. Les légendes d'images utilisent mono sur la page 5 mais sans sur la page 7 — choisissez-en une.
Étape 4 — Construire les listes d'actions
Agrégez les 5 paragraphes de preuve en :
- À conserver (3–5 points) — les choses concrètes qui fonctionnent et que l'utilisateur ne doit pas casser à la prochaine itération. Citez par classe / page / élément.
- À corriger (3–6 points) — incontournables, ordonnés par coût visuel économisé par minute passée. Chaque point ≤ 1 phrase.
- Gains rapides (3–5 points) — 5 à 15 minutes chacun, rapport signal/bruit élevé (p. ex. "remplacez
display:flexpargridsur la page 4 pour corriger la dérive des colonnes").
Étape 5 — Émettre le rapport HTML
Construisez un fichier unique :
- En-tête : nom de l'artefact + crédit du critique + date
- Grand diagramme radar (SVG)
- 5 fiches de dimension en grille 1 ou 2 colonnes
- Trois listes d'actions en bas avec cases à cocher
Utilisez les jetons DESIGN.md actifs s'il en existe un ; sinon, utilisez un thème clair neutre (fond écru, texte quasi noir, un accent pour le remplissage du radar).
Contrat de sortie
<artifact identifier="critique-<slug-de-l-artefact>" type="text/html" title="Critique · <Titre de l'artefact>">
<!doctype html>
<html>...</html>
</artifact>
Une phrase avant l'artefact ("X passé en revue sur 5 dimensions, voir le rapport ci-dessous.") et arrêtez-vous après </artifact> — ne paraphrasez pas le rapport dans le chat ; l'utilisateur lira l'artefact.
Règles strictes
- 5 scores, à chaque fois — les rapports partiels (par exemple seulement 3 dimensions) ne sont pas autorisés.
- Preuve par score — pas de "semble bizarre" / "nécessite du travail". Si vous ne pouvez pas citer un élément, le score n'est pas justifié.
- N'inflatez pas les notes — une moyenne globale au-dessus de 8 est suspecte ; vérifiez-vous.
- Ne critiquez pas votre propre artefact dans le même tour — l'utilisateur doit le voir d'abord. Auto-critique uniquement sur demande explicite ("maintenant, critique ce que tu viens de faire").
- HTML monofichier uniquement — pas de CSS/JS externe. Intégrez tout.
- Le diagramme radar est obligatoire — donne au rapport une silhouette reconnaissable et permet à l'utilisateur de repérer les axes faibles d'un coup d'œil.