Stageshow

¿Qué hace Stageshow?

Miniatura de UI de producto: una interfaz creíble, enmarcada en su espacio, como una imagen fija o una animación corta en la que ocurre una cosa. El espectador reconoce la pantalla y ve lo que sucede.

La única idea

Se lee como un producto real, simplificado a lo que el espectador necesita, enmarcado con intención, y cada movimiento tiene una causa.

Cinco formas en las que falla:

• Demasiado. Texto real en cada fila, números por todas partes, todo apretado. Cuanto más detalle, más parece generado.
• Estructura alámbrica. Dos manchas grises y un botón. Construido demasiado pequeño, o despojado de lo que lo hacía reconocible.
• En caja. Una ventana completa encogida en una tarjeta con márgenes uniformes: una captura de pantalla pegada, no una foto de producto.
• Plano. Cada objeto con el mismo peso en la misma tarjeta con borde. El ojo no tiene dónde posarse.
• Insípido. Una ventana gris con un cursor, sea cual sea el resumen. El aspecto y la energía del resumen (un plano, vidrio sobre color, una Dynamic Island, una mascota) son el punto; toma lo que pide y constrúyelo según las reglas, como examples/hero-demo hace con su ventana emergente escrita y su satélite de terminal (un satélite es un segundo objeto más pequeño, un recibo, teléfono o tarjeta de detalle, que cruza el borde del héroe).

La solución: una pantalla completa y estructurada en grises suaves, palabras reales solo en lo que trata la historia, líneas de relleno para el resto, espacio para respirar, un recorte que coloca el ojo donde está la historia. Simplifica las palabras, no el contexto. Una esquina vacía, un vacío debajo de una lista, filas separadas para llenar un panel, una ventana flotando sobre un plato (un fondo o campo tintado detrás): inacabado, no tranquilo.

Estas son ilustraciones creadas, no automatización de navegador: a.click() dibuja el cursor presionando, a.set() cambia la escena.

Cuánto apretar

Constrúyelo como un diseñador de producto construye una página de lanzamiento por la que será juzgado. Los ejemplos de oro en examples/ son el listón, no una referencia: si el tuyo es más vacío, plano o pequeño que el oro más cercano, esa es la primera solución. Luego mira el marco como lo haría el diseñador más exigente que conoces, el que captura la única cosa mal y la devuelve con "¿qué es esto?": un punto fuera de su avatar, una unidad en su propia línea, un agarrador debajo de la isla, texto tocando una tarjeta. Si puedes imaginar esa captura, has encontrado la siguiente solución.

Flujo de trabajo

La mayor parte de la calidad se decide antes de cualquier código. Escribe el plan primero: dónde se sitúa, el objeto focal, la acción, el resultado, qué se puede omitir.

