Sampo: diseño de UI, animación y 3D

¿Qué hace Sampo: diseño de UI, animación y 3D?

Un único camino para cualquier trabajo sobre cómo se ve o se mueve una pantalla: una página web, una pantalla de app, un componente, una animación, una escena 3D, o "haz que se vea bien". Enruta a los playbooks de UI (las rutas a continuación son relativas a esta skill; los mismos archivos se imprimen con sampo playbooks show ui/NOMBRE) y a los verbos de sampo que miden el resultado. El objetivo es una UI con un punto de vista, nunca el kit de tarjetas genérico: cada paso a continuación establece una decisión o la prueba. Para una UI de terminal o un mod de Claude Code, usa ../playbooks/references/ui/terminal-ui.md.

Trabaja dentro de una tarea enfocada (cada paso edita archivos). Por paso, lee solo el playbook que nombra.

1. Dirección: decide qué sensación debe transmitir

• El repositorio ya tiene una (un DESIGN.md con una sección ## Direction, una guía de marca, un sistema de diseño publicado): eso prevalece. Léelo y ve al paso 2, a menos que el usuario haya pedido un nuevo aspecto.
• Sin dirección, o el usuario quiere looks o estilos para elegir: carga: Skill sampo:directions (seis tarjetas de una pantalla a partir de una frase, la selección guardada como DESIGN.md con un nivel de audacia).
• Muestra especímenes reales en lugar de describirlos: sampo page looks escribe una galería con un espécimen vivo por tarjeta de look; sampo looks clasifica las veinte según los favoritos y rechazos pasados del usuario, así que ofrécelo desde su parte superior.
• La postura, las palabras de gusto, el banco de direcciones y "Valores predeterminados a evitar": ../playbooks/references/ui/design-direction.md.

2. Tokens: tipo, color, espacio

• ../playbooks/references/ui/type-and-colour.md: escala tipográfica y pares, roles de paleta OKLCH, modo oscuro como su propio pase.
• CSS existente: sampo design extract SRC escribe la tabla de tokens a partir de sus propiedades personalizadas en la sección ## Tokens de DESIGN.md (--out - lo imprime en su lugar). Desde cero: sampo design palette SEED --out tokens.css crea una paleta clara y oscura a partir de un color (--format css|dtcg|tailwind); imprime en stdout, así que redirige con >. Tokens desde Figma o un .json DTCG: sampo design tokens tokens.json --to md --out DESIGN.md. Valores hardcodeados: sampo design infer SRC propone tokens.
• Activos de marca: sampo design tokens DESIGN.md --to brand --out public/ escribe favicon.svg y card.svg.
• Desviación de tokens: sampo design xray PAGINA --out xray.png delinea cada elemento en verde (color de token) o rojo.
• Pruébalo antes de construir sobre él: sampo design contrast TOKENS verifica los pares de roles (texto del cuerpo 7:1 en oscuro).

3. Construcción: layout y comportamiento

• Comienza desde una plantilla estricta: sampo new list, luego sampo new web DIR (una página) o sampo new scene DIR (una escena 3D); sampo new check PATH lo mantiene estricto.
• ../playbooks/references/ui/composition.md: ritmo, rejillas, profundidad desde una luz, el héroe, un atlas de estados.
• ../playbooks/references/ui/interaction.md: plazos de retroalimentación, recorrido por teclado, errores de formulario, reglas táctiles de 360 px.
• Gráficos: ../playbooks/references/ui/data-viz.md. Páginas de historia: ../playbooks/references/ui/scrollytelling.md.
• Tarjetas del lado del código: sampo lib show NOMBRE (los playbooks nombran cuáles).

4. Animación: diseñada, no espolvoreada

• ../playbooks/references/ui/motion.md: tokens de tiempo, una tabla estado-a-animación, storyboards, movimiento reducido como su propio camino.
• Escribe el Motion Score (motion.toml en la raíz del repositorio), luego sampo motion check (una forma reducida faltante, un easing desconocido, un token que DESIGN.md no tiene) y sampo motion compile --to css|waapi|three|lab --out ARCHIVO para emitir el código.
• Juegos y UI lúdica: ../playbooks/references/ui/game-feel.md. Sonido: ../playbooks/references/ui/sound-design.md.

5. 3D: una escena que nunca rompe la página

• ../playbooks/references/ui/scene-3d.md: composición, luz y material, un presupuesto de fotogramas, el contrato de supervivencia (sin WebGL, movimiento reducido, contexto perdido), triaje de pantalla negra.
• Describe la escena una vez como datos (cámara, luces, materiales, mallas, animaciones) en scene.json, luego sampo scene compile scene.json --to three --out scene.js (un módulo de three.js) o --to component (un componente).
• Sin dependencias: la plantilla WebGL2 de un solo archivo ../playbooks/references/ui/templates/scene.html (sampo new scene).
• Rigs de luz y presets PBR: sampo lib show light-and-material; una textura shader para una superficie, nunca toda la dirección: sampo lib list --area looks, luego sampo lib show shader-NOMBRE; librerías: sampo lib show three-js, sampo lib show react-three-fiber.

6. Verificación: pruébalo mirando

• sampo design lint SRC: problemas de diseño genérico y deslices de oficio; arregla cada uno o di por qué se queda. Su última línea nombra tokens de DESIGN.md que ningún archivo usa: conéctalos o elimínalos de la tabla.
• sampo design check: las puertas optativas de DESIGN.md (## Gates, - brief: advisory|blocking): los colores, familias tipográficas y duraciones de los Knobs, encontrados en el código; - a11y: …: pares de contraste de tokens, una ruta de movimiento reducido, sin destellos rápidos, img alt y un estilo de foco que se vea; - debt: advisory 40: colores, duraciones y radios sin tokenizar por archivo, dentro del presupuesto.
• sampo design contrast TOKENS de nuevo tras cualquier cambio de color; sampo motion check tras cualquier cambio de animación.
• sampo critique URL: los estilos que la página realmente usa contra los tokens de DESIGN.md (sin nombre, casi duplicados, ocasionales); --why SELECTOR muestra qué regla ganó. --bingo puntúa nueve señales de un aspecto de plantilla (salida 1 en una línea completa); --marks shot.png convierte trazos de lápiz rojo dibujados en una captura de pantalla en un FIX capturado por elemento marcado (--note dice qué pide cada uno); --brief [ID] verifica que las frases que cita el brief están en la página.
• ../playbooks/references/ui/visual-qa.md: sampo smoke dispara la matriz de fotogramas (360/768/1440, claro y oscuro, movimiento reducido); Lee los PNGs y mira. Antes y después: sampo img diff A.png B.png --out diff.png.
• Los estados de un componente (default, hover, error, vacío, cargando): sampo stories CHART dispara cada uno en una página de matriz. sampo shot y sampo stories aceptan --profile tv|eink|car|wrist (ese tamaño y escala de superficie) y --reduced-motion (prefers-reduced-motion: reduce, para pósters y estados estáticos).
• Registra cada uno como evidencia en el paso de la tarea; un cambio de UI no está hecho solo con tests verdes.

7. Gusto

El usuario guarda o revierte un look: sampo looks keep LOOK o sampo looks revert LOOK, para que la próxima clasificación aprenda de ello.