// Directrices de diseño visual para crear interfaces distintivas y profesionales. Usar cuando necesites mejorar la estética de componentes o páginas.
Stack de desarrollo web profesional React+Vite+Tailwind+shadcn. Usar cuando el usuario quiera crear páginas web, apps, o componentes UI.
Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page.
| 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 |
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 |
/* 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;
}
No uses paletas tímidas. Define:
/* 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 */
}
// 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>
En carga inicial:
En interacción:
// 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>
No uses fondos planos. Añade:
/* 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;
}
border border-border/50// 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>