Extraction de design system

Ton codebase a un design system.
Tu ne le savais pas.

Desy Guard scanne ton repo, extrait les tokens et composants que tu utilises vraiment, nettoie ce qui traîne, documente tout, exporte vers tes agents IA, et soumet chaque nouveau composant à une revue structurée avant qu’il entre dans le design system.

Analyser mon codebaseVoir ce qu’on extrait

Gratuit, sans carte bancaire. Premier résultat en 5 minutes.

acme/web-app · mainAnalyse

$ desy scan --repo acme/web-app

✓1 284fichiers analysés

✓312tokens extraits

✓47composants détectés

✓11formats d’export générés

Répartition des tokens

color86
spacing54
typography38
radius12
Score de santé94/100
21
Parsers, du CSS au SwiftUI
11
Formats d’export pour agents IA
5 min
Pour ton premier Health Score
0
Ligne de configuration à écrire

Preuve

21 analyseurs. Ton DS en 5 minutes.

Pas un audit théorique. La sortie réelle d’un scan Desy Guard sur un repo Next.js de 1 284 fichiers.

Tokens extraits

  • --color-brand-600#1F6FEB
  • --color-accent-400#12B886
  • --color-danger-500#E5484D
  • --color-surface-2#F4F5F7
  • SP--space-416px
  • RD--radius-lg12px
  • TY--font-displayInter Tight

+ 305 autres tokens

Composants détectés

  • Button142 usages
  • Card87 usages
  • Input63 usages
  • Badge41 usages
  • Dialog22 usages
  • Tabs14 usages

Santé du DS

0/ 100

Score de santé

Tokens
312
Composants
47
Doublons
38
Frameworks
6

Le problème

En 2026, tes agents écrivent du code plus vite que toi. Mais ils écrivent #3B82F6 au lieu de --color-primary, et margin: 24px au lieu de --spacing-6. Parce que personne ne leur a jamais dit que ton design system existe.

  • 01

    Le DS vit dans Figma, pas dans le repo

    Tes agents ne lisent pas Figma. Ils lisent des fichiers. Tant que tes tokens ne sont pas dans leur contexte, ils improvisent.

  • 02

    La documentation a six mois de retard

    Le fichier de doc a été écrit une fois, au lancement. Depuis, le code a bougé quatorze fois. La doc, jamais.

  • 03

    Chaque agent réinvente ses conventions

    Cursor nomme une variable d’une façon, Copilot d’une autre, Claude d’une troisième. Trois vocabulaires dans la même codebase.

  • 04

    Personne ne voit la dérive avant le refactor

    Les valeurs en dur s’accumulent sans bruit. On les découvre le jour où il faut changer une couleur à 214 endroits.

Le pipeline

Quatre étapes, une source de vérité.

Tu connectes une source. Desy Guard s’occupe de l’extraction, du nettoyage, de la documentation et de la distribution.

  1. 01

    Connecte ta source

    GitHub, Figma, un fichier CSS ou une archive. Aucune configuration, aucun fichier à écrire.

    github.com/acme/web-app

  2. 02

    Extraction multi-parsers

    21 parsers passent sur ton code, du CSS et Tailwind jusqu’à React, Vue, Svelte, Astro, Angular, SwiftUI et Compose.

    21 parsers · 1 284 fichiers

  3. 03

    Clean DS et documentation

    Les doublons fusionnent, les valeurs orphelines remontent, et un LLM documente chaque token et chaque composant.

    design-system.md · 312 tokens

  4. 04

    Export vers tes agents

    11 fichiers générés et versionnés. Tu les commites, tes agents les lisent, ils arrêtent d’inventer.

    .cursorrules · CLAUDE.md · tokens.json

Exports IA

Onze fichiers. Ton agent arrête d’inventer.

Un export par outil, généré depuis le même design system nettoyé. Cursor, Claude, Copilot et Windsurf en tête.

.cursorrulesGénéré
1# Design system, generated by Desy Guard
2# acme/web-app @ main · 312 tokens · 47 components
3 
4## Color
5Always resolve colors to a CSS variable.
6--color-brand-600   #1F6FEB   primary actions
7--color-accent-400  #12B886   success states
8--color-danger-500  #E5484D   destructive
9 
10## Spacing
114px scale, --space-1 to --space-12. No inline px.
12 
13## Components
14Button has 142 usages. Import it, never re-implement it.
15Never write a raw hex value in a component.

Détection des surfaces

Un repo. Plusieurs produits. Zéro confusion.

