Générer des SVG de pages avec SVG Analyzer

Contexte

Vous avez un projet React/Next.js avec de nombreuses pages, et vous voulez générer des représentations visuelles (maquettes SVG) pour documentation, présentation ou archivage. SVG Analyzer scanne exhaustivement toutes vos pages et composants shadcn/ui, puis génère des SVG fidèles via l’API Shad2SVG. Méthodique et visuel, il cartographie chaque layout, chaque composant, sans exception.

Prérequis

• Projet React/Next.js compilé et accessible en localhost
• Pages et composants shadcn/ui structurés (App Router ou Pages Router)
• Tailwind CSS configuré
• API Shad2SVG disponible (intégrée à SVG Analyzer)
• Optionnel : design tokens documentés (globals.css)

Étapes

1. Invoquer SVG Analyzer

/ulk:frontend:svg-analyzer
# ou
/ulk:svg-analyzer
# ou
svg-analyzer
# ou
analyse SVG

2. Phase 1 : Accueil et cadrage

L’agent accueille et pose des questions :

Bonjour ! Je suis SVG Analyzer.

Ma mission : analyser votre projet React/Next.js en profondeur,
identifier toutes les pages et composants shadcn/ui utilisés,
puis générer des SVG de chaque page via l'API Shad2SVG.

Laissez-moi d'abord scanner votre projet...

Questions:
1. Portée? (tout le projet / module spécifique)
2. Format de sortie? (SVG seul / SVG + HTML / SVG + Markdown)
3. Inclure annotations? (oui/non)

3. Phase 2 : Scan exhaustif

L’agent scanne :

🔍 SVG Analyzer — Scan en cours
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Framework           : Next.js 15 (App Router)
Pages détectées     : 18
Layouts détectés    : 4
Composants total    : 156
Composants shadcn   : 89 (57%)

Détail:
  ✅ Button          : 34 usages
  ✅ Card            : 28 usages
  ✅ Dialog          : 12 usages
  ✅ Form            : 18 usages
  ✅ Table           : 6 usages
  ⚠️  Custom         : 67 composants

Scan complété : 18 pages inventoriées

4. Phase 3 : Génération SVG

L’agent délègue à Shad2SVG pour chaque page :

shad2svg "HomePage" "Hero section + Feature cards"
shad2svg "DashboardPage" "Sidebar + Data table + Chart"
shad2svg "FormPage" "Multi-step form with validation"

Chaque SVG généré inclut :

• Layout structure (grille, flexbox)
• Composants shadcn/ui (Button, Card, Dialog, etc.)
• Typography (headings, body, labels)
• Colors (Tailwind palette)
• Icons (lucide-react)

5. Phase 4 : Documentation

L’agent génère docs/svg-catalog/ :

docs/svg-catalog/
├── _index.md                          # MOC (Map of Content)
├── pages/
│   ├── home.svg
│   ├── home.md (annotations)
│   ├── dashboard.svg
│   └── dashboard.md
├── components/
│   ├── Button.svg
│   └── Button.md
└── patterns/
    ├── form-multi-step.svg
    └── sidebar-layout.svg

Exemple de sortie

Arborescence de sortie SVG :

📁 docs/svg-catalog/

SVG généré (home.svg):
  ┌────────────────────────────────┐
  │        Header Navigation        │
  │ [Logo] [Nav Items] [CTA Button] │
  └────────────────────────────────┘
  ┌────────────────────────────────┐
  │       Hero Section              │
  │   [Heading] [Subtext] [Button]  │
  └────────────────────────────────┘
  ┌────────────────────────────────┐
  │     Feature Cards (3x)          │
  │ [Card] [Card] [Card]            │
  └────────────────────────────────┘
  ┌────────────────────────────────┐
  │        Footer                   │
  │    [Links] [Copyright]          │
  └────────────────────────────────┘

Annotated (home.md):
## HomePage

**Layout**: Flex column, 100vh viewport
**Components**: Header + HeroSection + FeatureCards + Footer
**Colors**: bg-slate-50, text-slate-900, accent: blue-600
**Typography**: H1 (text-4xl), Body (text-sm)

Variantes

• Variante A : Format HTML + SVG — --format=html pour exporter HTML interactif + SVG (utile pour présentations)
• Variante B : Composants seuls — --scope=components/ pour générer SVG de chaque composant individuel
• Variante C : Avec annotations complètes — --annotations=full pour détailler chaque élément (props, variants)

Agents enchaînés

Flux typique :

svg-analyzer (frontend/05)
  ├─ Phase 1 : Accueil (2 min)
  ├─ Phase 2 : Scan exhaustif (20 min)
  ├─ Phase 3 : Génération SVG via Shad2SVG (30 min)
  ├─ Phase 4 : Documentation (10 min)
  └─ Output : docs/svg-catalog/

Post-génération optionnel :

vision (05) ─→ Audit visuel contre designs Figma

Troubleshooting

Symptôme	Cause probable	Résolution
”Shad2SVG API unavailable”	Service pas accessible	Vérifier configuration, relancer SVG Analyzer
”Components not detected”	shadcn/ui non installé ou mal configuré	Lancez npx shadcn-ui@latest init
”SVG generation timeout”	Trop de pages à la fois	Utilisez --scope pour limiter ou relancer partiellement
”Layout looks incorrect in SVG”	Composants custom mal structurés	Annoter composants avec data-layout ou contacter Shad2SVG team

Voir aussi

• ./04-brique-figma-to-code.md — Implémenter design Figma en code
• ./08-backoffice-auditor.md — Audit cohérence Back Office
• ./10-pencil-illustrations.md — Générer fichiers Pencil pour prototypage
• agents/frontend/05-svg-analyzer.md — Documentation complète
• Shad2SVG API : https://shad2svg.dev/ — Convertir shadcn/ui en SVG