| 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
| Tipo | Opciones recomendadas |
|---|
| Display/Headlines | Clash Display, Cabinet Grotesk, Satoshi, Space Grotesk, Outfit |
| Body refinado | DM Sans, Plus Jakarta Sans, Manrope, Nunito Sans |
| Serif elegante | Playfair Display, Fraunces, Libre Baskerville |
| Monospace moderno | JetBrains Mono, Fira Code, IBM Plex Mono |
@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)
:root {
--primary: 262 83% 58%;
--accent: 43 96% 56%;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 5% 15%;
}
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
<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
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
.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));
}
.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
<div className="relative rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm p-8 shadow-xl shadow-primary/5">
{}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
{}
</div>
Anti-Patterns a Evitar
- Diseño genérico - Si parece un template, es malo
- Colores apagados - No tengas miedo del color
- Todo centrado - Usa alineaciones variadas
- Espaciado uniforme - Varía para crear ritmo
- Tipografía monótona - Mezcla pesos y tamaños
- Fondos planos - Siempre añade algo de textura
- Animaciones idénticas - Varía timing y dirección