Design Mockups · Internal

Pattern vs Composant

3 variants pour différencier visuellement les cards Pattern (1 règle, N occurrences) des cards Composant (1 UI, N règles). Choisis ton préféré, je l'implémente partout.

Pattern = règle récurrente Composant = UI réutilisé

Variant 1

Edge Bar — Accent vertical vs horizontal

Pattern = bande verticale gauche (impact-couleur). Composant = bande horizontale haute (accent). Lecture instantanée.

Critique 11.1
Pattern

Champs de formulaire sans label associé

23occurrencessur 8 pages
1 fix → 23 résolus

Bouton CTA principal

button.btn-cta

Composant

5 règles enfreintes

Contraste insuffisant3.2
Aucun aria-label8.1
Focus visible manquant10.7

+2 autres

1 refonte → 5 règles · 47 instances

Variant 2

Spotlight — Gradient + Big Number

Gradient asymétrique selon l'intent. Pattern emphase le COUNT (23). Composant emphase le NOM. Visuellement marquant.

Critique PATTERN · 11.1
23

occurrences

sur 8 pages

Champs de formulaire sans label associé

1 correction →23 résolus
UI Composant COMPOSANT · 5 règles

Bouton CTA principal

button.btn-cta

Contraste 3.2
aria-label 8.1
Focus 10.7
+2 autres
1 refonte →47 instances

Variant 3

Schematic — Storytelling visuel

Pattern : N points scattered → 1 fix (divergent). Composant : 1 box → N tags (convergent). Visuellement raconte la différence.

PATTERN · 1 règle → N endroits11.1
23

Champs de formulaire sans label associé

Critique ·8 pages
→ 1 fix
COMPOSANT · 1 UI → N règles5 règles

button.btn-cta

47 instances

Bouton CTA principal

Composant UI ·12 pages
1 refonte →

Décision

Quel variant tu préfères ?

Réponds "go V1", "go V2" ou "go V3". Je migre PatternCard.vue et la card composant dans problems.vue avec le variant choisi.

V1 — Edge Bar

Plus sobre, scalable, lecture rapide. Idéal pour 50+ cards.

V2 — Spotlight

Bold, gradient, big number. Plus impressionnant mais visuellement chargé.

V3 — Schematic

Storytelling visuel. Le plus distinctif. Démontre la métaphore "1↔N".