claudable-design

name: claudable-design description: Directrices de diseño visual para crear interfaces distintivas y profesionales. Usar cuando necesites mejorar la estética de componentes o páginas. invoke: auto

Principios de Diseño Distintivo

1. Tipografía con Personalidad

EVITAR: Inter, Arial, Roboto, Helvetica, system fonts PREFERIR: Fuentes con carácter que refuercen la marca

/* Ejemplo de configuración */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

2. Colores con Impacto

No uses paletas tímidas. Define:

• Un color dominante que identifique la marca
• Un acento contrastante para CTAs y highlights
• Neutrales con personalidad (no grises puros)

/* Ejemplo: Paleta con personalidad */
:root {
  --primary: 262 83% 58%;      /* Violeta vibrante */
  --accent: 43 96% 56%;        /* Amarillo dorado */
  --background: 240 10% 3.9%;  /* Negro con tinte azul */
  --foreground: 0 0% 98%;      /* Blanco cálido */
  --muted: 240 5% 15%;         /* Gris con personalidad */
}

3. Composición Espacial Audaz

• Asimetría intencional - No todo centrado
• Escala dramática - Headlines XXL, contrastes de tamaño
• Espacio negativo - Deja respirar el diseño
• Romper la grilla - Elementos que sobresalen

// Ejemplo de composición audaz
<section className="relative min-h-screen">
  <h1 className="text-[clamp(3rem,10vw,8rem)] font-bold leading-none">
    Diseño que<br />
    <span className="text-accent">impacta</span>
  </h1>
  <p className="absolute bottom-12 right-12 max-w-xs text-muted-foreground">
    Pequeño texto contrastando con el headline masivo
  </p>
</section>

4. Animaciones de Impacto

En carga inicial:

• Reveals escalonados (stagger)
• Fade + slide desde direcciones diferentes
• Clip-path reveals

En interacción:

• Hover states con movimiento
• Transiciones suaves (300-500ms)
• Micro-interacciones en botones

// Ejemplo con Motion
import { motion } from "motion/react"

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  Contenido animado
</motion.div>

5. Fondos Atmosféricos

No uses fondos planos. Añade:

• Gradients sutiles - Mesh gradients, radiales
• Noise/grain - Textura sutil
• Blobs/shapes - Formas abstractas de fondo
• Grid lines - Líneas estructurales decorativas

/* Gradient mesh con noise */
.hero-bg {
  background:
    radial-gradient(ellipse at 20% 50%, hsl(var(--primary) / 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, hsl(var(--accent) / 0.1) 0%, transparent 50%),
    hsl(var(--background));
}

/* Añadir noise con pseudo-elemento */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

6. Detalles que Elevan

• Bordes sutiles - border border-border/50
• Sombras con color - No negro puro
• Glassmorphism selectivo - Solo donde tenga sentido
• Iconografía consistente - Lucide icons

// Card con detalles premium
<div className="relative rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm p-8 shadow-xl shadow-primary/5">
  {/* Highlight sutil en el borde superior */}
  <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />

  {/* Contenido */}
</div>

Anti-Patterns a Evitar

1. Diseño genérico - Si parece un template, es malo
2. Colores apagados - No tengas miedo del color
3. Todo centrado - Usa alineaciones variadas
4. Espaciado uniforme - Varía para crear ritmo
5. Tipografía monótona - Mezcla pesos y tamaños
6. Fondos planos - Siempre añade algo de textura
7. Animaciones idénticas - Varía timing y dirección