1. Medio y lugar. Imagen fija o animación (bucle, una vez a la vista, o al pasar el ratón). La página, su fondo, su anchura. Diseña al tamaño en que se verá, aproximadamente 720 × 340 para un héroe junto a texto (hero-demo), 900 a 1100 de ancho para un héroe de ancho completo (linear), 400 × 300 para una tarjeta, mostrado al 1:1; nunca menos de aproximadamente 320 de ancho para una demo, aunque un mosaico bento o una tarjeta satélite pueden ser más pequeños. Cada demo que pueda caber en una columna de teléfono incluye un diseño compact al ancho de la columna (358), un rediseño no un apretón (references/framing.md, Formatos pequeños y la página). Una cuadrícula de mosaicos es un conjunto: planifícalo con references/bento.md.
2. Aspecto. Con el código o sitio del producto a mano, mapea sus tokens a los del kit (references/looks.md); si el desarrollador solicita sus propios componentes, úsalos dentro del escenario en lugar de las piezas pequeñas del kit. De lo contrario, un tema (claro, oscuro, plano, vidrio), una paleta (acento, monocromo) y una fidelidad: minimal son solo barras, standard son palabras donde tienen significado y barras en otros lugares, realistic es contenido real en todas partes. Por defecto claro, acento, estándar; usa realista a escala de héroe, para un producto real nombrado, o una imagen fija cuyo tema sea una lista o página. Escribe el relleno una vez con Text filler y la fidelidad decide. Los iconos propios del producto, su cromo real, el contenido que lo hace reconocible. Un resumen con un estilo (kawaii, papel, un color de póster) recibe ese estilo completo, aún construido según estas reglas.
3. La historia. Su forma (references/motion.md, Historia): cómo se siente usarlo, un flujo, o lo que hace el sistema. De tres a cinco tiempos y un resultado, de 10 a 16 segundos. Ningún movimiento de cursor que no puedas explicar. Los datos nunca retroceden a la vista sin una causa. Entre una historia más rica y un marco más tranquilo, elige el marco.
4. Empieza desde un ejemplo. Encuentra el ejemplo de oro más cercano (la tabla de oro abajo) y fílmelo (node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png; npm run dev sirve la vista previa). Copia su carpeta en tu proyecto como punto de partida; no lo reescribas de un vistazo. El bucle más rápido: cópialo a examples/<tuyo>/ aquí, donde la vista previa lo recoge y ?capture=<tuyo> lo filma, luego muévelo al anfitrión cuando pase y corrige su ruta de importación del kit. Mantén su estructura: el tamaño del escenario, el recorte y sangrado, tamaños de fila y tipo, espaciado, los tiempos del guion, las partes del kit. Ahora lee references/craft.md completo: es corto, y contiene las reglas de imagen fija que el oro no puede mostrarte, los casos que tu oro no contiene. Luego reemplaza su aspecto y contenido con el producto del resumen: los tokens del paso 2, los iconos propios del producto, cromo y palabras. Una copia que solo cambia el nombre no está hecha: debe leerse como el producto del resumen, no el del oro. Si ningún oro cuenta tu historia, elige en dos partes: primero el diseño (elígelo de la tabla en references/framing.md; cada diseño nombra su ejemplo), y copia ese ejemplo aunque su historia sea diferente; luego toma prestado el movimiento para tus tiempos del ejemplo cuya historia sea más cercana, y construye lo que ninguno tiene en el mismo estilo. Luego enmárcalo: recorta al panel donde ocurre la historia, juzgado en el recorte visible final (references/framing.md tiene las reglas y la tabla de diseños). La forma corta: un canalón, uno completo o bien pasado; solo el relleno sangra; lo que se abre permanece dentro; las ventanas mantienen su forma; la página es el fondo, por lo que no hay plato debajo de un héroe en una página blanca u oscura y ninguna ventana entera con aire en cuatro lados; unframed solo cuando el desarrollador lo pida; sin esquinas muertas. Filma una imagen fija a ambos anchos junto a la del oro; si la tuya es más vacía, plana o en caja, corrige el marco antes de cualquier movimiento.
5. La pantalla. Cuenta las cadenas reales, normalmente de 3 a 7 (references/craft.md, Mesura): un presupuesto para palabras, no para elementos. Construye con los tokens del kit, Bar, Text y Row. Ajusta el texto de cada control antes de que se mueva. Marca lo que el cursor toca con data-target y data-cursor; mide con rect(), nunca valores fijos.
6. Coreografía. La API Act. Mantén lo que aparece montado y alterna para que las salidas se animen (Bubble y Fly se entregan explícitamente). Anima la relación, no solo el objeto: una nueva fila lleva consigo las filas debajo, una superficie que cambia de tamaño nunca estira su texto. Los tiempos se superponen, los grupos se escalonan, el resultado se mantiene, el bucle termina donde comenzó o se reinicia con una causa visible.
7. Ensaya. Configura poster primero: la mayoría de la gente ve solo ese fotograma (una miniatura, movimiento reducido, una captura de pantalla), así que es el tiempo que cuenta la historia por sí solo, nunca uno atrapado a medio cambio, con el resultado dejado en pantalla en lugar de ordenado (references/motion.md, Historia). Luego filma el bucle, no solo una imagen fija: la hoja de contactos al ancho mostrado y a 390, y avanza por cada pulsación, menú, transformación y la unión del bucle (references/rehearse.md). Una imagen fija no puede mostrar un salto. Lee cada fotograma, corrige primero el fallo visible más grande (encuadre, luego jerarquía, luego movimiento, luego pulido), vuelve a filmar. Luego sostenlo junto al oro más cercano y responde los pares de composición completa y estilo en references/teaching.md como preguntas sobre tu imagen fija (¿qué atrapa primero el ojo, y es el resultado? ¿una ventana, mosaico o dispositivo lidera claramente?); cualquier "no" es el fallo más grande. film.mjs --gate que termine con rehearsal passed es necesario, no suficiente. Luego ejecuta la última pasada en references/rehearse.md: una revisión con ojos frescos (references/review.md) y REHEARSAL.md junto al componente (plantilla en references/verify.md, Entrega): el oro que copiaste, lo que cambiaste, lo que no comprobaste.

