Excelencia en Diseño
Haz que las aplicaciones construidas por IA parezcan hechas por humanos. Sin plantillas genéricas. Sin patrones evidentes.
<core_principle>
El Estándar de Artesanía
Si alguien puede darse cuenta de que fue generado por IA, hemos fracasado.
El buen diseño es invisible. Los usuarios deberían sentir que la aplicación es profesional, no notar que sigue una plantilla. </core_principle>
<color_system>
Filosofía del Color
El Problema con las Elecciones de Color de la IA
La IA tiende a elegir:
- Degradados morados sobre fondo blanco (aspecto típico de Lovable)
- Colores de acento demasiado saturados
- Demasiados colores en una misma interfaz
- Degradados donde los colores sólidos funcionan mejor
Nuestro Enfoque: Moderación
Paleta Base (Por defecto)
/* Usa la escala slate de Tailwind para neutros */
--background: slate-50 /* Fondo de página */
--surface: white /* Tarjetas, modales */
--border: slate-200 /* Divisores, bordes */
--text-primary: slate-900 /* Títulos */
--text-secondary: slate-600 /* Texto de cuerpo */
--text-muted: slate-400 /* Marcadores de posición, sugerencias */
Colores de Acento (Elige UNO por aplicación)
/* Por defecto: Azul (profesional, confiable) */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50
/* Alternativos según el tipo de aplicación: */
/* Finanzas/Banca → Verde (dinero) */
/* Salud/Bienestar → Verde azulado (calma) */
/* Comida/Restaurante → Naranja (apetito) */
/* Creativo/Diseño → Púrpura (creatividad) */
/* Urgente/Alerta → Rojo (atención) */
Reglas
- UN color de acento por aplicación, sin excepciones
- Usa el acento con moderación: solo botones, enlaces y resaltados
- Nunca uses degradados en botones primarios
- El fondo es blanco o casi blanco, no de color
- Modo oscuro: invierte correctamente, no lo vuelvas simplemente gris </color_system>
<typography_system>
Reglas de Tipografía
La Pila de Fuentes
/* No especifiques Inter en todas partes - usa fuentes del sistema */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Esto se ve nativo en cada plataforma */
Escala Tipográfica (clases de Tailwind)
Título de página: text-2xl font-semibold (24px)
Título de sección: text-lg font-medium (18px)
Título de tarjeta: text-base font-medium (16px)
Cuerpo: text-sm (14px)
Pequeño/Pie: text-xs text-slate-500 (12px)
Antipatrones
❌ No uses font-bold en todo
❌ No mezcles demasiados tamaños de fuente en una tarjeta
❌ No uses MAYÚSCULAS para texto largo
❌ No centres párrafos de cuerpo
❌ No uses negro puro (#000) - usa slate-900
Patrones Correctos
✅ Títulos: semibold o medium, nunca regular ✅ Cuerpo: peso regular, buena altura de línea (1.5-1.6) ✅ Mantén la jerarquía: máximo 3 tamaños por componente ✅ Alinea la mayoría del texto a la izquierda (excepto títulos en diseños centrados) </typography_system>
<spacing_system>
Espaciado y Diseño
Escala de Espaciado
Usa la escala predeterminada de Tailwind de forma consistente:
4 (1rem/16px) - Espacios pequeños, elementos en línea
6 (1.5rem/24px) - Espacios medianos, entre componentes
8 (2rem/32px) - Espacios grandes, entre secciones
12 (3rem/48px) - Espacios extra grandes, secciones de página
Diseño de Página
// Contenedor de página estándar
<div className="p-4 md:p-6 lg:p-8">
{/* Título de página */}
<h1 className="text-2xl font-semibold mb-6">Panel</h1>
{/* Secciones de contenido con espaciado consistente */}
<section className="mb-8">
{/* Contenido de la sección */}
</section>
</div>
Espaciado Interno de Tarjetas
<Card>
<CardHeader className="pb-4"> {/* Reduce el padding predeterminado */}
<CardTitle>Título</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{/* Contenido con espacios verticales */}
</CardContent>
</Card>
Antipatrones
❌ Padding inconsistente (p-3 aquí, p-5 allá) ❌ Demasiado poco espacio en blanco (sensación apretada) ❌ Demasiado espacio en blanco (sensación desconectada) ❌ Diferentes tamaños de espacio para elementos del mismo nivel </spacing_system>
<animation_system>
Movimiento y Animación
Filosofía
La animación debería:
- Sentirse natural, no llamativa
- Proporcionar retroalimentación, no distracción
- Ser rápida (150-300ms), no lenta
- Ser sutil, no dramática
Transiciones Estándar
// Estados hover - usa transition-colors o transition-all
<div className="transition-colors hover:bg-slate-50">
// Hover en tarjeta - elevación sutil
<Card className="transition-shadow hover:shadow-md">
// Hover en botón - ya integrado en shadcn, no lo sobrescribas
<Button>Ya animado</Button>
Patrones de Framer Motion
// Transiciones de página
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
// Escalonado de lista
<motion.div
variants={{
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
}}
initial="hidden"
animate="show"
>
{items.map(item => (
<motion.div
key={item.id}
variants={{
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}}
>
{item.content}
</motion.div>
))}
</motion.div>
// Microinteracción - pulsación de botón
<motion.button whileTap={{ scale: 0.98 }}>
Haz clic
</motion.button>
Tiempos de Animación
- Efectos hover: 150ms
- Transiciones pequeñas: 200ms
- Transiciones de página: 300ms
- Animaciones complejas: 400-500ms máximo
Antipatrones
❌ Efectos de rebote (se siente barato) ❌ Animaciones lentas (>500ms se siente torpe) ❌ Animación en cada elemento (abrumador) ❌ Cargadores giratorios en todas partes (usa skeleton en su lugar) ❌ Animaciones de entrada dramáticas </animation_system>
<component_patterns>
Patrones de Diseño de Componentes
Tarjetas
// Tarjeta limpia - sin decoración excesiva
<Card className="bg-white border shadow-sm">
<CardContent className="p-4">
{/* Contenido */}
</CardContent>
</Card>
// NO HAGAS: rounded-3xl, sombras pesadas, bordes con degradado
Botones
// Acción principal
<Button>Guardar</Button>
// Acción secundaria
<Button variant="outline">Cancelar</Button>
// Acción destructiva
<Button variant="destructive">Eliminar</Button>
// Botón de icono
<Button variant="ghost" size="icon">
<Settings className="h-4 w-4" />
</Button>
// NO HAGAS: botones con degradado, efectos 3D, iconos en botones primarios (generalmente)
Formularios
// Diseño de formulario limpio
<div className="space-y-4">
<div className="space-y-2">
<Label>Nombre</Label>
<Input placeholder="Introduce el nombre" />
</div>
<div className="space-y-2">
<Label>Correo electrónico</Label>
<Input type="email" placeholder="[email protected]" />
</div>
</div>
// NO HAGAS: etiquetas en línea, etiquetas flotantes (a menos que se soliciten), iconos dentro de inputs
Tablas
// Tabla limpia
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead>Nombre</TableHead>
<TableHead>Estado</TableHead>
<TableHead className="text-right">Acciones</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow className="hover:bg-slate-50">
<TableCell>Juan Pérez</TableCell>
<TableCell><Badge>Activo</Badge></TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm">Editar</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
// NO HAGAS: rayas de cebra (anticuadas), bordes pesados, contenido centrado
</component_patterns>
<anti_patterns_detail>
Señales de Alerta Generadas por IA
El "Aspecto Lovable" (Evitar)
- Púrpura/violeta como color primario
- Fondos con degradado sobre tarjetas blancas
- rounded-3xl en todo
- Emojis en encabezados
- "¡Bienvenido de nuevo, Usuario! 👋"
- Ilustraciones genéricas tipo foto de stock
El "Aspecto Bootstrap" (Evitar)
- Sombras paralelas pronunciadas
- Botones redondeados en forma de píldora
- Enlaces azules en todo
- Mazos de tarjetas con alturas iguales
- Encabezados tipo jumbotron
El "Aspecto Material" (Evitar, a menos que se solicite)
- Botones de acción flotantes
- Tarjetas elevadas en todas partes
- Efectos de ondulación en todo
- Menú hamburguesa en escritorio
Qué Hace que se Vea "Hecho por Humanos"
- Moderación - No todas las funciones están resaltadas
- Jerarquía - Primario, secundario, terciario claros
- Espacio en Blanco - Espacio para respirar
- Consistencia - Mismos patrones repetidos
- Detalles Sutiles - Toques pequeños que no gritan
- Contenido Real - Sin texto de marcador de posición visible </anti_patterns_detail>
<review_checklist>
Lista de Verificación de Revisión de Diseño
Verificación de Color
- Solo UN color de acento utilizado
- Sin degradados sobre fondos blancos
- Sin texto negro puro
- Contraste suficiente para accesibilidad
Verificación Tipográfica
- Máximo 3 tamaños de fuente por componente
- Jerarquía adecuada (títulos semibold, cuerpo regular)
- Sin párrafos en MAYÚSCULAS
- Altura de línea legible (1.5+)
Verificación de Espaciado
- Padding consistente en toda la interfaz
- Suficiente espacio en blanco entre secciones
- El contenido no se siente apretado
- El espaciado móvil es proporcional
Verificación de Animación
- Las transiciones son sutiles (150-300ms)
- Sin efectos de rebote/muelle
- La carga usa skeleton, no spinner
- Los estados hover proporcionan retroalimentación
Verificación de Componentes
- Las tarjetas no tienen decoración excesiva
- Los botones siguen la jerarquía (primario/secundario)
- Los formularios están limpios y ordenados
- Las tablas son legibles e interactivas
Verificación Final
- ¿Sabría un usuario que esto está hecho por IA? (Debería ser NO)
- ¿Parece un producto real? (Debería ser SÍ)
- ¿Es consistente con las aplicaciones SaaS modernas? (Debería ser SÍ) </review_checklist>