SHELEG Design

¿Qué hace SHELEG Design?

Resumen

Una página se siente cinematográfica no por muchas animaciones, sino por una única fuente de verdad (posición de desplazamiento medida) que impulsa muchas respuestas económicas, en capas, degradables de forma independiente. Centraliza el desplazamiento en un solo almacén; las capas lo leen por fotograma y reaccionan en su propio lenguaje. Nada se desvanece — las cosas se redeployan. Cada capa se degrada a un estado estático y calmado.

REFERENCIA OBLIGATORIA — para la ruta cinematográfica: lee SHELEG_DESIGN.md antes de implementar una página impulsada por desplazamiento — arquitectura, matemáticas de morph, el puente DOM↔WebGL, la receta de construcción (§11), el mapa de archivos. El trabajo de UI de producto no debe esta lectura; la única regla que debería se repite aquí: cuando los tokens de movimiento de un paquete difieren de los valores predeterminados de SHELEG, el paquete gana.

OBLIGATORIO ANTES DE CUALQUIER ANIMACIÓN: lee MOTION_DOCTRINE.md. SHELEG_DESIGN.md dice cómo se construye el movimiento; la doctrina dice si construirlo — la tabla de frecuencias que mata la animación en rutas de alta repetición, el árbol de easing y la prohibición de ease-in, el límite de duración, las formas prohibidas y el contrato de movimiento reducido.

Cuándo usarlo

• Páginas de aterrizaje/marketing/hero donde el movimiento es un objetivo declarado; fondos de partículas o WebGL vinculados al desplazamiento; gráficos vinculados al desplazamiento, flujos de pasos, rieles, parallax
• Un sitio con desplazamiento existente que se siente nervioso, entrecortado o fuera de fase
• UI de producto que necesita un sistema visual bloqueado — dashboards, administración, herramientas internas/de desarrollo, tokens, claro/oscuro — solo paquete de estilo, a través de workbench
• Superficies de producto de IA: UI de chat y agente, salida en streaming, registros de ejecución, errores de modelo, estados de contenido generado y confirmación (AI_PRODUCT_PATTERNS.md)
• Mover un sistema visual a través del borde de Figma en cualquier dirección (FIGMA_BRIDGE.md)

Nunca apliques la capa de movimiento cinematográfico a: UI de producto, sitios de documentación, sitios de contenido estático — o cualquier página cuyo sistema visual o copia no esté terminado. La UI de producto toma la mitad del paquete de estilo y nada más.

Patrón principal — cinco principios, en orden

1. Un reloj. Todo movimiento deriva de un estado de desplazamiento medido; ninguna capa mide el desplazamiento por sí misma, por lo que las capas nunca pueden desviarse de fase.
2. Leer por fotograma, notificar raramente. Los consumidores intensivos (WebGL/canvas/riel) leen el almacén de forma imperativa, cero renderizados del framework; solo los cambios de acto/sección gruesa notifican al framework.
3. Mantener, luego redeployar. Mantener una formación ~80% de una sección, luego morph en una onda corta, desfasada por fases, de arco curvo. Los crossfades están prohibidos.
4. Movimiento ganado. Scrub solo para instrumentos que narran estado a lo largo del tiempo; el movimiento de hover/entrada permanece por debajo de 500 ms y nunca bloquea el contenido.
5. Degradar a calma. Movimiento reducido/puntero grueso/sin WebGL colapsa a una página estática, completamente legible. El efecto es un bonus, nunca una dependencia.

Paquetes de estilo

La metodología de movimiento es agnóstica al estilo; la identidad visual proviene de un paquete de estilo en styles/. Cada archivo de paquete comienza con su propia descripción completa — esta tabla es para elegir, no para leer en lugar del paquete:

