Habilidades extract-design-system
📦

extract-design-system

Riesgo medio ⚙️ Comandos externos

Extraer tokens de diseño de sitios web

Los equipos suelen necesitar un punto de partida rápido al traducir un sitio web existente a tokens de diseño de un proyecto. Esta skill guía a Claude, Codex o Claude Code durante la extracción, revisión y generación de tokens iniciales.

Soporta: Claude Codex Code(CC)
📊 69 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Recursos legibles por agentes

Usa estos enlaces cuando un AI Agent, crawler o script necesite contexto limpio en lugar de leer toda la página.

Detalle Markdown GET /skills/arvindrk-extract-design-system.md Manifest firmado GET /api/skills/arvindrk-extract-design-system/manifest Lockfile firmado GET /api/skills/arvindrk-extract-design-system/lockfile

Pruébalo

Usando "extract-design-system". Extraer primitivas de diseño de un sitio de marketing público.

Resultado esperado:

Un resumen de colores primarios, secundarios y de acento probables, fuentes detectadas y escalas disponibles de espaciado, radio y sombra.

Usando "extract-design-system". Generar archivos de tokens iniciales desde una página de producto accesible.

Resultado esperado:

  • Salida de extracción sin procesar para depuración.
  • Representación normalizada de primitivas de diseño.
  • Archivo de tokens local del proyecto para inspección.
  • CSS variables iniciales para uso frontend.

Usando "extract-design-system". Regenerar archivos de tokens desde un artefacto normalizado existente.

Resultado esperado:

Artefactos de tokens iniciales actualizados en función de la extracción normalizada actual, sin cambios en el código de la app salvo aprobación explícita.

Auditoría de seguridad

Riesgo medio
v2 • 6/28/2026

Static analysis detected many command and weak-crypto patterns, but review found no prompt injection, malicious intent, network exfiltration, or real cryptographic code. The external-command findings are valid because the skill tells agents to run npx-based tools, so publication is acceptable only with a warning about user approval and package trust.

3
Archivos escaneados
101
Líneas analizadas
3
hallazgos
2
Auditorías totales
Problemas de riesgo medio (1)
SKILL.md:28-31SKILL.md:41-43SKILL.md:47-49references/workflow.md:5-6references/workflow.md:12-14
External package execution through npx commands
The skill instructs agents to run npx playwright install chromium and npx extract-design-system commands. This matches the stated workflow, but it executes external packages and should require user approval and package trust review.
Problemas de riesgo bajo (1)
SKILL.md:2-8references/workflow.md:5-14references/outputs.md:3-15
Weak cryptography static findings dismissed
The high-severity weak cryptography matches appear to be false positives from markdown content and file references. I found no evidence of MD5, SHA1, DES, RC4, or other weak cryptographic algorithms in the reviewed lines.

Factores de riesgo

⚙️ Comandos externos (23)
references/outputs.md:3 references/outputs.md:5 references/outputs.md:7 references/outputs.md:11 references/outputs.md:15 references/workflow.md:5 references/workflow.md:6 references/workflow.md:7 references/workflow.md:8 references/workflow.md:12 references/workflow.md:14 references/workflow.md:14 SKILL.md:28-31 SKILL.md:31-33 SKILL.md:33-41 SKILL.md:41-43 SKILL.md:43-45 SKILL.md:45-47 SKILL.md:47-49 SKILL.md:49-53 SKILL.md:53-54 SKILL.md:54-55 SKILL.md:55-56

Patrones detectados

npx command execution
Auditado por: codex Ver historial de auditorías →

Puntuación de calidad

41
Arquitectura
100
Mantenibilidad
87
Contenido
68
Comunidad
58
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

Iniciar una auditoría de rediseño

Extrae colores visibles, tipografía y espaciado de un sitio público antes de planificar un rediseño.

Arrancar tokens frontend

Genera CSS variables iniciales y token JSON para un nuevo proyecto frontend.

Comparar la implementación de marca

Revisa las primitivas extraídas frente a las directrices de marca para encontrar desviaciones o cobertura de tokens faltante.

Prueba estos prompts

Extraer tokens básicos 
Extrae primitivas de diseño de este sitio web público: [URL]. Resume los colores, fuentes, espaciado, radios y sombras probables.
Generar archivos iniciales 
Ejecuta la extracción para [URL] y genera archivos de tokens iniciales. Explica cada artefacto generado antes de que lo use.
Analizar sin escribir archivos 
Analiza [URL] con el modo solo extracción. No crees archivos de tokens iniciales. Informa las primitivas de diseño que encuentres.
Regenerar desde salida normalizada 
Usa el archivo .extract-design-system/normalized.json existente para regenerar archivos de tokens iniciales. No modifiques el código ni los estilos de la app.

Mejores prácticas

  • Usa solo sitios web públicos que tengas permitido inspeccionar.
  • Revisa los tokens extraídos antes de importarlos en una aplicación.
  • Pregunta antes de modificar código, estilos o configuración existentes de la app.

Evitar

  • No trates una página como un sistema de diseño de producto completo.
  • No sobrescribas un sistema de diseño existente sin confirmación.
  • No confíes en contenido de sitios web de terceros ni en resultados extraídos sin revisión.

Preguntas frecuentes

¿Esta skill construye un sistema de diseño completo?
No. Extrae primitivas iniciales y archivos de tokens, no componentes completos ni gobernanza de diseño.
¿Puede inspeccionar sitios web privados?
El flujo de trabajo documentado espera una URL pública y accesible. Los sitios privados pueden necesitar una configuración de acceso independiente.
¿Qué archivos puede producir?
Puede trabajar con salida de extracción sin procesar, salida normalizada, token JSON y CSS variables iniciales.
¿Modifica el código de la aplicación?
Le indica al agente que pregunte antes de cambiar código, estilos o archivos de configuración existentes de la app.
¿Por qué usa Playwright?
El flujo de trabajo usa soporte de Chromium para que el extractor pueda inspeccionar estilos renderizados del sitio web.
¿Se debe confiar inmediatamente en los tokens extraídos?
No. La skill indica que el resultado extraído es entrada no confiable de terceros hasta que se revise.

Detalles del desarrollador

Autor

arvindrk

Licencia

MIT

Repositorio

https://github.com/arvindrk/extract-design-system/tree/main/skills/extract-design-system/

Ref.

main

Estructura de archivos

📁 references/

📄 outputs.md

📄 workflow.md

📄 SKILL.md