🔍 ¿Qué hace esta skill?

La Design System Generator Skill analiza los requisitos de tu proyecto y genera un sistema de diseño completo y a medida en segundos. Combina bases de datos buscables de 67 estilos de UI, 161 paletas de color, 57 combinaciones tipográficas y 99 guías de UX con un motor de 161 reglas de razonamiento por sector, devolviendo el patrón de landing, estilo, colores, tipografía y efectos idóneos junto con los anti-patrones que debes evitar.

Descubre themes y prompts para Claude Design

Interfaces listas para usar con Claude Code y Design Systems

Explora prompts, themes y workflows optimizados para crear interfaces modernas en minutos.

✅ Themes para Claude Design
✅ Prompts visuales y workflows listos para producción

Ver componentes Theme para Claude Design

100% Gratis · Sin registro

Design System Generator es código abierto. Úsala, modifícala y compártela sin restricciones.

Guía de instalación completa Ver guías

🎨

Sistema de diseño a medida

Genera estilo, paleta, tipografía y efectos coherentes a partir de una simple descripción del producto.

🏭

Reglas por sector

Aplica 161 reglas específicas para SaaS, fintech, salud, e-commerce, wellness y muchos más.

🚫

Detección de anti-patrones

Avisa de lo que NO debes hacer en cada industria antes de entregar la UI.

🧩

Guías por stack

Devuelve recomendaciones específicas para React, Next.js, Vue, Astro, SwiftUI, Flutter y más.

⚙️ Cómo instalar

$ Instalación rápida (one-liner)

Instala esta Skill: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

1

Descarga el archivo ZIP

Haz clic en el botón de descarga para obtener ui-ux-pro-max.zip.

2

Descomprime en tu carpeta de skills

Extrae el contenido en la carpeta de skills de Claude:

~/.claude/skills/ui-ux-pro-max/

3

Verifica que existe SKILL.md

Comprueba que dentro de ui-ux-pro-max/ existe el archivo SKILL.md y la carpeta de scripts.

ui-ux-pro-max/ ├── SKILL.md └── scripts/search.py

4

Comprueba Python 3

El motor de búsqueda necesita Python 3.x (sin dependencias externas).

python3 --version

5

Reinicia Claude Code o Cowork

Cierra y vuelve a abrir la aplicación. Claude activará la skill al pedir cualquier tarea de UI/UX.

💬 Ejemplos de uso

🏠 Landing por sector

Crea un sistema de diseño para una landing de un spa de bienestar y dime estilo, colores y tipografía.

💳 App fintech

Genera el sistema de diseño de una app de banca fintech con tema oscuro y anti-patrones a evitar.

📊 Dashboard

Recomiéndame estilo, paleta y tipos de gráfico para un dashboard de analítica sanitaria.

🎨 Estilo concreto

Dame las keywords de CSS y el prompt para aplicar glassmorphism en un SaaS moderno.

🛠️ Características

✅

Motor de razonamiento por sector 161 reglas industriales que cruzan tipo de producto, estilo, color, tipografía y efectos.

✅

Bases de datos buscables 67 estilos UI, 161 paletas, 57 pares tipográficos, 25 tipos de gráfico y 99 guías UX.

✅

Búsqueda híbrida BM25 + regex Motor en Python que rankea resultados por relevancia con detección automática de dominio.

✅

Guías específicas por stack Recomendaciones adaptadas a 15 stacks: React, Next.js, Vue, Astro, SwiftUI, Flutter y más.

✅

Checklist anti-patrones Valida la UI frente a errores comunes de accesibilidad y diseño antes de entregar.

❓ Preguntas frecuentes

Solo Python 3.x, que ya viene en la mayoría de sistemas. El motor de búsqueda no requiere dependencias externas.

Sí. Incluye guías para 15 stacks (React, Next.js, Vue, Astro, SwiftUI, Flutter, etc.) y por defecto usa HTML + Tailwind.

Genera el sistema de diseño (estilo, colores, tipografía, efectos) y Claude lo usa para implementar la UI siguiendo esas reglas.

Se activa solo al pedir tareas de UI/UX, o puedes invocar el script search.py con la opción --design-system para salida directa.

Design System Generator