Repolode
Enviar
amaancoderx

amaancoderx/npxskillui

Una CLI que extrae el sistema de diseño de un sitio web, un repositorio o un proyecto local y lo guarda en archivos que Claude Code puede leer para crear interfaces coherentes.

Ver en GitHubSitio web
Estrellas
2,418
Forks
250
Issues abiertos
6
Último commit
hace 5 meses

¿Qué es?

SkillUI es una herramienta de línea de comandos que rastrea un sitio web activo, un repositorio git o una base de código local y extrae su sistema de diseño: tokens de color, escala tipográfica, cuadrícula de espaciado y componentes. Empaqueta el resultado en una carpeta con archivos SKILL.md y CLAUDE.md para que Claude Code cargue automáticamente el contexto de diseño cuando le pidas que cree una interfaz.

Funciona en varios modos. El modo predeterminado analiza estáticamente HTML, CSS, fuentes y tokens, sin usar un navegador. El modo Ultra usa Playwright para capturar capturas de pantalla al desplazarse, diferencias entre estados hover y focus, CSS keyframes, patrones de diseño y huellas de componentes del DOM. El modo Dir analiza archivos .css, .scss, .ts, .tsx, .js y .jsx en busca de configuración de Tailwind, variables CSS y patrones de tokens; el modo repo clona un repositorio público y ejecuta el modo Dir sobre él.

La herramienta requiere Node.js 18 o posterior y no necesita ningún servicio de IA ni una clave de API, ya que todo el análisis se ejecuta localmente. El modo Ultra también requiere instalar Playwright con Chromium.

Funciones clave

  • 01Extrae tokens de color, tipografía y espaciado de una URL, un repositorio git o un directorio local.
  • 02Genera archivos SKILL.md y CLAUDE.md que Claude Code carga automáticamente.
  • 03El modo Ultra captura capturas de pantalla al desplazarse, diferencias entre estados hover/focus y animaciones CSS mediante Playwright.
  • 04Genera archivos de tokens en JSON y variables CSS, además de incluir Google Fonts.
  • 05Se ejecuta completamente de forma local, sin necesidad de un modelo de IA ni una clave de API.

Casos de uso

  • Recrear el estilo visual de un sitio existente como punto de partida para una nueva landing page.
  • Proporcionar a Claude Code el contexto de diseño de una aplicación interna antes de pedirle que agregue pantallas.
  • Documentar los tokens de diseño de una base de código que no tiene una guía de estilo escrita.

Temas

#design-system#claude-code#cli#css#design-tokens#playwright#static-analysis

Preguntas frecuentes

¿Qué es npxskillui?
Una CLI que extrae el sistema de diseño de un sitio web, un repositorio o un proyecto local y lo guarda en archivos que Claude Code puede leer para crear interfaces coherentes. SkillUI es una herramienta de línea de comandos que rastrea un sitio web activo, un repositorio git o una base de código local y extrae su sistema de diseño: tokens de color, escala tipográfica, cuadrícula de espaciado y componentes. Empaqueta el resultado en una carpeta con archivos SKILL.md y CLAUDE.md para que Claude Code cargue automáticamente el contexto de diseño cuando le pidas que cree una interfaz.
¿npxskillui es gratuito? ¿Qué licencia tiene?
npxskillui no declara ninguna licencia. Su código es público, pero sin licencia no tienes permiso explícito para reutilizarlo; consulta al autor antes de depender de él.
¿npxskillui sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de npxskillui fue el 7 may 2026.
¿Para qué puedo usar npxskillui?
Recrear el estilo visual de un sitio existente como punto de partida para una nueva landing page. Proporcionar a Claude Code el contexto de diseño de una aplicación interna antes de pedirle que agregue pantallas. Documentar los tokens de diseño de una base de código que no tiene una guía de estilo escrita.
¿Dónde consigo npxskillui?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/amaancoderx/npxskillui

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados