Repolode
Enviar
superdesigndev

superdesigndev/superdesign-skill

Una habilidad para agentes que aporta criterio de diseño a Claude Code, Cursor y otros agentes de código al crear e iterar interfaces, presentaciones y gráficos.

Alternativa open source a:Figma

Ver en GitHubSitio web
Estrellas
947
Forks
74
Issues abiertos
8
Último commit
hace 3 meses

¿Qué es?

Superdesign es una habilidad para agentes que añade orientación de diseño a agentes de código como Claude Code, Cursor y Codex. Sin ella, los agentes tienden a producir interfaces genéricas con los estilos predeterminados de las bibliotecas de componentes. La habilidad permite que un agente lea el código existente para obtener contexto, reúna referencias de estilo de una biblioteca de prompts o de la URL de un sitio web y genere varios borradores de diseño que se pueden ramificar en un lienzo infinito.

El flujo de trabajo abarca el diseño o la mejora de páginas y recorridos, la creación de un archivo del sistema de diseño en .superdesign/design-system.md, la elaboración de presentaciones a partir de un esquema de diapositivas aprobado y la creación de pósteres o gráficos para redes sociales. Los borradores se pueden reemplazar, ramificar para crear variaciones o ampliar a recorridos de usuario de varias páginas. Cada paso se ejecuta mediante una CLI complementaria, @superdesign/cli, que se instala por separado y requiere iniciar sesión.

La habilidad se instala con npx skills add para más de 70 agentes o como plugin con espacio de nombres en Claude Code. Se mantiene junto con la aplicación web superdesign.dev.

Funciones clave

  • 01Genera varios borradores de diseño de interfaz que se pueden ramificar en un lienzo infinito.
  • 02Lee el código existente para mantener la coherencia de los diseños con los componentes actuales.
  • 03Configura y almacena un archivo del sistema de diseño para el proyecto.
  • 04Crea presentaciones a partir de un esquema ordenado de diapositivas aprobado.
  • 05Busca en una biblioteca de prompts y extrae tokens de diseño de la URL de un sitio web.

Casos de uso

  • Rediseñar una página de ajustes o un dashboard que parece una interfaz genérica generada por IA.
  • Configurar un sistema de diseño a partir de un código frontend existente.
  • Crear una presentación de lanzamiento de producto de 8 diapositivas a partir de un esquema aprobado.
  • Crear pósteres, portadas o gráficos para redes sociales de un producto.

Inicio rápido

  1. 1

    Instala la skill en tu agente de programación

    npx skills add superdesigndev/superdesign-skill
  2. 2

    Instala Superdesign CLI

    npm install -g @superdesign/cli@latest
  3. 3

    Inicia sesión en Superdesign

    superdesign login
  4. 4

    Pídele a tu agente que diseñe algo. Por ejemplo: /superdesign improve the design of my dashboard

Antes de usarlo

  • Para usar el flujo de trabajo completo, necesitas una cuenta de superdesign.dev e iniciar sesión mediante la CLI.
  • La skill está diseñada para usarse con agentes de programación, por lo que necesitas tener uno instalado para que resulte útil.
  • El README no indica el costo ni los límites de uso del servicio superdesign.dev.

En colecciones

Skills de diseño de interfaces para agentes de programaciónHerramientas, skills y plugins para Claude CodeAsistentes y agentes de programación con IABibliotecas de skills para agentes de IAFrameworks frontend y componentes de interfaz

Temas

#agent-skills#ai-design#claude-code#ui-design#frontend#coding-agent#design-system#claude-skill#claude-skills#cursor

Preguntas frecuentes

¿Qué es superdesign-skill?
Una habilidad para agentes que aporta criterio de diseño a Claude Code, Cursor y otros agentes de código al crear e iterar interfaces, presentaciones y gráficos. Superdesign es una habilidad para agentes que añade orientación de diseño a agentes de código como Claude Code, Cursor y Codex. Sin ella, los agentes tienden a producir interfaces genéricas con los estilos predeterminados de las bibliotecas de componentes. La habilidad permite que un agente lea el código existente para obtener contexto, reúna referencias de estilo de una biblioteca de prompts o de la URL de un sitio web y genere varios borradores de diseño que se pueden ramificar en un lienzo infinito.
¿superdesign-skill es gratuito? ¿Qué licencia tiene?
superdesign-skill es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿superdesign-skill sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de superdesign-skill fue el 21 ago 2026.
¿Para qué puedo usar superdesign-skill?
Rediseñar una página de ajustes o un dashboard que parece una interfaz genérica generada por IA. Configurar un sistema de diseño a partir de un código frontend existente. Crear una presentación de lanzamiento de producto de 8 diapositivas a partir de un esquema aprobado. Crear pósteres, portadas o gráficos para redes sociales de un producto.
¿Cómo se instala superdesign-skill?
Instala la skill en tu agente de programación: npx skills add superdesigndev/superdesign-skill Instala Superdesign CLI: npm install -g @superdesign/cli@latest Inicia sesión en Superdesign: superdesign login Pídele a tu agente que diseñe algo. Por ejemplo: /superdesign improve the design of my dashboard
¿Dónde consigo superdesign-skill?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/superdesigndev/superdesign-skill

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

Proyectos relacionados