🔍 What does this skill do?

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

🎨

Custom design system

Generate a consistent style, color palette, typography, and effects based on a simple product description.

🏭

Rules by sector

It applies 161 specific rules for SaaS, fintech, healthcare, e-commerce, wellness, and many more.

🚫

Identifying anti-patterns

Here’s what you should NOT do in each industry before handing over the UI.

🧩

Guides by stack

It returns specific recommendations for React, Next.js, Vue, Astro, SwiftUI, Flutter, and more.

⚙️ How to install

$ Quick install (one-liner)

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

1

Download the ZIP file

Click the download button to get ui-ux-pro-max.zip.

2

Unzip it into your "skills" folder

Extract the contents to Claude's "skills" folder:

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

3

Check that SKILL.md exists

Verify that the SKILL.md file and the scripts folder exist inside the ui-ux-pro-max/ directory.

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

4

Try Python 3

The search engine requires Python 3.x (with no external dependencies).

python3 --version

5

Restart Claude Code or Cowork

Close and reopen the app. Claude will activate the skill when you request any UI/UX task.

💬 Usage examples

🏠 Landings by sector

Create a design concept for a wellness spa landing page and tell me the style, colors, and typography.

💳 Fintech app

Create a design system for a fintech banking app featuring a dark theme and anti-patterns to avoid.

📊 Dashboard

Please recommend a style, color scheme, and chart types for a healthcare analytics dashboard.

🎨 Concrete style

Give me the CSS keywords and the prompt for applying glassmorphism to a modern SaaS application.

🛠️ Features

✅

Sector-based reasoning engine 161 design guidelines covering product type, style, color, typography, and effects.

✅

Searchable databases 67 UI styles, 161 color palettes, 57 typeface pairs, 25 graphic types, and 99 UX guidelines.

✅

BM25 + regex hybrid search A Python-based engine that ranks results by relevance with automatic domain detection.

✅

Stack-specific guides Recommendations tailored to 15 frameworks: React, Next.js, Vue, Astro, SwiftUI, Flutter, and more.

✅

Anti-pattern Checklist Test the UI for common accessibility and design issues before release.

❓ Frequently asked questions

Only Python 3.x, which is already preinstalled on most systems. The search engine does not require any external dependencies.

Yes. It includes guides for 15 different frameworks (React, Next.js, Vue, Astro, SwiftUI, Flutter, etc.) and uses HTML + Tailwind by default.

The design system defines the style, colors, typography, and effects, and Claude uses it to implement the UI according to those rules.

It is triggered only when requesting UI/UX tasks, or you can run the search.py script with the --design-system option for direct output.

Design System Generator