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.
Todo lo público vive bajo .nz — no hay clases globales sueltas
Todos los valores son tokens --nz-* — nunca hardcodes un hex o un 16px
Sin !important fuera de utilidades
BEM para componentes: .nz-card__body--featured
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:
Dar al agent solo AGENTS.md + INDEX.md (~20 KB / ~5.000 tokens)
Linkar el CSS vía CDN en el HTML generado
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 ÚNICO sistema de diseño aceptable para artefactos visuales generados por el agente. No se usan CSS custom sueltos, ni estilos inline generales, ni otros frameworks.
Reglas de branding para todo artefacto HTML generado
CDN obligatorio — siempre linkar ntizar.css + ntizar.next.css + packs necesarios desde CDN. Nunca CSS embebido o archivos locales.
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.
Responsive SIEMPRE — toda landing/artefacto debe incluir media queries para móvil (<768px). Grids deben adaptar columnas (2 col → 1 col), nav debe tener hamburger, tablas scroll horizontal. Responsive no es opcional.
Atribucion exacta — el footer DEBE poner EXACTAMENTE: Hecho con (L) por David Antizar. Sin variaciones. Sin "Analisis por". Sin "via Mastermind Agent". Sin "via Mastermind". Literal exacto.
David Antizar es el autor, Mastermind el agente ejecutor. Esto aplica a HTML, posts, informes, notas. Nunca al reves.
Sin ingles — todo en castellano: etiquetas, contenido, titulos, atributos
Verificacion pre-entrega (OBLIGATORIA)
Antes de dar por terminado cualquier artefacto HTML, verificar:
Footer dice EXACTAMENTE: Hecho con (L) por David Antizar
Sin "Analisis", sin "via Mastermind Agent", sin "via", sin variantes
body class="nz" presente
data-nz-skin="aurora" presente
data-nz-theme="light" (no dark por defecto)
CDN links correctos y funcionales
Responsive CSS presente — media queries, grids adaptables, hamburger nav
Sin CSS custom >30 lineas
Sin hex hardcodes (usar var(--nz-*))
Glass-liquid check: Cards usan nz-card--glass-liquid, botones usan --glass-liquid-*, fondo tiene nz-aurora-mesh--animated, hay al menos 1 nz-orb, hay nz-anim-fade-in en secciones principales. Si alguna de estas falta → corregir antes de entregar.
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:
CARGAR INDEX.md del repo Ntizar-Aurora — es la fuente de verdad de la API de clases
CARGAR CHEATSHEET.md — resumen de las 321 clases extraídas de gallery.html
USAR SOLO componentes listados en INDEX.md/CHEATSHEET.md
CSS custom máximo 30 líneas — solo para lo específico del artefacto
NUNCA hardcodear hex — siempre var(--nz-c-*)
SIEMPREbody 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.
Causa raíz: No cargar INDEX.md ni CHEATSHEET.md como referencia.
Solución: Cargar INDEX.md (fuente de verdad) y CHEATSHEET.md (resumen rápido) ANTES de generar cualquier HTML. Usar SOLO componentes listados.
⚠️ ERROR CRÍTICO #2 — "Aurora flat" en vez de glass-liquid (2026-06-11)
Incluso cuando el agent SÍ usa clases Aurora, tiende a elegir las variantes planas/básicas (nz-card, nz-btn--primary) en vez de las glass-liquid que dan el look premium. David lo describió como "puro croissant" — funcional pero sin alma.
Síntomas de fallo:
nz-card sin variante glass → card blanca plana, sin profundidad
nz-btn--primary en vez de nz-btn--glass-liquid-brand → botón genérico
Sin nz-aurora-mesh--animated → fondo blanco sin vida
Sin nz-orb → nada de decoración atmosférica
Sin nz-anim-fade-in → todo aparece de golpe sin transición
Sin nz-hover-lift → cards sin interacción visual
Sin nz-gradient-text → títulos sin personalidad
nz-kpi sin --accent → tiles planos
nz-chart sin --glass → gráficos en cajas blancas
nz-surface sin --glass* → superficies opacas
Causa raíz: El agent elige la primera variante que encuentra en el CHEATSHEET en vez de la variante visualmente rica. Falta una guía de "qué variante usar según el contexto visual".
Solución: Para dashboards, apps, landings y cualquier artefacto visual → SIEMPRE preferir las variantes glass-liquid y animadas. Ver tabla rápida abajo.
⚠️ ERROR CRÍTICO #3 — Usar Aurora al 40% (2026-06-13)
El agent usa los componentes básicos de Aurora (cards glass, botones glass, mesh) pero ignora 20+ componentes disponibles que dan el look disruptivo y profesional.
Síntomas de fallo:
Gráficos sin nz-chart--glass → gráficos en cajas blancas
Barras de progreso custom → no usar nz-progress
Navegación de tabs custom → no usar nz-nav--glass
Layouts de KPIs planos → no usar nz-bento-grid
Formularios con grid inline → no usar nz-form-grid
Listas con divs → no usar nz-table
Modal custom → no usar nz-modal
nz-btn--glass-liquid-secondary → clase que NO existe en Aurora
Sin clases inventadas (nz-btn--glass-liquid-secondary NO EXISTE)
Sin inline styles con hex/px (usar --nz-* tokens)
Mínimo 100 clases Aurora únicas (no 70)
Causa raíz: El agent se queda en lo básico y no explora todos los componentes del sistema.
Solución: Cargar INDEX.md completo, recorrer TODOS los componentes, y verificar el checklist antes de entregar.
⚠️ ERROR CRÍTICO #3 — "Aurora al 40%" — usar solo lo básico y olvidar el resto (2026-06-13)
El agent carga la skill de Aurora, usa cards glass + botones glass + mesh, y se detiene ahí. Deja en el tintero TODO lo que viene después: componentes de datos, layouts avanzados, formularios, modales, progress, charts, skeletons. El resultado es un dashboard que "dice" Aurora pero se queda en la superficie.
Síntomas de fallo:
Solo usa nz-card, nz-btn, nz-aurora-mesh, nz-orb (los 4 más obvios)
NO usa nz-chart--glass, nz-progress, nz-meter, nz-surface, nz-bento-grid, nz-hero, nz-stack, nz-table, nz-modal, nz-skeleton, nz-kpi--accent
100+ líneas de CSS custom en vez de tokens Aurora
150+ inline styles con hex/px hardcode en vez de var(--nz-*)
Clases inventadas que no existen en Aurora (nz-btn--glass-liquid-secondary)
Causa raíz: El agent confunde "usar Aurora" con "usar los componentes más visibles de Aurora". No hace un inventory completo de qué componentes de INDEX.md podrían aplicarse al artefacto.
Solución — Checklist post-diseño OBLIGATORIA:
Antes de entregar cualquier artefacto visual, verificar CADA categoría:
Categoría
¿Usado?
Componente correcto
Cards
✅
nz-card--glass-liquid
Botones
✅
nz-btn--glass-liquid-brand (NO inventar)
Fondo
✅
nz-aurora-mesh--animated + nz-orb
KPIs
❌
nz-kpi--accent (NO nz-kpi plano)
Gráficos
❌
nz-chart--glass (NO divs custom)
Progreso
❌
nz-progress, nz-meter
Superficies
❌
nz-surface--glass (NO divs con estilos)
Layouts
❌
nz-bento-grid, nz-stack, nz-hero
Tablas
❌
nz-table
Modales
❌
nz-modal (NO divs custom)
Loading
❌
nz-skeleton
Animaciones
✅
nz-anim-fade-in, nz-hover-lift
Tipografía
✅
nz-gradient-text
Regla de oro: Si un artefacto tiene más de 3 categorías vacías → NO está usando Aurora correctamente. Revisar INDEX.md y reemplazar componentes custom por los de Aurora.
⚠️ ERROR CRÍTICO #5 — Dark mode con body.mf-dark en vez de data-nz-theme (2026-06-13)
Cuando se migra un proyecto existente que usa dark mode con body.mf-dark o body.dark, el agent tiende a mantener ese patrón en vez de usar el sistema de temas de Aurora.
Síntomas de fallo:
body.classList.toggle('mf-dark') en JS
body.mf-dark .nz-* en CSS (30+ líneas de overrides con !important)
body.classList.contains('mf-dark') para detectar tema