Desy détecte lorsque votre codebase couvre plusieurs surfaces produit (site marketing, SaaS, application mobile) et audite chacune indépendamment. Comparez leur cohérence, identifiez les dérives entre produits et choisissez le design à standardiser.

  • Détection automatique depuis les route groups Next.js, la structure monorepo et les fichiers de plateforme.
  • Chaque surface possède sa propre liste de tokens, de composants et un score de santé.
  • Une matrice de cohérence indique à quel point vos surfaces produit sont alignées entre elles.

Surfaces détectées

Site Marketing214 tokens91
Application387 tokens74
Mobile129 tokens83

Cohérence inter-surfaces

Site Marketing vs Application
Partielle
Site Marketing vs Mobile
Divergente
Application vs Mobile
Proche
Cohérence moyenne57 / 100

Monitoring

Tes tokens dérivent. Desy te le dit.

Chaque scan compare l’état actuel à ta référence. Une couleur modifiée, un espacement bricolé, un composant dupliqué : tu reçois l’alerte avant la mise en production.

Dérive détectéeil y a 2 min

3 tokens ont changé depuis le dernier scan.

  • --color-brand-600#1F6FEB#2563EB
  • --space-416px15px
  • --radius-lg12px10px
Score de santé94 → 89

Remapping

Ton codebase se remap vers tes tokens.

Desy Guard construit la table de substitution entre tes valeurs en dur et tes tokens propres, puis applique le remplacement fichier par fichier dans une pull request relisible.

components/ui/button.css+3 -3
 .button--primary {
-  background: #1F6FEB;
+  background: var(--color-brand-600);
-  padding: 16px 24px;
+  padding: var(--space-4) var(--space-6);
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
 }
38 fichiers · 214 remplacementsPR ouverte

Gouvernance des composants

Seul Desy fait ça

Un nouveau composant est apparu.
Qui décide s’il appartient au DS ?

Quand un développeur shippe un composant hors du design system, Desy Guard ne se contente pas d’alerter. Il ouvre une revue structurée : approuver l’intégration au DS, rejeter avec une recommandation, ou différer la décision. Aucun autre outil ne fait ça.

File de revue1 en attente

MegaButton

code-aheaden attente de revue

Détecté hors du design system. Aucune documentation existante.

Approuver

  • Composant ajouté au design system
  • Documentation générée par LLM
  • Compteur de composants incrémenté
  • Ticket Jira créé si connecté

Rejeter

  • Alerte drift résolue
  • Recommandation de rejet créée
  • Suggestion de correction attachée
  • Soumetteur notifié

Différer

  • Reste visible dans la file de revue
  • Date de rappel optionnelle
  • Décision possible à tout moment

Aucun autre outil sur le marché ne rend ça possible.

Tarifs

Un audit ponctuel ou une gouvernance continue.

2 mois offerts en annuel

Free

Pour voir l’état réel de ton codebase.

0 €pour toujours

 

  • 1 projet
  • 1 analyse complète
  • Health Score et aperçu des tokens
Commencer gratuitement

Pro

Freelances et consultants design system.

79 €/mois

facturé mensuellement

  • 3 projets, 2 membres
  • 5 analyses/mois
  • Portail client partageable
  • Les 11 exports IA, accès CLI et MCP
Choisir Pro
Plus populaire

Team

Équipes produit en croissance avec plusieurs design systems.

249 €/mois

facturé mensuellement

  • 10 projets, 5 membres
  • 20 analyses/mois
  • Monitoring hebdomadaire + intégration Jira
  • Les 11 exports IA, accès CLI et MCP
Choisir Team

Agency

Agences qui gèrent plusieurs codebases clientes.

799 €/mois

facturé mensuellement

  • 20 projets, 10 membres
  • 100 analyses/mois
  • Monitoring quotidien + intégration Jira
  • Rapports marque blanche
Choisir Agency

Enterprise

Grandes organisations et entreprises.

Sur demande

 

  • Projets et membres illimités
  • Auto-remapping par pull request (bientôt)
  • SSO / SAML et audit logs
  • SLA dédié, onboarding et souveraineté des données
Nous contacter

Besoin d’un audit ponctuel sans engagement d’abonnement ?

Obtenir le One-Shot Pass : 49 $

Prix hors taxes. Changement de plan ou résiliation à tout moment.

Analyse ton codebase.
Vois ton design system tel qu’il est vraiment.

Une source, cinq minutes, un Health Score. Tu verras exactement combien de tokens vivent dans ton code, et combien de valeurs en dur les contredisent.

Commencer, c’est gratuit

Sans carte bancaire. 5 minutes pour ton Health Score.

Desy Guard — Audit et gouvernance de design system pour les équipes IA