# Aurora Design System > Design System Ntizar Aurora v6.1 Constellation — CSS puro, 12 packs opt-in, namespaced .nz, liquid glass interactivo, escenas Three.js reutilizables, azul monocromo (sin mezcla azul→naranja), OKLCH, agent-ready con CDN público. Derivado de Ntizar-Aurora. - Skill: `ntizar/aurora-design-system` (Agent Skill, multi-file: 16 files) - Install (CLI): `npx skillmds@latest add ntizar/aurora-design-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/ntizar/aurora-design-system/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: ntizar (https://skillmd.com/u/ntizar) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/ntizar/aurora-design-system --- # Aurora Design System — Patrón Ntizar CSS ## Descripción Design System CSS puro sin dependencias, sin build step, namespaced bajo `.nz`. 1 archivo core + 10 packs opt-in. 5 skins de marca. Liquid glass real con OKLCH. CDN público en jsDelivr. ## Origen Derivado del repositorio [Ntizar-Aurora](https://github.com/Ntizar/Ntizar-Aurora) v5.1. ## Arquitectura ``` ntizar.css -> core (siempre) ntizar.themes.css -> 5 skins (aurora · sunset · midnight · ocean · citrus) ntizar.data.css -> KPIs, dashboards, progress, meter, skeleton, avatar, timeline ntizar.charts.css -> contenedores para Chart.js/Apex/D3, sparkline + donut CSS-only ntizar.maps.css -> Leaflet/Mapbox/MapLibre con look Ntizar ntizar.viz.css -> stages para three.js, fondos aurora, orbs, glow ring ntizar.motion.css -> reveal, glow-pulse, aurora-pan, shimmer, marquee, typing, hover-lift ntizar.forms.css -> switch, custom check/radio, range, OTP, file drop, stepper, search ntizar.ui.css -> modal, drawer, tabs, accordion, dropdown, toast, tooltip, command-bar ntizar.patterns.css -> app-shell, hero, pricing, features, faq, footer, auth-shell, empty/error ntizar.next.css -> v5: liquid glass real, OKLCH, multi-axis theming, mesh, forced-colors, skin AAA ntizar.three.css -> v6: contenedores .nz-three para escenas Three.js (hero/md/sm/glass-frame/interactive) ntizar.ai.css -> v6.2: primitivas AI-native (loader, thinking, stream, approval, toolchips, taskrow, chat, promptbar, recommend, contextcard, difftable, recordtable, filtertable, sidenav, command, flow, insight, codeblock diff, finetune, selection). Estilo Núcleo limpio, monocromo azul, light por defecto. three-scenes.js -> v6: librería ES de escenas (icosaedro · grafo · particulas · anillos), fallback sin WebGL aurora-live.js -> v6: specular del liquid glass que sigue al cursor (.nz-glass-liquid-live) ``` ## Quick Start ```html ... ``` ## Reglas de Oro 1. **Todo lo público vive bajo `.nz`** — no hay clases globales sueltas 2. **Todos los valores son tokens `--nz-*`** — nunca hardcodes un hex o un `16px` 3. **Sin `!important`** fuera de utilidades 4. **BEM** para componentes: `.nz-card__body--featured` 5. **Si no aparece en `gallery.html`, no existe** — la galería es la única fuente de verdad de la API pública ## Uso con IA Agents (crucial para ahorrar tokens) **NO** pegar el CSS en el prompt (170 KB ≈ 50.000 tokens). **SÍ** hacer: 1. Dar al agent solo `AGENTS.md` + `INDEX.md` (~20 KB / ~5.000 tokens) 2. Linkar el CSS vía CDN en el HTML generado 3. Decir al agent: "Generate HTML only. The CSS is already linked. Use Aurora classes from INDEX.md." ## Drop-in Files para AI Tooling - `AGENTS.md` — estándar abierto para agents (OpenAI, Sourcegraph, Anthropic) - `.github/copilot-instructions.md` — auto-loaded por GitHub Copilot - Para Claude Code: copiar `AGENTS.md` a `CLAUDE.md` - Para Cursor: `.cursor/rules/aurora.mdc` ## Default Usage Policy (Agente — obligatorio) **Aurora es el sistema de diseño por defecto para artefactos visuales generados por el agente.** No se usan CSS custom sueltos, ni estilos inline generales, ni otros frameworks. ### ⚠️ EXCEPCIÓN — Design systems corporativos de equipo (2026-06-25) **Cuando un equipo pide un CSS compartido para unificar el estilo de sus herramientas**, NO usar Aurora. En su lugar, crear un **design system propio** alineado con la marca corporativa del equipo. **Señales de que NO es Aurora:** - "Queremos un CSS que usen todos del equipo" - "Que se parezca al intranet de la empresa" - "Colores de [Empresa]" - Hay un manual de marca oficial con colores propios **Flujo correcto:** Usar `design-system-scaffold` para crear un design system desde cero con los colores oficiales de la marca. Ver también `references/design-system-corporativo-workflow.md` para el Kaizen de Ineco y cómo convertir proyectos existentes. **Ejemplo real:** Equipo Kaizen de Ineco. David pidió un CSS compartido con colores de Ineco. Se creó `kaizen-design-system` con colores oficiales del manual de marca (#1A4488, #CB1823), NO con Aurora. **Aurora es para:** dashboards personales, apps creativas, landings, proyectos donde el estilo visual es flexible. **Design system propio es para:** equipos corporativos, empresas con marca definida, herramientas internas que deben ser coherentes con la identidad corporativa. ### ⚠️ EXCEPCIÓN — Presentaciones corporativas / consulting (2026-06-20) **David rechazó Aurora explícitamente para presentaciones de caso de negocio / propuestas internas.** Pidió "fondo blanco", "elegante", "no parezca hecho por IA". Aurora (mesh, glass, orbs, gradientes) se percibe como "tech/startup" y no como "consulting corporativo". **Cuándo NO usar Aurora:** - Presentaciones de caso de negocio (Kaizen, propuestas) - Informes ejecutivos para stakeholders externos - Roadmaps y planes de inversión - Cualquier cosa con estética McKinsey/BCG **Cuándo SÍ usar Aurora:** - Dashboards interactivos - Apps personales - Landing pages creativas - El usuario pide glass, mesh, dark, aurora explícitamente **Estilo alternativo:** Ver `popular-web-designs/references/consulting-corporate-style.md` para el patrón de fondo blanco, tipografía Inter, tablas limpias, KPI tiles, sin glass/mesh/orbs. ### Reglas de branding para todo artefacto HTML generado 1. **CDN obligatorio** — siempre linkar ntizar.css + ntizar.next.css + packs necesarios desde CDN. Nunca CSS embebido o archivos locales. 2. **Skin por defecto: aurora** — data-nz-skin=aurora (azul #2563eb + naranja #f97316 + liquid glass). Ver ERROR CRÍTICO #10 para el fix del violeta. 3. **Theme por defecto: light** — `data-nz-theme="light"`. David prefiere fondos claros: son más elegantes, mejor legibles y más profesionales. Dark solo si el usuario lo pide explícitamente. 4. **Mobile-first OBLIGATORIO** — toda landing/artefacto debe ser mobile-first, NO desktop-first. Base: 1 columna (≤600px), tablet: 2 columnas (601–900px), desktop: 3+ columnas (901px+). NO usar @media (max-width) como estrategia principal. Responsive no es opcional. 5. **Touch targets mínimo 44px** — en móvil, todos los botones, links, inputs, tabs deben tener min-height: 44px (accesibilidad táctil). 6. **Atribucion exacta** — el footer DEBE poner EXACTAMENTE: `Hecho con ❤️ por David Antizar`. El ❤️ es el emoji de corazón (U+2764), NO `(L)`. Sin variaciones. Sin "Analisis por". Sin "via Mastermind Agent". Sin "via Mastermind". Literal exacto con emoji. 7. **David Antizar es el autor**, Mastermind el agente ejecutor. Esto aplica a HTML, posts, informes, notas. Nunca al reves. 8. **Sin ingles** — todo en castellano: etiquetas, contenido, titulos, atributos ### ⚠️ ESTILO "AURORA LIMPIO" — Diseño moderno, no IA (2026-06-22) **Señal del usuario:** David rechazó el primer HTML demo. Dijo: "el fondo no me gusta nada", "los números son demasiado grandes", "no es suficientemente liquid glass", "todo debería ser más responsive", "mucho más moderno y elegante en blanco naranja y azul sin gradientes raros ni cards típicos de IA". **Lo que NO es Aurora limpio:** - ❌ Fondo gradiente naranja/azul que cubre toda la pantalla - ❌ Orbs decorativos flotantes intrusivos - ❌ Mesh aurora animado intrusivo - ❌ Números gigantes (KPIs de 2.5rem+) - ❌ Cards típicas de IA con gradientes llamativos - ❌ Desktop-first con media queries al final **Lo que SÍ es Aurora limpio (estilo iOS 26 / Apple):** - ✅ **Fondo blanco limpio** (`#ffffff`) con solo toques sutiles de color - ✅ **Liquid glass REAL** con 4 capas: 1. Base translúcida con gradiente sutil (rgba 255,255,255,0.72 → 0.62) 2. `backdrop-filter: blur(24px) saturate(180%)` 3. Dual inset shadow (luz arriba + profundidad abajo) 4. Borde cromático con `::before` (specular highlight) y `::after` (chromatic edge) - ✅ **Números compactos** — KPIs de 1.1–1.25rem, no 2.5rem+ - ✅ **Mobile-first** — base 1 col, tablet 2 col, desktop 3 col - ✅ **Botones estilo iOS** — brand (azul), accent (naranja), glass, ghost - ✅ **Badges pill** — colores sutiles, no saturados - ✅ **Progress bars finas** — 4px de alto, no gruesas - ✅ **Sin gradientes radiales intrusivos** — solo un toque sutil de color en el fondo **Implementación del liquid glass real (4 capas):** ```css .glass-panel { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(241,245,249,0.55) 50%, rgba(255,255,255,0.62) 100%); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.9), inset 0 -1px 0 0 rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03); border: 1px solid rgba(255,255,255,0.6); border-radius: 16px; overflow: hidden; } .glass-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 40%, transparent 60%); pointer-events: none; z-index: 1; } .glass-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 0 20px rgba(37,99,235,0.03), inset 0 0 40px rgba(249,115,22,0.02); pointer-events: none; z-index: 1; } ``` **Ejemplo de referencia:** Ver `demo-aurora-fix.html` en el repo Ntizar-Aurora. ### Verificacion pre-entrega (OBLIGATORIA) Antes de dar por terminado cualquier artefacto HTML, verificar: 1. Footer dice EXACTAMENTE: `Hecho con ❤️ por David Antizar` (emoji real, NO `(L)`) 2. Sin "Analisis", sin "via Mastermind Agent", sin "via", sin variantes 3. body class="nz" presente 4. data-nz-skin="aurora" presente 5. **data-nz-theme="light"** (no dark por defecto) 6. CDN links correctos y funcionales 7. **Mobile-first presente** — base 1 col, tablet 2 col, desktop 3+ col. NO desktop-first con max-width 8. **Touch targets 44px** en móvil para botones, links, inputs, tabs 9. **Glass-liquid REAL** — 4 capas (base, backdrop-filter, dual inset shadow, borde cromático) 10. **Números compactos** — KPIs ≤1.25rem 11. **Fondo blanco limpio** — sin gradientes intrusivos, sin orbs flotantes 12. Sin CSS custom >30 lineas 13. Sin hex hardcodes (usar var(--nz-*)) ### Vinculación con skills pipeline Los skills de pipeline (ej: `pdf-to-artifacts-david-antizar`) consumen Aurora pero NO duplican su configuración. Deben referenciar este skill como pre-requisito y solo añadir lo específico de su flujo. ## Workflow para Agentes (CRÍTICO) ### Pasos obligatorios cuando se pida "usa Aurora" o se genere HTML visual: 1. **CARGAR INDEX.md** del repo Ntizar-Aurora — es la fuente de verdad de la API de clases 2. **USAR SOLO** componentes listados en INDEX.md 3. **CSS custom máximo 30 líneas** — solo para lo específico del artefacto 4. **NUNCA hardcodear hex** — siempre `var(--nz-*)` 5. **SIEMPRE** `body class="nz" data-nz-skin="aurora"` ### ⚠️ ERROR CRÍTICO #1 — CSS custom en vez de Aurora (2026-06-03) Los agentes tienden a **intentar recrear el look de Aurora con CSS custom** en vez de usar los componentes reales. Esto produce HTMLs que "dicen" Aurora pero no lo usan. **Síntomas de fallo:** - Más de 50 líneas de CSS custom `