Fallos que vuelven en cada ronda, cada uno con su regla; revísalos antes de entregar:

• Contenido que intercambia en lugar de moverse (references/motion.md, Texto y valores cambiantes).
• Barras grises donde el ojo aterriza; el relleno pertenece a los bordes (references/craft.md, Mesura).
• Un plato detrás de la ventana, o una ventana flotando con aire en cuatro lados; la ventana o teléfono llena al menos dos tercios del escenario y se sale por un borde (references/framing.md, regla 5 y Formatos pequeños y la página).
• Bandas vacías, controles cortados y sombras (references/craft.md, Mesura; references/framing.md, regla 4).
• IA y logotipos inventados: destellos, púrpura, una letra en un cuadrado de color (references/craft.md, Iconos y logotipos).
• Filas ocupadas e inserciones desiguales (references/craft.md, Mesura y Espaciado y alineación).
• Esperas largas y un reinicio sin causa (references/motion.md, Bucles).
• Una selección que no está bajo la I-beam (references/motion.md, Arrastres y selección).
• Una barra de estado o indicador de inicio dibujado a mano; el Teléfono dibuja ambos (references/craft.md, Cromo y dispositivos).
• Una cantidad centrada con su signo (references/craft.md, Espaciado y alineación).

Ejemplos

Filma el más cercano antes de empezar (paso 4). Los ejemplos de oro son el listón de calidad; los estudios de producto son para tomar prestada una interacción, nunca la identidad de otro producto; las hojas de especímenes son catálogos, no composiciones. Ejecuta todo con npm install y npm run dev. teaching/ tiene pares buenos/malos (references/teaching.md) para diagnosticar un problema; las mitades malas nunca son puntos de partida.

Oro

