Habilidad de Estilo de Diseño
Propósito
Esta habilidad ayuda a Claude Code a crear interfaces frontend hermosas y distintivas mediante la recuperación automática de prompts de sistemas de diseño desde el directorio prompts/. En lugar de producir UI genérica, esta habilidad permite a Claude construir interfaces con estéticas de diseño específicas como Neo-brutalismo, Modern Dark, Lujo, Ciberpunk y más.
Cuándo Usar
Esta habilidad se invoca automáticamente cuando:
- El usuario pide construir una página web, landing page o aplicación web
- El usuario solicita un componente 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 funcionalista y geométrico
- BoldTypography - Diseño centrado en la tipografía
- Botanical - Inspirado en la naturaleza, orgánico
- Claymorphism - Elementos 3D suaves como 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 - Google Material Design
- 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, enfocado 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 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:
- Coincide su solicitud con los estilos disponibles (ej., "brutalista" → Neo-brutalismo)
- Coincidencia sin distinción de mayúsculas/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 Leer para cargar el archivo de prompt apropiado:
Leer: 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:
- Internaliza 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, diseños de tarjetas, etc., especificados
- Aplica el "Factor Audaz" - Implementa elementos de firma que hacen auténtico el diseño
- Evita los anti-patrones - 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:
- Coincide con 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 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 landing page para mi producto SaaS con un diseño neo-brutalista"
Acciones de la Habilidad:
- Detectar palabras clave: "landing page", "neo-brutalista"
- Mapear "neo-brutalista" →
prompts/Neo-brutalism.md - Leer el prompt del sistema de diseño
- Hacer preguntas aclaratorias: "¿Qué stack tecnológico estás usando? ¿React, Vue o HTML/CSS simple?"
- Construir la landing page siguiendo los principios de 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:
- Detectar: "sitio web de portafolio" (contexto creativo)
- Sugerir opciones: "¿Te gustaría un estilo de diseño específico? Puedo crearlo en Modern Dark (sofisticado), Neo-brutalismo (audaz y creativo) o Swiss (minimalista y limpio)."
- El usuario responde con su preferencia
- Cargar el prompt apropiado y construir
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"
- Seleccionar:
ModernDark.md(moderno) oProfessional.md(profesional) - Leer el sistema de diseño
- Construir el componente de formulario que coincida con sus patrones de Next.js
- Usar tokens de diseño del prompt (colores, tipografía, sombras, etc.)
Comandos de Referencia Rápida
Al implementar, puedes hacer referencia rápida a secciones específicas:
Colores:
Grep: patrón "Token|V alor|Uso" ruta "prompts/<Estilo>.md"
Tipografía:
Grep: patrón "Fuente|Peso|Tamaño" ruta "prompts/<Estilo>.md"
Patrones de Componentes:
Grep: patrón "Botón|Tarjeta|Entrada" ruta "prompts/<Estilo>.md"
Consejos para Mejores Resultados
- Lee el prompt completo - No solo lo hojees. Las secciones de filosofía de diseño y diferenciación son críticas.
- Implementa elementos de firma - Cada sistema de diseño tiene una sección "Factor Audaz". Estos elementos son lo que lo hace auténtico.
- Evita anti-patrones - 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.
- Coincide con 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
<rol>y<sistema-de-diseño> - 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 ser visualmente distintivo
- Los prompts están diseñados para prevenir interfaces genéricas y con apariencia de IA
Mejoras Futuras
Mejoras potenciales para esta habilidad:
- Soporte para combinación de estilos (ej., "Ciberpunk + Minimal")
- Flujo de trabajo de creación de estilo personalizado
- Extracción de tokens de diseño a JSON/CSS
- Generación de bibliotecas de componentes a partir de prompts