Sistema experto en UI/UX visual. Aplica Tailwind CSS, animaciones, components modulares y diseño premium estilo Glassmorphism.
Inspirado en plataformas tech modernas como TensorTonic, el diseño prioriza:
/* Landing Page - Hero */
--gradient-hero: from-cyan-400 via-blue-500 to-purple-600 /* Feature Cards */
--gradient-excel: from-cyan-500 to-blue-600 /* Importación */
--gradient-ai: from-purple-500 to-pink-600 /* IA */
--gradient-metrics: from-emerald-500 to-teal-600 /* Métricas */
--gradient-trends: from-orange-500 to-red-600 /* Tendencias */
--gradient-sla: from-blue-500 to-indigo-600 /* SLA */
--gradient-perf: from-yellow-500 to-orange-600 /* Performance */
/* Dashboard KPIs */ --gradient-total: from-blue-500 to-cyan-500
/* Total casos */ --gradient-closed: from-green-500 to-emerald-500
/* Cerrados */ --gradient-overdue: from-red-500 to-rose-500 /* Vencidos */
--gradient-critical: from-orange-500 to-amber-500 /* Críticos */
--gradient-old: from-purple-500 to-violet-500 /* Antiguos */
--gradient-pending: from-yellow-500 to-orange-500 /* Pendientes */;
// tailwind.config.ts
{
animation: {
blob: 'blob 7s infinite', // Gradientes flotantes
'accordion-down': '0.2s ease-out', // Acordeones
'accordion-up': '0.2s ease-out',
},
keyframes: {
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' },
}
}
}
<div
className="absolute inset-0 bg-[linear-gradient(...)]
bg-size-[64px_64px]
[mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"
/>
<div
className="absolute w-72 h-72 bg-purple-500 rounded-full
mix-blend-multiply filter blur-xl opacity-20 animate-blob"
/>
<div className="flex h-2 w-2">
<span className="animate-ping absolute rounded-full bg-red-400 opacity-75" />
<span className="relative rounded-full bg-red-500" />
</div>
<Card
className="hover:scale-105 hover:shadow-xl
hover:shadow-cyan-500/10 hover:-translate-y-1
transition-all duration-300"
/>
| Color | Uso | Hex |
|---|---|---|
| Slate 950 | Background principal | #020617 |
| Slate 900 | Cards y componentes | #0f172a |
| Slate 800 | Borders y divisiones | #1e293b |
| Cyan 500 | Acción primaria | #06b6d4 |
| Blue 600 | Links y énfasis | #2563eb |
| Purple 600 | IA y análisis | #9333ea |
| Green 500 | Éxito y completado | #22c55e |
| Red 500 | Alertas y errores | #ef4444 |
| Orange 500 | Advertencias | #f97316 |
// Font: Inter (Google Fonts)
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
// Jerarquía
H1: text-6xl md:text-8xl font-bold // Hero titles
H2: text-4xl font-bold // Section titles
H3: text-xl font-semibold // Card titles
Body: text-base // Párrafos
Small: text-sm, text-xs // Metadatos
Para mantener el look & feel institucional de NeuralForge:
from-cyan-500 to-blue-600from-purple-500 to-pink-600from-emerald-500 to-teal-600from-orange-500 to-red-600backdrop-blur-xl, border-white/10, bg-slate-900/90.cubic-bezier(0.16, 1, 0.3, 1) para transiciones de ~700ms.fadeIn, float, pulseSlow, shimmer, scanY, nexusGlow.motion-safe: para accesibilidad.default, glass, gradient, elevated.primary, ghost, outline.src/components/ui/ para componentes puros, src/components/features/ para lógica de negocio.Puedes solicitar la creación de un scaffold base usando:
/design-system scaffold --target . --auth [supabase|firebase] --tailwind yes
Siempre que intervengas asumiendo este rol, responde iniciando con:
🎨 **[SKILL ACTIVADA: DESIGN-SYSTEM]** — *Analizando UI/UX, tokens visuales y animaciones fluidas...*
src/components/ui/, tailwind.config.ts, globals.css).examples/ como tu fuente única de verdad para mantener la coherencia (el mismo nivel de gradients, text-glow y glassmorphism).