Habilidad de Estilo de Diseño
Propósito
Esta habilidad ayuda a Claude Code a crear interfaces frontend hermosas y distintivas recuperando automáticamente prompts de sistemas de diseño del directorio prompts/. En lugar de generar UI genéricas, esta habilidad permite a Claude construir interfaces con estéticas de diseño específicas como Neo-brutalismo, Dark Moderno, Lujo, Cyberpunk y más.
Cuándo Usarla
Esta habilidad se invoca automáticamente cuando:
- El usuario pide construir una página web, una página de aterrizaje o una aplicación web
- El usuario solicita un componente de UI con un estilo de diseño específico
- El usuario menciona frontend, React, Vue o desarrollo web
- El usuario pide una estética específica (ej., "haz que se vea moderno y oscuro" o "usa un estilo brutalista")
Estilos de Diseño Disponibles
Los siguientes sistemas de diseño están disponibles en el directorio prompts/:
- Academia - Académico, clásico, refinado
- ArtDeco - Glamour lujoso de los años 20
- Bauhaus - Minimalismo geométrico funcionalista
- BoldTypography - Diseño centrado en la tipografía
- Botanical - Inspirado en la naturaleza, orgánico
- Claymorphism - Elementos 3D suaves, como de arcilla
- Cyberpunk - Futurista, neón, alta tecnología
- Enterprise - Profesional, corporativo, escalable
- FlatDesign - Limpio, minimalista, 2D
- Fluent2 - Sistema de diseño Microsoft Fluent 2
- HumanistLiterary - Cálido, literario, conversacional (estética Claude)
- Industrial - Crudo, mecánico, utilitario
- Kinetic - Dinámico, centrado en el movimiento
- Luxury - Premium, elegante, sofisticado
- Material - Diseño Material de Google
- Maximalism - Audaz, expresivo, abundante
- MinimalDrak - Tema oscuro minimalista (nota: error tipográfico en el original)
- ModernDark - UI oscura contemporánea con profundidad
- Monochrome - Blanco y negro, alto contraste
- Neo-brutalism - Brutalismo audaz, crudo y colorido
- Neumorphism - UI suave, esqueuomórfico
- Newsprint - Inspirado en periódicos
- Organic - Formas naturales y fluidas
- PlayfulGeometric - Formas geométricas divertidas
- Professional - Limpio, centrado en los negocios
- Retro - Vintage, nostálgico
- Saas - Estética SaaS moderna
- Sketch - Dibujado a mano, artístico
- Swiss - Estilo Tipográfico Internacional
- TerminalCLI - Estética de interfaz de línea de comandos
- Vaporwave - Estética de los 80/90, nostálgico
- Web3 - Descentralizado, inspirado en cripto
Cómo Funciona
Paso 1: Entender la Intención del Usuario
Cuando el usuario solicite trabajo de frontend, primero determina:
- Stack tecnológico - ¿Qué framework están usando? (React, Vue, Next.js, etc.)
- Preferencia de diseño - ¿Mencionaron un estilo o estética específica?
- Alcance del componente - ¿Componente único, página completa o aplicación entera?
Paso 2: Seleccionar el Estilo de Diseño
Si el usuario especifica un estilo:
- Empareja su solicitud con los estilos disponibles (ej., "brutalista" → Neo-brutalismo)
- Coincidencia sin distinción entre mayúsculas y minúsculas (brutalismo, Brutalismo, BRUTALISMO funcionan)
Si el usuario no especifica:
- Para proyectos modernos y profesionales → ModernDark o Professional
- Para proyectos creativos y audaces → Neo-brutalism o BoldTypography
- Para proyectos minimalistas y limpios → FlatDesign o Swiss
- Para empresarial/corporativo → Enterprise
Pregunta al usuario si no estás seguro de qué estilo se adapta a sus necesidades.
Paso 3: Recuperar el Sistema de Diseño
Usa la herramienta de Lectura para cargar el archivo de prompt apropiado:
Read: prompts/<NombreDelEstilo>.md
Por ejemplo:
prompts/Neo-brutalism.mdprompts/ModernDark.mdprompts/Cyberpunk.md
Paso 4: Aplicar el Sistema de Diseño
Una vez que hayas cargado el prompt del sistema de diseño:
- Interioriza la filosofía de diseño - Comprende los principios centrales, las firmas visuales y los factores de diferenciación
- Extrae los tokens de diseño - Colores, tipografía, espaciado, sombras, bordes
- Sigue los patrones de componentes - Usa los estilos de botones especificados, diseños de tarjetas, etc.
- Aplica el "Factor Audaz" - Implementa elementos característicos que hagan auténtico el diseño
- Evita los antipatrones - No uses técnicas que rompan la estética
Paso 5: Construir con Contexto
Antes de escribir código:
- Identifica el stack tecnológico existente del usuario
- Comprende su arquitectura de componentes
- Ten en cuenta cualquier restricción (frameworks CSS, bibliotecas de diseño, etc.)
Al escribir código:
- Empareja sus patrones y convenciones existentes
- Centraliza los tokens de diseño en variables CSS o un archivo de configuración
- Crea componentes reutilizables y componibles
- Explica brevemente tus elecciones arquitectónicas
Estándares de calidad:
- Preserva o mejora la accesibilidad
- Asegura un diseño responsivo en todos los dispositivos
- Toma decisiones de diseño deliberadas y creativas (no un código repetitivo genérico)
- Deja el código base más limpio de lo que lo encontraste
Ejemplos
Ejemplo 1: El Usuario Especifica un Estilo
Usuario: "Crea una página de aterrizaje para mi producto SaaS con un diseño neo-brutalista"
Acciones de la Habilidad:
- Detecta palabras clave: "página de aterrizaje", "neo-brutalista"
- Mapea "neo-brutalista" →
prompts/Neo-brutalism.md - Lee el prompt del sistema de diseño
- Haz preguntas aclaratorias: "¿Qué stack tecnológico estás usando? ¿React, Vue o HTML/CSS simple?"
- Construye la página de aterrizaje siguiendo los principios del Neo-brutalismo (bordes gruesos, sombras duras, colores audaces, etc.)
Ejemplo 2: El Usuario No Especifica un Estilo
Usuario: "Ayúdame a construir un sitio web de portafolio"
Acciones de la Habilidad:
- Detecta: "sitio web de portafolio" (contexto creativo)
- Sugiere opciones: "¿Te gustaría un estilo de diseño específico? Puedo crearlo en Modern Dark (sofisticado), Neo-brutalismo (audaz y creativo) o Suizo (minimalista y limpio)."
- El usuario responde con una preferencia
- Carga el prompt apropiado y construye
Ejemplo 3: Solicitud de Componente
Usuario: "Agrega un formulario de contacto a mi aplicación Next.js. Haz que se vea moderno y profesional."
Acciones de la Habilidad:
- Palabras clave: "Next.js", "moderno y profesional"
- Selecciona:
ModernDark.md(moderno) oProfessional.md(profesional) - Lee el sistema de diseño
- Construye el componente de formulario siguiendo los patrones de Next.js del usuario
- Usa tokens de diseño del prompt (colores, tipografía, sombras, etc.)
Comandos de Referencia Rápida
Al implementar, puedes consultar rápidamente secciones específicas:
Colores:
Grep: pattern "Token|Value|Usage" path "prompts/<Estilo>.md"
Tipografía:
Grep: pattern "Font|Weight|Size" path "prompts/<Estilo>.md"
Patrones de Componentes:
Grep: pattern "Button|Card|Input" path "prompts/<Estilo>.md"
Consejos para los Mejores Resultados
- Lee el prompt completo - No lo hojees. Las secciones de filosofía de diseño y diferenciación son críticas.
- Implementa elementos característicos - Cada sistema de diseño tiene una sección "Factor Audaz". Estos elementos son lo que lo hace auténtico.
- Evita los antipatrones - Cada prompt enumera lo que NO se debe hacer. Sigue estas reglas estrictamente.
- Haz preguntas - Si las necesidades del usuario no están claras, pregunta antes de construir.
- Empareja el código existente - No luches contra su stack tecnológico. Integra el sistema de diseño en sus patrones existentes.
Notas
- Todos los prompts de sistemas de diseño siguen la misma estructura: secciones
<role>y<design-system> - Los prompts incluyen paletas de colores detalladas, escalas tipográficas, patrones de componentes y ejemplos de implementación
- Cada estilo está listo para producción y ha sido cuidadosamente elaborado para la distinción visual
- Los prompts están diseñados para prevenir interfaces genéricas con apariencia de IA
Mejoras Futuras
Mejoras potenciales para esta habilidad:
- Soporte para combinación de estilos (ej., "Cyberpunk + Minimal")
- Flujo de trabajo de creación de estilos personalizados
- Extracción de tokens de diseño a JSON/CSS
- Generación de bibliotecas de componentes a partir de prompts