Install
npx skills add arvindrk/extract-design-systemPara quién
Instala esta Skill cuando necesites reconstruir tokens de diseño desde un sitio público y generar JSON de arranque más propiedades CSS personalizadas para un proyecto local. Cobertura oficial: colors, typography, spacing, border radius, shadows. Se puede usar como AI agent skill (Claude, Cursor, Codex) o standalone CLI.
Encaja si quieres starter tokens rápido, no una biblioteca de componentes entera. El cuerpo nombra esos tres agentes y también un CLI independiente; no lo leas como soporte de solo uno. Si el sitio objetivo no es accesible en público, o esperas que parchee la config del framework o reescriba la app, esta habilidad no encaja.
Página: https://github.com/arvindrk/extract-design-system
Primer intento en 3 minutos
Solo este comando de instalación:
npx skills add arvindrk/extract-design-system
Requisitos previos: tienes un proyecto local y vas a extraer de «una página accesible en público»; aceptas que escribirá los archivos que nombra la documentación. No nombres un directorio que no aparezca.
En el primer intento, comprueba primero el alcance; no escribas archivos de inmediato. Pide al agente: qué tokens puede extraer, qué archivos generará y qué no hará. Señal de éxito: colors / typography / spacing / border radius / shadows, y .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, design-system/tokens.css; y que reformule Public websites only, Single-page extraction workflow, Starter tokens, not a full component library, No framework config patching or automatic app rewrites.
Después, extrae con el ejemplo oficial: https://stripe.com and generate starter token files for this project. Señal de éxito: aparecen esos cuatro archivos y la config del framework no cambió. La página menciona un standalone CLI sin comando de arranque; no lo inventes.
Casos de uso
Caso 1: extraer Stripe con el ejemplo oficial. El texto original es Extract the design system from https://stripe.com and generate starter token files for this project. Escribe archivos y sale a la red pública; confirma el directorio del proyecto antes de ejecutar. Se puede comprobar archivos de tokens de arranque, no un set de componentes.
Caso 2: otra página pública única, solo tokens de arranque. Entrega cualquier página que abra en público y pide extraer tokens sin cambiar la app. Señal de éxito: siguen esos cuatro archivos oficiales, y el agente se niega a añadir parches de framework. No asumas que un sitio de varias páginas se recorrerá entero; el cuerpo dice single-page.
Límites de uso
Solo sitios públicos. Páginas privadas o con inicio de sesión quedan fuera.
Una página por vez. El producto es starter tokens, no una biblioteca de componentes completa.
No hace framework config patching ni automatic app rewrites.
Las rutas de salida siguen el cuerpo; no las renombres ni las guardes en un sitio no escrito.
Claude, Cursor, Codex y standalone CLI están en el texto original; no lo escribas como soporte exclusivo. El arranque del CLI no se da; no lo inventes. No completes selectores, sesiones iniciadas ni dominios por lote no escritos.