Explorer
KNOW-PAT-193

Workflow unifié de design web — Godly Corpus + UI UX Pro Max + 21st.dev

Domaine
web-uiux
Type
pattern
Priorité
P0

Parent : [[INDEX-WEB-UIUX]]

Workflow unifié de design web

Règle d'or : Quand l'utilisateur demande un site, une landing page, une refonte UI ou un composant, l'IA doit suivre ce workflow unifié et utiliser les trois ressources dans l'ordre ci-dessous. Cette fiche supplante les workflows isolés de KNOW-PAT-188, KNOW-PAT-190 et KNOW-PAT-191 pour toute demande globale.

Les trois ressources et leur rôle

Ressource Rôle Quand l'utiliser
Godly Corpus (KNOW-PAT-188, KNOW-PAT-189) Inspiration visuelle par secteur En première intention pour "fait moi un site de X"
UI UX Pro Max (KNOW-PAT-190, KNOW-PAT-192) Design system structuré par type de produit Pour générer le système de design (colors, fonts, style, patterns)
21st.dev (KNOW-PAT-191) Composants React réels et production-ready Pour implémenter des composants concrets sans les réinventer

Workflow obligatoire

Étape 1 — Identifier le secteur / le type de produit

Déduis-le de la demande utilisateur :

Demande utilisateur Secteur Thème Godly Type UUPM
"fait moi un site SaaS / outil" SaaS saas-product SaaS (General) / Micro SaaS
"fait moi un portfolio" Créatif portfolio Portfolio/Personal
"fait moi un shop" E-commerce ecommerce E-commerce / E-commerce Luxury
"fait moi un dashboard" Analytics dashboard Analytics Dashboard / Financial Dashboard
"fait moi un site de crypto" Web3 crypto-web3 Fintech/Crypto / NFT/Web3 Platform
"fait moi un site de santé" Wellness health-wellness Healthcare App / Mental Health App
"fait moi un site d'agence" Agence agency Creative Agency
"fait moi une landing page" Marketing landing selon le produit

Étape 2 — Charger la ressource inspiration (Godly Corpus)

  1. Lire KNOW-PAT-189 pour confirmer le routing thème
  2. Charger la fiche themes/{theme}.md correspondante
  3. Noter 3-5 sites références et les patterns visuels dominants

Étape 3 — Générer le design system (UI UX Pro Max)

  1. Lire KNOW-PAT-190 pour la méthodologie
  2. Consulter KNOW-PAT-192 pour le catalogue de styles, palettes, typographies
  3. Choisir :
    • Style approprié au secteur
    • Palette du type de produit UUPM
    • Typography pairing du mood visuel
    • Landing pattern adapté au objectif
  4. Produire un DESIGN.md projet (KNOW-PAT-144)

Étape 4 — Trouver les composants (21st.dev)

  1. Lire KNOW-PAT-191 pour la méthodologie
  2. Consulter KNOW-PAT-194 pour le catalogue des composants par catégorie
  3. Identifier les composants nécessaires (hero, CTA, pricing, features, testimonials, footer)
  4. Utiliser Inspiration Search ou Magic Generate pour obtenir des composants réels
  5. Adapter les composants choisis au design system du projet

Étape 5 — Implémenter et valider

  1. Créer le projet avec le bootstrap J0 (KNOW-PAT-153, ACT-ALW-005)
  2. Implémenter avec les tokens du design system
  3. Appliquer les anti-patterns KNOW-ANT-WEB-001 et KNOW-ANT-WEB-002
  4. Passer le quality gate KNOW-PAT-143 + KNOW-PAT-155 avant de dire "prêt"

Règles de choix entre les ressources

Si la demande est vague : "fait moi un site"

→ Godly Corpus d'abord (inspiration visuelle) → UUPM (design system) → 21st.dev (composants)

Si la demande est technique : "un composant React de pricing"

→ 21st.dev directement → adapter au design system existant (DESIGN.md ou UUPM)

Si la demande est stratégique : "une landing page qui convertit"

→ UUPM (landing patterns + conversion) → Godly (inspiration du secteur) → 21st.dev (composants)

Si la demande est une refonte : "rend mon site plus pro"

→ Analyser le site existant → UUPM (palette + style) → 21st.dev (composants modernes)

Anti-patterns de l'workflow unifié

  • ❌ Sauter l'étape Godly et proposer un design générique startup
  • ❌ Sauter l'étape UUPM et hardcoder des couleurs sans tokens
  • ❌ Copier un composant 21st.dev sans l'adapter au design system
  • ❌ Ignorer KNOW-PAT-143 et dire "c'est prêt" sans vérification
  • ❌ Utiliser uniquement une ressource quand les trois sont pertinentes

Fichiers à consulter dans l'ordre

1. KNOW-PAT-193 (ce workflow)
2. KNOW-PAT-188 / KNOW-PAT-189 (Godly Corpus)
3. KNOW-PAT-190 / KNOW-PAT-192 (UI UX Pro Max)
4. KNOW-PAT-191 (21st.dev)
5. KNOW-PAT-144 (DESIGN.md)
6. KNOW-PAT-143 + KNOW-PAT-155 (quality gate)

Références

  • KNOW-PAT-188 — Guide Godly Corpus
  • KNOW-PAT-189 — Index thèmes Godly
  • KNOW-PAT-190 — UI UX Pro Max guide
  • KNOW-PAT-191 — 21st.dev registry & MCP
  • KNOW-PAT-192 — Catalogue UUPM
  • KNOW-PAT-194 — Catalogue composants 21st.dev
  • KNOW-PAT-143 — Checklist qualité rendu
  • KNOW-PAT-155 — Gate excellence
  • KNOW-PAT-144 — DESIGN.md mémoire design
  • ACT-ALW-005 — Bootstrap J0