Paquete	Aspecto	Elegir para
instrument-console	Consola aeroespacial casi negra, un azul eléctrico, telemetría mono	Técnico / sistemas / infra · contrato principal
editorial-luxury	Tinta crema y espresso, acento salvia, Fraunces/Newsreader	Editorial / investigación / B2B premium · contrato principal
workbench	UI de producto claro/oscuro tranquilo, bordes como elevación, datos mono	Dashboards / administración / herramientas internas y de desarrollo (independiente) · contrato principal
briefing-room	Deck oscuro 16:9, un tono azul en OKLCH, arte tramado	Decks para inversores y junta directiva, briefings, charlas como página (independiente) · contrato principal
atrium	Luz de día crema, un terracota, vidrio estriado sobre fotografía	Salud del consumidor, longevidad, bienestar, DTC de alta confianza · contrato principal
orchard	Losas de avena cálidas, salvia más naranja caramelo, píldoras suaves 3D	Biotecnología de consumo amigable, bienestar DTC, kits y suplementos · contrato principal
field-notes	Papel con tono verde regido por líneas finas, acento óxido, marcas de recorte	Código abierto y herramientas de desarrollador vendidas sobre auditabilidad (independiente)
showroom	Galería blanca, tinta casi negra, una sombra de encuadre de siete capas	Empresas lideradas por producto cuyo mejor argumento es la aplicación en pantalla
blueprint	Papel blanco, una cuadrícula de 32 px, marcas de registro, sin radio	Infraestructura vendida sobre precisión — búsqueda vectorial, almacenamiento, motores de consulta
prism	Lavado iridiscente con un borde duro, grotesco sobre cuerpo mono	La puerta de entrada de un proyecto de infraestructura OSS, donde el primer paso es un comando
maquette	Mesa casi negra, modelos axonométricos crema, aguamarina pálida	Infraestructura de datos empresarial vendida a un comprador de arquitectura
cyclorama	Campo pastel en un bucle de 32 s, serifa de máquina de escribir, relleno naranja	Transformación empresarial de IA y consultorías de IA aplicada
scoreboard	Papel cálido, tinta primaria, naranja intenso que solo marca, números de píxel	Productos cuyo argumento es un número acumulado — crecimiento, anuncios, SEO

Un kit materializado responde parte de lo que un paquete principal omite. npx sheleg-design-skill --kit <pack> produce src/styles.css, cuya mitad de componentes es CSS creado para los estados que un paquete principal se niega a especificar — :hover, :focus-visible, :disabled, seleccionado. No se incluye con este skill, por lo que un agente que lea solo este paquete los inventará. Obtén el kit primero, y trata cualquier diferencia entre el kit y el paquete como un defecto en uno de ellos, no como una elección.

Seis de los trece están en el contrato principal, y cambia lo que obtienes. Un paquete marcado como contrato principal no especifica ## Componentes, ## Hero, ## Responsive o ## Elemento de firma — por lo que los estados por componente, el viewport de apertura y su límite de línea, las reglas de colapso, y el elemento único por el que se recuerda la página son tuyos para decidir, y lo dices en voz alta cuando lo haces. Los otros siete responden los cuatro. Esta asimetría es lo único de la biblioteca que probablemente te hará inventar un valor y creer que lo leíste: lo que un paquete principal declara está medido con dos decimales, y esa precisión no es evidencia sobre la mitad que deja en silencio. Cada paquete declara su propio nivel en una línea Contrato: sobre su Registro.

Lee el paquete elegido en su totalidad antes de estilizar cualquier cosa — proporciona la paleta, tipo, textura, valores de token de movimiento, motivos de firma y prohibiciones. Cada paquete incluye una capa de tokens lista para usar en styles/tokens/<pack>.css — copia ese archivo textualmente en lugar de transcribir tablas. Para un nuevo estilo, copia styles/STYLE_PACK_TEMPLATE.md y mantén cada encabezado — Registro / Paleta / Tipo / Textura y superficie / Componentes / Hero / Responsive / Tokens de movimiento / Motivos de firma / Elemento de firma / Sabor de movimiento (solo paquetes cinematográficos) / Micro-interacciones / Prohibiciones / Gotchas — luego crea su tokens/<pack>.css en el mismo cambio; nunca inventes valores de token ad hoc.

Calibración — tres diales

Un paquete responde qué registro. No responde qué tan lejos. Dos páginas de aterrizaje en el mismo paquete, una para una aseguradora regulada y otra para un estudio de diseño, no son la misma página. Tres diales cargan esa diferencia, y se configuran una vez, en voz alta, antes de que exista cualquier diseño.

