aurora-design-system
Design System Ntizar Aurora v5.1 Constellation — CSS puro, 11 packs opt-in, namespaced .nz, 5 skins, liquid glass real, OKLCH, multi-axis theming, agent-ready con CDN público. Derivado de Ntizar-Aurora.
Informations de source
- Dépôt
- Ntizar/NtizarBrainMasterMind
- Dernière activité de la source
- 26 juin 2026 à 12:05
- Langue détectée de SKILL.md
- espagnol
- Étoiles
- 2
- Forks
- 0
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Explorateur de fichiers
9 fichiersAffichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- aurora-design-system
- description
- Design System Ntizar Aurora v5.1 Constellation — CSS puro, 11 packs opt-in, namespaced .nz, 5 skins, liquid glass real, OKLCH, multi-axis theming, agent-ready con CDN público. Derivado de Ntizar-Aurora.
- version
- 5.1.1
- tags
- ["css","design-system","aurora","liquid-glass","ntizar"]
# 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
```
## Quick Start
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.next.css">
<body class="nz"
data-nz-theme="light"
data-nz-skin="aurora"
data-nz-shape="default"
data-nz-density="comfortable"
data-nz-motion="standard"
data-nz-color-system="oklch">
...
</body>
```
## 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 `<style>`
- Clases inventadas (`.step`, `.arrow`, `.decision`, etc.)
- Hex hardcodes (`#0f172a`, `#2563eb`, `#f97316`)
- Sin `body class="nz"`
- Sin `data-nz-skin="aurora"`
- Sin `nz-card`, `nz-glass`, `nz-badge`, etc.
**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.
### ⚠️ PREFERENCE — Glass borders como "look de IA" (2026-06-20)
**Señal del usuario:** David rechazó explícitamente cards con bordes glass-liquid visibles (la línea decorativa superior de `nz-card--glass-liquid`). Dijo: "La línea esa en las cards, no me gusta nada. Parece hecho por IA."
**Matiz importante:** David NO rechaza glass en general. Le gustan las cards con profundidad, sombra sutil y backdrop-filter. Lo que rechaza es el **borde decorativo superior** (la línea glass brillante que algunos templates ponen arriba de la card). Es un patrón que se ha vuelto icónico de diseños "AI-generated" (lo mismo ocurre con gradientes neón exagerados, mesh backgrounds con muchas orbs, y horizontal lines decoratives).
**Regla práctica:**
- ✅ `backdrop-filter: blur()` + sombra sutil + bg semitransparente = **elegante**
- ❌ Bordes glass visibles arriba de la card = **"parece hecho por IA"**
- ✅ Usar `nz-card--glass-liquid` pero **sin** la línea decorativa de borde superior si el contexto es presentación ejecutiva o algo que se entrega a stakeholders
- ❌ Evitar horizontal lines decorativas entre secciones en presentaciones (David las rechazó directamente)
- ❌ Evitar elementos que se repitan en cada card (badges decorativos, líneas de color repetitivas) — David los asocia con "AI aesthetic"
**Contexto:** En presentaciones Kaizen/Ineco (v1.0→v2.0→v3.0), la evolución fue: dark mode con glass borders (rechazado) → light mode Aurora con glass borders (rechazado) → light mode Aurora sin glass borders visibles (aceptado con entusiasmo). El factor decisivo fue QUITAR las líneas glass decorativas, no el tema ni los componentes.
**Aplicación general:** Cuando el output es para un stakeholder externo (presentación empresa, informe cliente, landing profesional) → glass sutil sin bordes decorativos. Cuando es interno (dashboard propio, app personal) → glass-liquid completo con borders está OK.
### ⚠️ 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
- Inline styles con hex/px → no usar tokens `--nz-*`
- Clases custom inventadas (`mf-*`, `ia-*`) → usar Aurora
**Checklist ANTES de entregar cualquier artefacto visual:**
Voir sur GitHubCe SKILL.md est tres volumineux, SkillsMP affiche donc ici seulement la premiere section. Voir sur GitHub
