메뉴
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.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/Ntizar/MasterMind --skill aurora-design-system명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
Restore Hermes from a backup repo or migrate machines.
Usa al analizar ADN crudo: ascendencia, rasgos, sexo.
Usar al operar Mastermind en Windows: repo, ChromaDB, crons, gateway Telegram (colapso por token revocado y su restauración), backups y monitorización.
| name | aurora-design-system |
| description | 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. |
| version | 6.1.0 |
| tags | ["css","design-system","aurora","liquid-glass","ntizar"] |
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.
Derivado del repositorio Ntizar-Aurora v5.1.
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)
<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>
.nz — no hay clases globales sueltas--nz-* — nunca hardcodes un hex o un 16px!important fuera de utilidades.nz-card__body--featuredgallery.html, no existe — la galería es la única fuente de verdad de la API públicaNO pegar el CSS en el prompt (170 KB ≈ 50.000 tokens).
SÍ hacer:
AGENTS.md + INDEX.md (~20 KB / ~5.000 tokens)AGENTS.md — estándar abierto para agents (OpenAI, Sourcegraph, Anthropic).github/copilot-instructions.md — auto-loaded por GitHub CopilotAGENTS.md a CLAUDE.md.cursor/rules/aurora.mdcAurora 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.
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:
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.
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:
Cuándo SÍ usar Aurora:
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.
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.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.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:
Lo que SÍ es Aurora limpio (estilo iOS 26 / Apple):
#ffffff) con solo toques sutiles de colorbackdrop-filter: blur(24px) saturate(180%)::before (specular highlight) y ::after (chromatic edge)Implementación del liquid glass real (4 capas):
.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.
Antes de dar por terminado cualquier artefacto HTML, verificar:
Hecho con ❤️ por David Antizar (emoji real, NO (L))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.
var(--nz-*)body class="nz" data-nz-skin="aurora"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:
<style>.step, .arrow, .decision, etc.)#0f172a, #2563eb, #f97316)body class="nz"data-nz-skin="aurora"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.
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 profundidadnz-btn--primary en vez de nz-btn--glass-liquid-brand → botón genériconz-aurora-mesh--animated → fondo blanco sin vidanz-orb → nada de decoración atmosféricanz-anim-fade-in → todo aparece de golpe sin transiciónnz-hover-lift → cards sin interacción visualu-nz-text-brand en el titular → título sin acento (NOTA: nz-gradient-text NO existe, nunca la uses)nz-kpi sin --accent → tiles planosnz-chart sin --glass → gráficos en cajas blancasnz-surface sin --glass* → superficies opacasCausa 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.
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 = elegantenz-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 stakeholdersContexto: 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.
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: