Repolode
Enviar
elayadesign

elayadesign/ai-design-skills

Colección de archivos de habilidades de diseño independientes para herramientas de programación con IA como Claude Code, Cursor y Codex; comienza con una habilidad para páginas de destino.

Ver en GitHub
Estrellas
14,290
Forks
1,070
Issues abiertos
1
Último commit
hace 5 días

¿Qué es?

AI Design Skills es un conjunto de habilidades de diseño en formato Markdown que las herramientas de programación con IA pueden seguir al crear interfaces de usuario. Cada habilidad está en una carpeta independiente e incluye un archivo SKILL.md, así que puedes instalar solo las que necesites en el directorio de reglas o habilidades de tu proyecto.

La habilidad actual, landing-page-design, guía a un asistente para crear una página de destino desde cero. Abarca preguntas iniciales, estructura de la página, textos orientados a la conversión y un sistema visual que define la tipografía, el espaciado, el radio de borde y el movimiento. Otro repositorio se encarga de actualizar sitios existentes.

La instalación es compatible con Claude Code (copiando los archivos en .claude/skills), Cursor (como archivo en .cursor/rules) y herramientas como Codex, Windsurf y Cline mediante sus respectivos archivos de reglas. Quienes usan Claude.ai pueden cargar el archivo en un Project o adjuntarlo a un chat. Los valores de diseño, como las fuentes, los colores y el espaciado, están agrupados en una sección cerca del final de cada archivo para facilitar su personalización.

Funciones clave

  • 01Ofrece una habilidad llamada landing-page-design que abarca la estructura, los textos y el sistema visual
  • 02Cada habilidad está en una carpeta independiente y se puede instalar por separado
  • 03Es compatible con Claude Code, Cursor, Codex, Windsurf, Cline y las instrucciones de sistema genéricas
  • 04Los tokens de diseño, como las fuentes, los colores y el espaciado, están agrupados en una sección editable
  • 05Se publica con la licencia MIT

Casos de uso

  • Generar una página de destino para el lanzamiento de un producto con un asistente de programación con IA
  • Dar reglas de diseño coherentes a una herramienta de IA para que las interfaces generadas sigan un sistema visual definido
  • Personalizar las fuentes, los colores y el espaciado según la marca de un equipo mediante un fork del repositorio

Inicio rápido

  1. 1

    Crea la carpeta skills en tu proyecto

    mkdir -p .claude/skills
  2. 2

    Clona el repositorio en una carpeta temporal

    git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
  3. 3

    Copia en tu proyecto la carpeta del skill que quieras (sustituye <skill-name>; por ejemplo, landing-page-design)

    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
  4. 4

    En Claude Code, pregunta en lenguaje natural qué abarca el skill

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 IA

Temas

#ai-coding#design-system#landing-page#claude-code#cursor#prompt-engineering#ui-design

Preguntas frecuentes

¿Qué es ai-design-skills?
Colección de archivos de habilidades de diseño independientes para herramientas de programación con IA como Claude Code, Cursor y Codex; comienza con una habilidad para páginas de destino. AI Design Skills es un conjunto de habilidades de diseño en formato Markdown que las herramientas de programación con IA pueden seguir al crear interfaces de usuario. Cada habilidad está en una carpeta independiente e incluye un archivo SKILL.md, así que puedes instalar solo las que necesites en el directorio de reglas o habilidades de tu proyecto.
¿ai-design-skills es gratuito? ¿Qué licencia tiene?
ai-design-skills es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿ai-design-skills sigue mantenido?
Mantenimiento activo. El último commit de ai-design-skills fue el 1 nov 2026.
¿Para qué puedo usar ai-design-skills?
Generar una página de destino para el lanzamiento de un producto con un asistente de programación con IA Dar reglas de diseño coherentes a una herramienta de IA para que las interfaces generadas sigan un sistema visual definido Personalizar las fuentes, los colores y el espaciado según la marca de un equipo mediante un fork del repositorio
¿Cómo se instala ai-design-skills?
Crea la carpeta skills en tu proyecto: mkdir -p .claude/skills Clona el repositorio en una carpeta temporal: git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills Copia en tu proyecto la carpeta del skill que quieras (sustituye <skill-name>; por ejemplo, landing-page-design): cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/ En Claude Code, pregunta en lenguaje natural qué abarca el skill
¿Dónde consigo ai-design-skills?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/elayadesign/ai-design-skills

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

Proyectos relacionados