Extracción de design system

Tu código tiene un design system.
Nunca lo habías visto.

Desy Guard analiza tu repositorio, extrae los tokens y componentes que de verdad usas, limpia lo que sobra, lo documenta todo, lo exporta a tus agentes IA, y somete cada nuevo componente a una revisión estructurada antes de que entre en el sistema de diseño.

Analizar mi códigoVer qué extraemos

Gratis, sin tarjeta. Primer resultado en 5 minutos.

acme/web-app · mainAnalizando

$ desy scan --repo acme/web-app

✓1 284archivos analizados

✓312tokens extraídos

✓47componentes detectados

✓11formatos de export generados

Reparto de tokens

color86
spacing54
typography38
radius12
Puntuación de salud94/100
21
Parsers, de CSS a SwiftUI
11
Formatos de export para agentes IA
5 min
Hasta tu primer Health Score
0
Líneas de configuración que escribir

Prueba

21 analizadores. Tu DS en 5 minutos.

No es una auditoría teórica. Es la salida real de un escaneo de Desy Guard sobre un repositorio Next.js de 1 284 archivos.

Tokens extraídos

  • --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 tokens más

Componentes detectados

  • Button142 usos
  • Card87 usos
  • Input63 usos
  • Badge41 usos
  • Dialog22 usos
  • Tabs14 usos

Salud del DS

0/ 100

Puntuación de salud

Tokens
312
Componentes
47
Duplicados
38
Frameworks
6

El problema

En 2026 tus agentes escriben código más rápido que tú. Pero escriben #3B82F6 en lugar de --color-primary, y margin: 24px en lugar de --spacing-6. Porque nadie les ha dicho nunca que tu design system existe.

  • 01

    El DS vive en Figma, no en el repositorio

    Los agentes no leen Figma. Leen archivos. Mientras tus tokens no estén en su contexto, improvisan.

  • 02

    La documentación lleva seis meses de retraso

    El documento se escribió una vez, en el lanzamiento. El código ha cambiado catorce veces desde entonces. La documentación, ninguna.

  • 03

    Cada agente inventa sus convenciones

    Cursor nombra una variable de una forma, Copilot de otra, Claude de una tercera. Tres vocabularios en el mismo código.

  • 04

    Nadie ve la deriva hasta el refactor

    Los valores fijos se acumulan en silencio. Aparecen el día que hay que cambiar un color en 214 sitios.

El pipeline

Cuatro pasos, una fuente de verdad.

Tú conectas una fuente. Desy Guard se encarga de la extracción, la limpieza, la documentación y la distribución.

  1. 01

    Conecta tu fuente

    GitHub, Figma, un archivo CSS o un ZIP. Sin configuración, sin archivos que escribir.

    github.com/acme/web-app

  2. 02

    Extracción multi-parser

    21 parsers recorren tu código, de CSS y Tailwind hasta React, Vue, Svelte, Astro, Angular, SwiftUI y Compose.

    21 parsers · 1 284 archivos

  3. 03

    Clean DS y documentación

    Los duplicados se fusionan, los valores huérfanos salen a la luz y un LLM documenta cada token y cada componente.

    design-system.md · 312 tokens

  4. 04

    Export hacia tus agentes

    11 archivos generados y versionados. Los subes al repo, tus agentes los leen y dejan de inventar.

    .cursorrules · CLAUDE.md · tokens.json

Exports IA

Once archivos. Tu agente deja de inventar.

Un export por herramienta, generado desde el mismo design system limpio. Cursor, Claude, Copilot y Windsurf en cabeza.

.cursorrulesGenerado
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.

Detección de superficies

Un repositorio. Varios productos. Cero confusión.

Desy detecta cuando su codebase abarca varias superficies de producto (sitio de marketing, SaaS, app móvil) y audita cada una de forma independiente. Compare su coherencia, identifique desviaciones entre productos y elija el diseño a estandarizar.

  • Detección automática desde route groups, estructura monorepo y archivos de plataforma.
  • Cada superficie tiene su propia lista de tokens, componentes y puntuación de salud.
  • Una matriz de coherencia muestra cuán alineadas están sus superficies de producto.