• DESIGN_VARIANCE 1–10 — 1 es simetría perfecta, 10 es asimetría deliberada y sin dos secciones iguales.
• MOTION_INTENSITY 1–10 — 1 es estático, 10 es cinematográfico y físico.
• VISUAL_DENSITY 1–10 — 1 es una pared de galería, 10 es una cabina.

Valores base 7 / 5 / 4. Declara los valores y una línea de razonamiento antes de construir; no pidas al usuario que edite un archivo, y no te desvíes silenciosamente de lo que anunciaste.

Leyéndolos del briefing

El briefing se lee como	VARIANCE	MOTION	DENSITY
minimalista, calmado, editorial, "tranquilo como Linear"	5–6	3–4	2–3
consumidor premium, liderado por marca, "se siente caro"	7–8	5–7	3–4
agencia, portafolio, experimental, cebo de premios	9–10	7–9	3–4
página de aterrizaje / marketing, sin otra señal	7	5	4
UI de producto: dashboards, administración, herramientas internas	4–5	2–3	6–8
primero la confianza: regulado, sector público, clínico	3–4	2–3	4–5
deck de presentación	5–6	1–2	3–4
rediseño, preservar la identidad existente	coincidir	coincidir +1	coincidir
rediseño, revisión explícita	+2	+2	coincidir

Un briefing puede coincidir con dos filas, y pueden diferir por un factor de tres. "Un dashboard de administración interno tranquilo" activa tanto "tranquilo como Linear" (DENSITY 2–3) como "UI de producto" (DENSITY 6–8). La regla de precedencia: la fila que nombra la superficie gana sobre la fila que nombra un estado de ánimo. Una superficie decide cuánto tiene que caber; un estado de ánimo decide cómo se maneja — en un paquete de UI de producto, "tranquilo" se compra con moderación en color y movimiento, no con vacío. Di qué fila tomaste y por qué cuando dos se activan.

Cómo se vinculan

• El paquete gana en valores, los diales ganan en cantidad. Un dial nunca inventa un color, una fuente o un radio — esos provienen de la capa de tokens del paquete. Decide cuánta asimetría lleva la cuadrícula, cuánto de la página se mueve y qué tan apretada está.
• MOTION_INTENSITY está limitado por la tabla de frecuencias, no al revés. Un 9 en una pantalla de configuración todavía significa que la ruta del teclado no anima. Lee MOTION_DOCTRINE.md §1 primero; el dial sube lo que queda después de que esa tabla ha cortado.
• El movimiento reclamado es movimiento mostrado. Por encima de 4, la página realmente se mueve — entrada en el hero, revelación en secciones clave, respuesta en la acción principal. Una página estática que anuncia 7 está rota. Si el movimiento funcional no cabe en el alcance, baja el dial a 3 y entrega una página estática limpia; nunca construyas a medias un movimiento que se detiene, corta o salta.
• Un paquete independiente fija su propio techo. workbench y briefing-room no son cinematográficos; MOTION_INTENSITY por encima de 3 en cualquiera de ellos es una mala interpretación del paquete, no una elección audaz. field-notes es independiente por defecto y puede optar por la capa cinematográfica — lleva una sección ## Sabor de movimiento que dice cómo — por lo que es el único paquete independiente sin un techo duro. Lee esa sección antes de subir el dial.

La barra de calidad — qué significa "terminado", en orden

Cuando cualquiera puede generar un prototipo, la artesanía es el único diferenciador que queda. Los diseñadores clasifican lo que significa (Figma, State of the Designer 2026, n=906): pulido visual 58% · resolución de problemas reflexiva 47% · UX clara e intuitiva 36% · emoción y deleite 35% · consistencia 15%. Léelo como una definición de terminado, en ese orden:

1. Pulido — el paquete aplicado sin excepción: tokens, no literales; sin hex, radio o tamaño de fuente ad hoc en ninguna parte del diff.
2. Pensamiento sistémico — la decisión visual vive en un solo lugar (la capa de tokens, el registro SCENES) y todo lo demás lo lee.
3. UX clara — la estructura y el comportamiento no son la mitad de este skill; si los flujos y estados no están decididos, detente y decídelos primero.
4. Emoción — solo movimiento ganado (principio 4), y nunca a costa de 1–3.
5. Consistencia — un easing, un conjunto de duraciones, un acento, un átomo por trabajo en cada pantalla.

Carga bajo demanda — tres cosas que la capa del paquete no decide

• Profundidad de escena — seis capas (SURFACE_COMPOSITION.md), antes de escribir CSS para una página cinematográfica. Una escena tiene planos; todo en un solo plano es el fracaso que ninguna cantidad de easing repara.
• Gráficos — pasa el paquete a dataviz (mismo archivo), antes de dibujar un gráfico en cualquier paquete. Los nombres de tokens no son uniformes en los trece — solo --bg y --ink se resuelven en todas partes — y una propiedad personalizada indefinida no da error, sino que retrocede silenciosamente. Adivinar uno es la forma más silenciosa de enviar un gráfico incorrecto.
• Superficies móviles (MOBILE_SURFACES.md), cuando el briefing es una pantalla de aplicación nativa o una vista web móvil — no una página de escritorio cuya única preocupación móvil es el colapso. Cinco reglas móviles que los paquetes declaran por sí solos, una sexta ningún paquete responde (la rampa de tipo sigue el ancho del viewport, no el tamaño de texto del usuario), y la mitad que ningún paquete decide en un teléfono: la convención de la plataforma.

Elegir entre paquetes — móntalos, no los imagines

Cuando más de un paquete podría llevar un producto, no discutas al respecto. Rendered.

Monta los paquetes candidatos en una página existente y poblada — encabezado real, datos reales, densidad real — cambiados por un parámetro de búsqueda ?variant=<pack>, y alterna entre ellos en el navegador. Solo la capa de tokens cambia; el marcado permanece.

Una ruta desechable con contenido placeholder es un vacío: todos los paquetes se ven bien en ella, que es precisamente por qué no resuelve nada. Si realmente no hay una página poblada todavía, la elección es prematura — construye la página en el paquete al que apunta el registro del briefing, y revisa una vez que haya algo real para cambiar. Si el briefing no da ninguna señal, los valores predeterminados son workbench para UI de producto y showroom para una página de marketing: ambos son lo suficientemente tranquilos como para que cambiar a otro más tarde cueste diseño, no identidad. (Esto solía decir "el paquete predeterminado" y no nombrar ninguno, que no es un respaldo).

El arnés de comparación es andamio, no un entregable: sale con el mismo cambio que registra la decisión.

Superficies de producto impulsadas por IA

Diseñar productos de IA es ahora la tercera habilidad más demandada en esa misma encuesta (37%) — por delante de movimiento y IA — y las superficies son nuevas: un modelo en streaming, un agente actuando, una respuesta que podría estar equivocada. Lee AI_PRODUCT_PATTERNS.md antes de implementar cualquier UI de producto de IA — cubre el estado de generación, el modelo confirmado, el error, la respuesta parcial y los patrones de degradación para interfaces de chat y agente.

Puente de Figma

FIGMA_BRIDGE.md describe cómo mover tokens y decisiones de diseño entre Figma y código sin valores copiados a mano. El puente funciona en ambas direcciones: de Figma a CSS (exportar tokens como variables CSS) y de CSS a Figma (importar decisiones CSS en el archivo de diseño).

Archivos de referencia

Archivo	Propósito
SHELEG_DESIGN.md	Arquitectura del sistema cinematográfico, matemáticas de morph, puente DOM↔WebGL, receta de construcción
MOTION_DOCTRINE.md	Cuándo y cómo construir movimiento — tabla de frecuencias, easing, duraciones, formas prohibidas, contrato de movimiento reducido
SURFACE_COMPOSITION.md	Seis capas de profundidad de escena para páginas cinematográficas
MOBILE_SURFACES.md	Reglas de superficie móvil para vistas nativas y web
AI_PRODUCT_PATTERNS.md	Patrones de UI para productos de IA: streaming, agentes, errores, confirmación
FIGMA_BRIDGE.md	Puente entre Figma y código para tokens y valores de diseño

Contrato

• Versión del skill: 1.0.0
• Plataformas compatibles: Claude Code, Cursor, Codex, cualquier agente de IA que pueda leer archivos markdown y CSS
• Dependencias: No requiere dependencias de tiempo de ejecución; los tokens CSS se pueden copiar directamente en el proyecto