Necesidad	Ejemplo	Qué aprender
Imagen fija o tarjeta de funcionalidad	static-card	Jerarquía tranquila, un recorte duro, un satélite, palabras reales solo en el cliente seleccionado, sus vecinos y el total
Imagen fija oscura	dark-bento	Una señal dicha una vez; el arte del álbum lo mantiene como una app de música
Héroe animado, un gesto	hero-demo	Cinco tiempos, objetivos nombrados, una anotación, una terminal que avanza
Coreografía, sin cursor	payout-flow	Llegadas lentas superpuestas, tiempo de lectura, un resultado que se mantiene
Contenido cambiando en el lugar	choreography	Pistas retenidas, máscaras suaves, tiempo dependiente
Respuesta de IA	ai-chat	La pregunta enviada, Pensando, la respuesta transmitiéndose con su altura, fuentes al final; sin destellos, sin púrpura
IA con tarjetas	ai-cards	Una tarjeta de opción múltiple respondida y mantenida como el registro, una tarjeta de opciones abriéndose en el hilo, reservada desde su propio botón
Validación de formulario	form-error	Un error en el campo que lo causó, corregido al arreglarlo, luego el botón se confirma a sí mismo
Arrastrar para reordenar	reorder	Una fila levantada por su asa, los demás haciendo espacio, soltada en su lugar
Exploración de gráfico	chart-scrub	Una línea fina y un punto que siguen el puntero, el valor del titular rodando al día debajo
Editar en una tabla	table-edit	Una celda editada en su lugar, luego el total que alimenta rueda un tiempo después
Carga a contenido	loading	Un esqueleto en la geometría propia del contenido, filas resolviéndose de arriba abajo, cromo real en todo momento
Héroe oscuro	dark-hero	Profundidad de pasos de superficie sobre negro, un color iluminado, un estado que cambia por sí solo en una píldora
Colaboradores en vivo	presence	Cada persona un color en todas partes, nombres montando sus cursores, trabajo mostrado en las propias marcas del documento
Historia de sistema	subscriptions	Un chip vuela a una fila, MRR rueda, una segunda escena es el reinicio
Primer plano	close-up	Un control a 1.4x con el cromo de su ventana, la fila completa, un cursor grande a juego
Muchos de uno	many-of-one	Una cuadrícula de una cosa fuera de cada borde, un mosaico enfocado por profundidad, el único con palabras
Recorte de desvanecimiento	fade-crop	Una ventana desvaneciéndose al pie, sobre relleno, en lugar de salirse por un borde
Panel sobre producto	panel-annotation	Un panel de configuración sobre el margen del producto, una línea desde la configuración a lo que cambió
Ventanas superpuestas	overlap	Una tarjeta delante de una ventana, su borde en la línea de la barra lateral de la ventana
Tarjetas apiladas	stacked-cards	Dos componentes al mismo ancho, un pequeño espacio, el inferior fuera del borde inferior
Esquinas opuestas	opposite-corners	Un mosaico bento: texto abajo a la izquierda, el producto colgado de la esquina superior derecha
Pila inclinada	tilted-stack	Un montón suelto de papel, pequeños ángulos alternados, solo la tarjeta superior tiene palabras
Chip de esquina	corner-chip	Un pequeño chip centrado en una esquina de ventana, mitad fuera
Monocromo	monochrome	Productos de otras empresas en fila, escala de grises, desvaídos al pie
Fila de ventanas	window-row	Sesiones lado a lado a una altura: enfoque por profundidad, vecinos cortados por el escenario, solo relleno recortado
Ventana y teléfono	device-pair	Un panel y una pantalla de bloqueo contando un evento; el teléfono cruza sobre el margen, nunca sobre la figura
Objetos relacionados	story	Una factura, un plan, un conector, totales rodantes
Arrastre de calendario	calendar	Una semana poblada, un evento focal, una recogida medida
Arrastre libre	freeform-drag	Desplazamiento de agarre, una cuadrícula medida, una ranura de soltar que encaja
App de teléfono	phone-touch	Una tarjeta se abre en su pantalla como un solo objeto, y el bucle se pliega hacia atrás
Dynamic Island	dynamic-island	Una forma negra, su contenido una capa separada
Mensajes	messages	Compositor, escritura, recibos, la vida de una burbuja
Cursores	cursors, cursor-morph, cursor-resize	Cinco estilos, tipos impulsados por elementos, bordes y esquinas de redimensionamiento, ningún cursor en absoluto
Anotaciones	annotations	Líneas guía, dimensiones, flujos y un objetivo en movimiento; references/annotations.md
Cuadrícula de funcionalidades	bento	Un héroe, una ventana, una estadística, un objeto, un diagrama
Cuadrícula con reglas oscuras	ruled-bento	Reglas compartidas e imágenes técnicas
Cuadrícula de consumo	staggered-bento	Mosaicos desplazados, arte gráfico, objetos físicos
Cuadrícula héroe liderada por imagen	hero-grid	Fondos diferentes, un mosaico ancho, satélites de héroe

...