Superficies detectadas

Sitio de marketing214 tokens91
Aplicación387 tokens74
Móvil129 tokens83

Coherencia entre superficies

Sitio de marketing vs Aplicación
Parcial
Sitio de marketing vs Móvil
Divergente
Aplicación vs Móvil
Cercana
Coherencia media57 / 100

Monitorización

Tus tokens derivan. Desy te avisa.

Cada escaneo compara el estado actual con tu referencia. Un color cambiado, un espaciado improvisado, un componente duplicado: recibes la alerta antes de que llegue a producción.

Deriva detectadahace 2 min

3 tokens han cambiado desde el último escaneo.

  • --color-brand-600#1F6FEB#2563EB
  • --space-416px15px
  • --radius-lg12px10px
Puntuación de salud94 → 89

Remapping

Tu código se remapea hacia tus tokens.

Desy Guard construye la tabla de sustitución entre tus valores fijos y tus tokens limpios, y luego aplica el reemplazo archivo por archivo en una pull request revisable.

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 archivos · 214 reemplazosPR abierta

Gobernanza de componentes

Solo Desy lo hace

Apareció un nuevo componente.
¿Quién decide si pertenece al DS?

Cuando un desarrollador incluye un componente fuera del sistema de diseño, Desy Guard no solo te avisa. Abre una revisión estructurada: aprobarlo al DS, rechazarlo con una recomendación, o diferir la decisión. Ninguna otra herramienta hace esto.

Cola de revisión1 pendiente

MegaButton

código-primeropendiente de revisión

Detectado fuera del sistema de diseño. Sin documentación previa.

Aprobar

  • Componente añadido al sistema de diseño
  • Documentación generada por LLM
  • Contador de componentes incrementado
  • Ticket de Jira creado si conectado

Rechazar

  • Alerta de deriva resuelta
  • Recomendación de rechazo creada
  • Corrección sugerida adjunta
  • Autor notificado

Diferir

  • Permanece visible en la cola
  • Fecha de recordatorio opcional
  • Decisión posible en cualquier momento

Ninguna otra herramienta en el mercado hace esto posible.

Precios

Una auditoría puntual o una gobernanza continua.

2 meses gratis en anual

Free

Para ver el estado real de tu código.

0 €para siempre

 

  • 1 proyecto
  • 1 análisis completo
  • Health Score y vista previa de tokens
Empezar gratis

Pro

Freelances y consultores de design system.

79 €/mes

facturado mensualmente

  • 3 proyectos, 2 miembros
  • 5 análisis/mes
  • Portal de cliente compartible
  • Los 11 exports IA, acceso CLI y MCP
Elegir Pro
Más popular

Team

Equipos de producto en crecimiento con varios design systems.

249 €/mes

facturado mensualmente

  • 10 proyectos, 5 miembros
  • 20 análisis/mes
  • Monitorización semanal + integración Jira
  • Los 11 exports IA, acceso CLI y MCP
Elegir Team

Agency

Agencias que gestionan varios códigos de cliente.

799 €/mes

facturado mensualmente

  • 20 proyectos, 10 miembros
  • 100 análisis/mes
  • Monitorización diaria + integración Jira
  • Marca blanca en los informes
Elegir Agency

Enterprise

Grandes organizaciones y empresas.

A consultar

 

  • Proyectos y miembros ilimitados
  • Auto-remapping por pull request (próximamente)
  • SSO / SAML y registros de auditoría
  • SLA dedicado, onboarding y soberanía de datos
Contáctenos

¿Necesitas una auditoría puntual sin suscripción?

Obtener el One-Shot Pass: $49

Precios sin IVA. Cambia de plan o cancela cuando quieras.

Analiza tu código.
Mira tu design system tal y como es.

Una fuente, cinco minutos, un Health Score. Verás exactamente cuántos tokens viven en tu código y cuántos valores fijos los contradicen.

Empezar gratis

Sin tarjeta. 5 minutos hasta tu Health Score.

Desy Guard — Auditoría y gobernanza de design system para equipos con IA