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 corporativosreferences/pdf-brand-manual-extraction.md — Extraer colores de manual de marca PDFreferences/css-houdini-property-pattern.md — Patrón CSS Houdini @propertyreferences/css-only-dropdown-has-pattern.md — Patrón dropdown CSS-only con :has()references/ntizar-projects-patterns.md — Patrones de 6 proyectos Ntizar
1---2name: design-systems-ecosystem3description: 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.4---56# Design Systems Ecosystem — Ecosistema de Design Systems CSS78## Resumen910Colección de skills para crear, extender y usar design systems CSS en proyectos personales, corporativos y creativos.1112## 1. Design System Scaffold (creación desde cero)1314Procedimiento completo para crear un design system CSS desde una imagen de referencia:15- Extraer colores de manual de marca PDF o screenshot16- Definir tokens CSS con variables `:root`17- Crear componentes: app shell, cards, tiles, buttons, forms, tables, badges18- Crear index.html galería + index-standalone.html (CSS embebido)19- Crear AGENTS.md para IAs (~8-12KB) + README.md20- Crear repo GitHub + push + CDN jsDelivr2122**Reglas críticas:**23- NUNCA cards bordeadas (delata IA) — usar títulos sección + línea 2px + tiles limpios24- Evolucionar DS antes de aplicar — auditar → extender → commit → aplicar25- CDN solo funciona con repos públicos — privados → copiar CSS localmente26- NUNCA usar `read_file()` para copiar contenido CSS/HTML (añade números de línea)2728## 2. Kaizen Design System v4.0 (corporativo flat)2930CSS corporativo para equipos con colores oficiales de marca. Estilo plano, sin glass, sin gradientes.31- **Colores:** Azul #1A4488, Rojo #CB1823 (Ineco)32- **Prefijo:** `--kz-*` y clases `kz-*`33- **33 secciones:** layout, sidebar, tiles, KPIs, buttons, forms, tables, badges, tabs, notices34- **Sidebar:** `position: fixed` — requiere `margin-left` en contenido o ambos `position:fixed`35- **Responsive:** NO incluido — implementar en CSS custom del proyecto3637**Cuándo usar Kaizen vs Aurora:**38- Kaizen: equipos, intranets, colores corporativos oficiales, estilo enterprise39- Aurora: dashboards personales, apps creativas, glass, mesh, dark4041## 3. Liquid Glass CSS (glassmorphism)4243Efecto Liquid Glass estilo Esios/Aurora — gradientes azul+naranja, backdrop-filter glass, grid patterns.44- **Variables:** `--nz-color-brand: #2563eb`, `--nz-color-accent: #f97316`45- **Glass REAL (4 capas):** base translúcida + saturate backdrop + dual inset shadow + borde cromático46- **Glass genérico ❌:** solo rgba + blur = sin profundidad ni reflejos47- **David prefiere:** tema claro, elegancia > llamatividad, animaciones mínimas48- **Migración Dark→Light:** 7 pasos de inversión de variables4950## 4. Aurora Constellation v5.1 (sistema de diseño Ntizar)5152CSS-only design system con 11 packs modulares + liquid glass real + OKLCH.53- **Core:** ntizar.css (≈40KB) — tokens, base, objects, componentes, utilities54- **Packs opcionales:** themes, data, charts, maps, viz, motion, forms, ui, patterns, next55- **6 skins:** aurora (default), sunset, midnight, ocean, citrus, contrast (WCAG AAA)56- **Multi-axis theming:** theme, skin, shape, density, motion, color-system via data-*57- **Liquid Glass Real (v5):** specular highlight + chromatic edge + dual inset shadow58- **CSS Houdini @property:** declaraciones FUERA de @layer, reglas DENTRO de @layer59- **Agent-Ready:** dar AGENTS.md + INDEX.md (~5KB) en vez de pegar CSS (170KB ≈ 50K tokens)6061### 11 Packs62| Archivo | Contenido | Cargar cuando |63|---------|-----------|---------------|64| ntizar.css | Core (~40KB): tokens, base, objects, componentes | Siempre |65| ntizar.themes.css | 5 skins + paleta charts | Cambiar identidad |66| ntizar.data.css | KPIs, stat-tile, progress, meter, skeletons | Dashboards |67| ntizar.charts.css | nz-chart, legends, tooltips, sparkline | Gráficos |68| ntizar.maps.css | nz-map para Leaflet/Mapbox, overlays HUD | Mapas |69| ntizar.viz.css | Stages full-bleed, aurora orbs, glow rings | 3D/generative |70| ntizar.motion.css | reveal/rise/scale/glow animations | Animaciones |71| ntizar.forms.css | Switch, OTP, file drop, stepper | Formularios |72| ntizar.ui.css | Modal, drawer, tabs, accordion, toast | Overlays |73| ntizar.patterns.css | App-shell, hero, pricing, FAQ, footer | Páginas completas |74| ntizar.next.css | v5: Liquid Glass, OKLCH, multi-axis, mesh | Capa disruptiva |7576## 5. Aurora Nightly (mejora continua)7778Pipeline automático de mejora continua: 4 jobs nocturnos que investigan tendencias web, analizan gaps y aplican mejoras CSS focalizadas.79- **Schedule:** 01:00-04:00 UTC diarios80- **Workflow:** investigación → análisis gap → 3 mejoras CSS → commit → reaprendizaje81- **Repo:** `/root/workspace/Ntizar-Aurora`8283## 6. Aurora LLM Optimization8485Optimizar un design system EXISTENTE para consumo por LLMs (reducir tokens, mejorar estructura).8687## Pitfalls comunes8889- **CDN jsDelivr solo funciona con repos públicos** — privados → 404 silencioso → copiar CSS localmente90- **Sidebar position: fixed** — requiere margin-left en contenido o ambos position:fixed91- **read_file() corrompe CSS** — añade números de línea → usar `open().read()` en Python92- **Glass genérico ≠ Liquid Glass REAL** — el glass genérico es solo blur sin profundidad93- **No mezclar design systems** — Aurora (personal/creativo) vs Kaizen (corporativo/equipo)94- **No sobreingenierizar** — el usuario corrige si tiendes a sobreingenierizar. Preferir simplificar.9596## Referencias97- `references/componentes-data-tools.md` — Checklist de 10 componentes que faltan en DS corporativos98- `references/pdf-brand-manual-extraction.md` — Extraer colores de manual de marca PDF99- `references/css-houdini-property-pattern.md` — Patrón CSS Houdini @property100- `references/css-only-dropdown-has-pattern.md` — Patrón dropdown CSS-only con :has()101- `references/ntizar-projects-patterns.md` — Patrones de 6 proyectos Ntizar
ntizar