Extract Design System
Extracción de tokens de diseño de navegador sin cabeza desde cualquier sitio web público
Tested · Didn't pass
Qué hace
Envuelve la CLI dembrandt para dirigir un Chromium sin cabeza a una URL pública y escribir archivos de tokens de inicio — .extract-design-system/raw.json y normalized.json más design-system/tokens.json y tokens.css. Se activa cuando pides hacer ingeniería inversa de los colores, fuentes, espaciado, radios o sombras de un sitio en propiedades personalizadas CSS para un nuevo proyecto. Requiere Node 20+ y una única `npx playwright install chromium`.
Informe de la prueba
La CLI se ejecuta limpiamente y la extracción del navegador subyacente es genuinamente buena — pero el normalizador desecha la mayor parte antes de que la veas. Ejecutado contra linear.app, la captura en bruto contenía 39 propiedades personalizadas CSS incluyendo --color-accent: #7170ff, 8 colores de paleta, 12 sombras y 19 radios; la salida normalizada que la skill te dice que revises mantuvo dos colores, cero variables, cero sombras, cero radios, y nombró el color primario de la marca como rgb(247, 248, 248), un casi blanco que apareció exactamente una vez en la página. La misma forma en stripe.com: 117 variables CSS capturadas incluyendo la rampa completa de la marca, luego descartadas, dejando un tokens.css de dos colores y veinte valores de píxeles en bruto con 14.5px y 16.5px en la escala de espaciado. La causa es una falta de coincidencia de tipos en src/normalize/normalize.ts — dembrandt emite arrays de objetos, el normalizador filtra por cadenas y silenciosamente termina con arrays vacíos, y lee objetos de sombra bajo una clave .value que dembrandt llama .shadow. Cinco minutos de buscar en las propias hojas de estilo del sitio con curl recuperaron la rampa de marca y los tokens de radio reales de Stripe, lo que la skill no hizo, por lo que en su entregable principal actualmente te cuesta más de lo que te da.
Probado el: 2026-08-07 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/arvindrk/extract-design-system.git mkdir -p ~/.claude/skills cd extract-design-system && cp -r skills/extract-design-system ~/.claude/skills/extract-design-system
Comandos y prompts de ejemplo
/extract-design-systemExtracción de tokens de diseño de navegador sin cabeza desde cualquier sitio web público
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Extract the color palette and fonts from stripe.com as CSS tokensReverse-engineer this site's design tokens into tokens.cssPull the spacing, radii and shadows off linear.app into tokens.json