# Design Systems Ecosystem

> Ecosistema completo de design systems CSS: creación desde cero (scaffold), estilos corporativos flat (Kaizen), glassmorphism liquid (Aurora/Esios), y optimización para LLMs. Incluye Aurora Constellation v5.1, Kaizen v4.0, y patrones de extensión.

- Skill: `ntizar/design-systems-ecosystem` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add ntizar/design-systems-ecosystem`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ntizar/design-systems-ecosystem/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ntizar (https://skillmd.com/u/ntizar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ntizar/design-systems-ecosystem

---


# Design Systems Ecosystem — Ecosistema de Design Systems CSS

## Resumen

Colección de skills para crear, extender y usar design systems CSS en proyectos personales, corporativos y creativos.

## 1. Design System Scaffold (creación desde cero)

Procedimiento completo para crear un design system CSS desde una imagen de referencia:
- Extraer colores de manual de marca PDF o screenshot
- Definir tokens CSS con variables `:root`
- Crear componentes: app shell, cards, tiles, buttons, forms, tables, badges
- Crear index.html galería + index-standalone.html (CSS embebido)
- Crear AGENTS.md para IAs (~8-12KB) + README.md
- Crear repo GitHub + push + CDN jsDelivr

**Reglas críticas:**
- NUNCA cards bordeadas (delata IA) — usar títulos sección + línea 2px + tiles limpios
- Evolucionar DS antes de aplicar — auditar → extender → commit → aplicar
- CDN solo funciona con repos públicos — privados → copiar CSS localmente
- NUNCA usar `read_file()` para copiar contenido CSS/HTML (añade números de línea)

## 2. Kaizen Design System v4.0 (corporativo flat)

CSS corporativo para equipos con colores oficiales de marca. Estilo plano, sin glass, sin gradientes.
- **Colores:** Azul #1A4488, Rojo #CB1823 (Ineco)
- **Prefijo:** `--kz-*` y clases `kz-*`
- **33 secciones:** layout, sidebar, tiles, KPIs, buttons, forms, tables, badges, tabs, notices
- **Sidebar:** `position: fixed` — requiere `margin-left` en contenido o ambos `position:fixed`
- **Responsive:** NO incluido — implementar en CSS custom del proyecto

**Cuándo usar Kaizen vs Aurora:**
- Kaizen: equipos, intranets, colores corporativos oficiales, estilo enterprise
- Aurora: dashboards personales, apps creativas, glass, mesh, dark

## 3. Liquid Glass CSS (glassmorphism)

Efecto Liquid Glass estilo Esios/Aurora — gradientes azul+naranja, backdrop-filter glass, grid patterns.
- **Variables:** `--nz-color-brand: #2563eb`, `--nz-color-accent: #f97316`
- **Glass REAL (4 capas):** base translúcida + saturate backdrop + dual inset shadow + borde cromático
- **Glass genérico ❌:** solo rgba + blur = sin profundidad ni reflejos
- **David prefiere:** tema claro, elegancia > llamatividad, animaciones mínimas
- **Migración Dark→Light:** 7 pasos de inversión de variables

## 4. Aurora Constellation v5.1 (sistema de diseño Ntizar)

CSS-only design system con 11 packs modulares + liquid glass real + OKLCH.
- **Core:** ntizar.css (≈40KB) — tokens, base, objects, componentes, utilities
- **Packs opcionales:** themes, data, charts, maps, viz, motion, forms, ui, patterns, next
- **6 skins:** aurora (default), sunset, midnight, ocean, citrus, contrast (WCAG AAA)
- **Multi-axis theming:** theme, skin, shape, density, motion, color-system via data-*
- **Liquid Glass Real (v5):** specular highlight + chromatic edge + dual inset shadow
- **CSS Houdini @property:** declaraciones FUERA de @layer, reglas DENTRO de @layer
- **Agent-Ready:** dar AGENTS.md + INDEX.md (~5KB) en vez de pegar CSS (170KB ≈ 50K tokens)

### 11 Packs
| Archivo | Contenido | Cargar cuando |
|---------|-----------|---------------|
| ntizar.css | Core (~40KB): tokens, base, objects, componentes | Siempre |
| ntizar.themes.css | 5 skins + paleta charts | Cambiar identidad |
| ntizar.data.css | KPIs, stat-tile, progress, meter, skeletons | Dashboards |
| ntizar.charts.css | nz-chart, legends, tooltips, sparkline | Gráficos |
| ntizar.maps.css | nz-map para Leaflet/Mapbox, overlays HUD | Mapas |
| ntizar.viz.css | Stages full-bleed, aurora orbs, glow rings | 3D/generative |
| ntizar.motion.css | reveal/rise/scale/glow animations | Animaciones |
| ntizar.forms.css | Switch, OTP, file drop, stepper | Formularios |
| ntizar.ui.css | Modal, drawer, tabs, accordion, toast | Overlays |
| ntizar.patterns.css | App-shell, hero, pricing, FAQ, footer | Páginas completas |
| ntizar.next.css | v5: Liquid Glass, OKLCH, multi-axis, mesh | Capa disruptiva |

## 5. Aurora Nightly (mejora continua)

Pipeline automático de mejora continua: 4 jobs nocturnos que investigan tendencias web, analizan gaps y aplican mejoras CSS focalizadas.
- **Schedule:** 01:00-04:00 UTC diarios
- **Workflow:** investigación → análisis gap → 3 mejoras CSS → commit → reaprendizaje
- **Repo:** `/root/workspace/Ntizar-Aurora`

## 6. Aurora LLM Optimization

Optimizar un design system EXISTENTE para consumo por LLMs (reducir tokens, mejorar estructura).

## Pitfalls comunes

- **CDN jsDelivr solo funciona con repos públicos** — privados → 404 silencioso → copiar CSS localmente
- **Sidebar position: fixed** — requiere margin-left en contenido o ambos position:fixed
- **read_file() corrompe CSS** — añade números de línea → usar `open().read()` en Python
- **Glass genérico ≠ Liquid Glass REAL** — el glass genérico es solo blur sin profundidad
- **No mezclar design systems** — Aurora (personal/creativo) vs Kaizen (corporativo/equipo)
- **No sobreingenierizar** — el usuario corrige si tiendes a sobreingenierizar. Preferir simplificar.

## Referencias
- `references/componentes-data-tools.md` — Checklist de 10 componentes que faltan en DS corporativos
- `references/pdf-brand-manual-extraction.md` — Extraer colores de manual de marca PDF
- `references/css-houdini-property-pattern.md` — Patrón CSS Houdini @property
- `references/css-only-dropdown-has-pattern.md` — Patrón dropdown CSS-only con :has()
- `references/ntizar-projects-patterns.md` — Patrones de 6 proyectos Ntizar