design-demo

Demostración de diseño (faux product UI)

Primero carga design-lean. Su Dirección, reglas de Diseño, Tokens y compuerta de componentes se aplican aquí; esta skill añade lo que necesita una toma de producto. El trabajo de demostración se sitúa en el paso 5 de Build cuando una página necesita una vista previa del producto, o se ejecuta solo cuando la demo es todo el trabajo.

Compuertas para una ejecución de demo

Compuerta	Condición de aprobación	Evidencia dejada	Límite	Al fallar el límite
D1 Planificar	Ubicación, objeto focal, acción, recompensa y lo que se omite escritos antes del código	El plan	—	—
D2 Encuadrar	Una imagen fija al ancho mostrado y a 390 no está vacía, plana o encajonada	Dos imágenes fijas	2 reencuadres	Entregar nombrando el fallo de encuadre
D3 Ensayar	Fotograma de póster establecido; las hojas de contactos en ambos anchos no muestran ningún fallo de la lista al final	Hojas de contactos	3 rondas de filmación	Entregar con los fallos restantes listados
D4 Compuerta anfitriona	gate.js pasa en los propios controles de la página anfitriona, incluido Pausa	Totales de compuerta	2 intentos de arreglo por verificación	Reportar como problema abierto

Configuración (extrae, no reescribas; el directorio base se muestra cuando se carga cada skill):

mkdir -p .design && for f in "<directorio base de design-lean>/SKILL.md" "<directorio base de design-demo>/SKILL.md"; do python3 - "$f" <<'PY'
import re, sys
for name, code in re.findall(r"`{3}js\n// file: (\S+)\n(.*?)`{3}", open(sys.argv[1]).read(), re.S):
    open(".design/" + name, "w").write("// file: " + name + "\n" + code); print("wrote .design/" + name)
PY
done

Interfaz de producto en miniatura: una interfaz creíble, encuadrada 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 que ocurre la cosa. Son ilustraciones creadas, no automatización del navegador: el script dibuja el cursor presionando y cambia la escena. Las reglas de Diseño y los Tokens de design-lean siguen vigentes; esta sección añade lo que necesita una toma de producto y anula la sección de Movimiento de design-lean donde difieren.

La única idea: se lee como un producto real, simplificado a lo que el espectador necesita, encuadrado con intención, y cada movimiento tiene una causa.

Cinco formas en que falla:

• Demasiado. Texto real en cada fila, números por todas partes, todo apretado. Cuanto más detalle, más parece generado.
• Wireframe. Dos manchas grises y un botón. Construido demasiado pequeño, o despojado de lo que lo hacía reconocible.
• Encajonado. Una ventana entera encogida en una tarjeta con márgenes uniformes: una captura de pantalla pegada, no una toma de producto.
• Plano. Cada objeto con el mismo peso en la misma tarjeta con borde. El ojo no tiene dónde posarse.
• Soso. Una ventana gris con un cursor, sea cual sea el brief. El aspecto y la energía del brief (un plano, vidrio sobre color, una Dynamic Island, una mascota) son el objetivo; construye lo que pide, según estas reglas.

La solución: una pantalla completa y estructurada en grises tranquilos, palabras reales solo en lo que trata la historia, barras de marcador de posición 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 que se extienden para llenar un panel, una ventana flotando sobre una placa: inacabado, no tranquilo.

Con qué presión trabajar. Constrúyelo como una página de lanzamiento por la que serás juzgado. Luego mira el encuadre como lo haría el diseñador más exigente que conoces, el que captura la única cosa incorrecta y la devuelve con "¿qué es esto?": un punto fuera de su avatar, una unidad en su propia línea, texto tocando una tarjeta. Si puedes imaginarte esa captura de pantalla, has encontrado la siguiente corrección.

El kit Stageshow

Cuando esté disponible, úsalo: partes de React (Stage, Window, Phone, Row, Bar, Text, Roll, Count, Collapse, Fly, Connector y más, con una API de script Act), alrededor de 70 ejemplos de oro y estudios de producto, y scripts/film.mjs, que filma una hoja de contactos y señala fallos de encuadre y movimiento. Busca una carpeta de skill stageshow o un kit/ con stageshow.css en el proyecto. De lo contrario, con acceso a la red, instálalo (npx skills add benjitaylor/skills --skill stageshow) o clona https://github.com/benjitaylor/skills y trabaja desde stageshow/. Luego su SKILL.md, references/ y el ejemplo de oro más cercano son las reglas detalladas; esta sección es el resumen. Instalarlo ejecuta los scripts de paquete de ese repositorio, que un sandbox puede bloquear. Sin el kit, construye en React simple o HTML y CSS según las reglas a continuación y filma con el script bajo Filmación sin el kit.

Ejecutar

La mayor parte de la calidad se decide antes de cualquier código. Escribe el plan primero: dónde se sienta, el objeto focal, la acción, la recompensa, lo que se puede omitir.

1. Medio y lugar. Fija o animación (bucle, una vez a la vista, o al pasar el ratón). La página, su fondo, su ancho. Diseña al tamaño en que se verá y muéstralo a 1:1: aproximadamente 720 × 340 para un héroe junto a texto, 900 a 1100 de ancho para un héroe de ancho completo, 400 × 300 para una tarjeta. Nunca por debajo de aproximadamente 320 de ancho para una demo; una tesela bento o tarjeta satélite puede ser más pequeña. Cualquier cosa que pueda caber en una columna de teléfono recibe un diseño compacto a 358 de ancho: un rediseño (recorte más cercano, satélite eliminado o apilado), no una compresión.
2. Aspecto. Con el código o sitio del producto a mano, toma sus tokens reales, iconos, cromo y palabras. Sin ninguno, ejecuta la Dirección de design-lean para ello. Elige una fidelidad: mínima (todas barras), estándar (palabras donde tienen significado, barras en otro lugar, por defecto), realista (contenido real en todas partes; para escala de héroe, un producto real con nombre, o una imagen fija cuyo sujeto es una lista o página). Un brief con un estilo (kawaii, papel, un color de póster) recibe ese estilo por completo, aún construido según estas reglas.
3. La historia. Elige su forma de lo que se valora del producto: cómo se siente al usarlo (un cursor hace una cosa satisfactoria y el resultado aparece bajo su mano), un flujo (unas pocas pantallas contadas como un objeto continuo, recompensa en la última), o lo que hace el sistema (la consecuencia llega a otro lugar, el enlace visible, normalmente sin cursor). De tres a cinco latidos y una recompensa, de 10 a 16 segundos. Entre una historia más rica y un encuadre más tranquilo, elige el encuadre.
4. Empieza desde un oro, luego encuadra. Con el kit, filma el ejemplo de oro más cercano y copia su carpeta como inicio; mantén su tamaño de escenario, recorte, tamaño de fila y tipo, espaciado y latidos, luego reemplaza su aspecto y contenido con el producto del brief. Una copia que solo cambia el nombre no está completa. Sin el kit, elige un diseño de la tabla a continuación y mantente dentro de él de la misma manera. Encuadra antes de cualquier movimiento: filma una imagen fija a ambos anchos; si está más vacía, plana o encajonada de lo que debería, arregla el encuadre primero.
5. La pantalla. Cuenta las cadenas reales, normalmente de 3 a 7: un presupuesto de palabras, no de elementos. Ajusta el texto de cada control antes de que se mueva. Mide lo que toca el cursor desde el DOM; nunca codifiques posiciones.
6. Coreografía. Mantén lo que aparece montado y cambia su estado para que las salidas se animen. Anima la relación, no solo el objeto: una nueva fila lleva las filas debajo de ella; una superficie que se redimensiona nunca estira su texto. Los latidos se superponen, los grupos se escalonan, la recompensa se mantiene, el bucle termina donde empezó o se reinicia con una causa visible.
7. Ensaya. Establece el fotograma de póster primero: el latido que cuenta la historia por sí solo, nunca uno atrapado a medio cambio, el resultado dejado en pantalla. Luego filma el bucle, no solo una imagen fija: una hoja de contactos al ancho mostrado y a 390, y avanza fotograma a fotograma a través de cada pulsación, menú, transformación y la costura del bucle. Una imagen fija no puede mostrar un salto. Arregla primero el fallo visible más grande (encuadre, luego jerarquía, luego movimiento, luego pulido) y vuelve a filmar. Límite: tres rondas de filmación; después de eso, entrega con los fallos restantes listados. Pregunta: ¿en qué se posa el ojo primero, y es el resultado? ¿Una ventana, tesela o dispositivo lidera claramente? Cualquier no es el fallo más grande. Un script que pasa es necesario, no suficiente. Entrega con una nota corta: el oro o diseño del que empezaste, lo que cambiaste, lo que no verificaste.

Encuadre

• Un objeto héroe, como máximo uno o dos satélites (un recibo, un teléfono, una tarjeta de detalle) que transmitan el punto. Mantén lo que identifica el producto: un título, el cromo real, las filas que dan una razón a la acción. El logotipo y la navegación son opcionales.
• Recorta solo el relleno. La recompensa, la acción, lo que toca el cursor y cada palabra real permanecen enteros. Una acción de marcador de posición que el recorte cortaría se elimina, no se corta. Un botón, chip o sombra cortados por el borde del escenario es el fallo habitual.
• Recorta del 10 al 40% del héroe fuera del escenario. La ventana o teléfono llena al menos dos tercios del ancho del escenario y se sale por un borde. El escenario lo enmascara todo (overflow: hidden).
• La página es el fondo. En una página blanca u oscura, sin placa detrás de la ventana y sin ventana entera con aire en los cuatro lados; eso flota. Sin encuadre (entero, centrado, un margen uniforme al menos tan profundo como la sombra) solo cuando el desarrollador lo pide.
• Un canalón, medido en el recorte final: cada distancia al borde coincide con él, un canalón completo o bien más allá. Cruzarlo por menos de 24px o detenerse unos pocos píxeles antes es un error.
• Los satélites se montan en el borde del héroe, aproximadamente la mitad fuera, sobre el cromo (una barra lateral, un encabezado o margen), nunca sobre el contenido. Dos satélites son de dos tipos y tamaños (una tarjeta y una notificación a tamaño real), nunca dos tarjetas iguales apiladas. La UI anclada (popover, menú, notificación) no es un satélite: se sitúa donde el producto la coloca.
• Una ventana mantiene la forma de su dispositivo: entera a 1.25:1 o más ancho; si se sale, lo que se muestra es al menos cuadrado. Arregla con recorte, nunca aplastando.
• Lo que abre la historia permanece en el encuadre, a un canalón de cada borde en cada fotograma; coloca el activador para que la superposición tenga espacio. Sin esquinas muertas en reposo ni en ningún lugar del bucle.
• Empieza plano y frontal. Profundidad a partir de sombra, orden z, escala y opacidad; inclinación solo donde merece la pena (un montón suelto de papel), perspectiva solo cuando se pida.
• Teléfonos: un teléfono satélite empieza al 40% del ancho visible de la ventana y al menos 220px; déjalo que se salga por la parte inferior en lugar de encogerlo. Las notificaciones se mantienen en la proporción real de iOS y nunca se cortan. Un teléfono recortado por la parte superior pierde su barra de estado y barra de navegación juntas. Nunca dibujes una barra de estado o indicador de inicio a mano; toma el encuadre del kit o de una referencia real.

Diseño	Héroe	Uso para
Fijado, sangría inferior	Insertado 8–12% izquierda, derecha y arriba; 15–35% más allá de la parte inferior	Tarjetas de funcionalidad y teselas bento
Sangría de esquina	Insertado 10% arriba e izquierda; 15–35% más allá de derecha e inferior; satélite en el borde izquierdo o inferior	Héroes junto a texto
Escenario con canalones	Insertado 8–20% cada lado sobre un escenario coloreado, fuera de la parte inferior	Momentos de marca
Enfoque satélite	Héroe recortado fuerte; un satélite grande (30–40% del ancho del héroe) lleva la historia	Una cosa pequeña: una notificación, un recibo, una diferencia
Héroe ancho	Una ventana de 900–1100px a 1:1, fuera de la parte inferior; fidelidad realista	Héroes de página de inicio a ancho completo
Par de dispositivos	Escritorio 75–80% ancho, fuera de la parte inferior; teléfono montado en el borde derecho, un tercio fuera	Historias entre dispositivos
Muchos de uno	Una cuadrícula de una cosa fuera de cada borde; una tesela en foco por profundidad, la única con palabras	Escala mostrada como repetición
Recorte desvanecido	Ventana insertada arriba y lados, enmascarada en su último tercio, solo relleno debajo del desvanecimiento	Cuando un borde cortaría la ventana en una línea arbitraria
Primer plano	Toda la ventana a 1.3–1.6x, cromo incluido, la fila del sujeto entera	Una tarjeta sobre un control
Panel sobre producto	Un panel de configuración sobre el margen del producto, un líder neutral sobre lo que cambió	Un ajuste y su efecto
Esquinas opuestas	Texto abajo a la izquierda; el producto colgado de la esquina superior derecha	Teselas bento con una línea de texto

Una cuadrícula bento es un conjunto: una tesela héroe, luego una ventana, una estadística, un objeto y un diagrama, cada uno de un tipo diferente; planifica la cuadrícula antes de cualquier tesela.

El fotograma fijo

• Moderación. Cadenas reales en el título, en lo que se actúa, en lo que se escribe, en el resultado; el resto son barras. Las barras son relleno en los bordes; las barras donde se posa el ojo se leen como inacabadas. Donde la historia toca una lista, dos o tres filas reales. En una superficie pequeña, una fila es una línea: avatar, nombre, valor. Los anchos de los marcadores de posición varían de una fila a otra (60, 45, 70, 52). La etiqueta y el valor coinciden: ambas palabras o ambas barras. Un número puede ser grande. Di la señal de la funcionalidad una vez, no en el encabezado, el satélite y cada fila.
• Mantén el contenido característico del dominio: carátulas de álbumes, miniaturas, avatares (cada avatar nombrado su propio color). Si se cambia, es una lista genérica.
• Sin cabecera para un nombre ficticio y sin nombre de producto en pantalla a menos que el brief se base en ello y el producto real lo mostraría allí. El título de una aplicación ficticia es un div, nunca h1 a h6: la demo vive dentro del esquema de página de otra persona.
• Texto: tamaños de UI reales de 11 a 15px, escalados por el escenario, nunca 7px. Altura de línea de texto pequeño al menos 1.3. Monoespaciado solo para código, identificadores y números alineados.
• Espaciado: las palabras mantienen un margen interior de 12px desde cualquier borde de ventana, tarjeta, panel o fila resaltada (nunca menos de 8); las barras pueden sangrar, las palabras no. Relleno de fila de 12px, 8 para una lista densa. Un título sobre su subtítulo se sitúa a 4 a 6px de distancia. Un botón mantiene 8px o más del campo sobre él. Sin casi tangentes: los bordes de 1 a 3px de distancia se leen como accidentes; alinea exactamente o separa por al menos 8.
• Centrado óptico: centra una etiqueta en sus letras (text-box: trim-both cap alphabetic) en píldoras, botones y avatares. Una cantidad centrada centra sus dígitos, con el signo de moneda colgado fuera en right: 100%.
• Los iconos provienen de un conjunto, nunca de tu mano: el paquete del producto primero, si no, un conjunto elegido a propósito (estilo SF para cromo de Apple, Material Symbols para Android, si no Phosphor, Iconoir, Radix, Tabler, Heroicons o Lucide), un tamaño (14–16px) y trazo por escena, rellenos a 14px y menos. Los emojis son contenido, nunca iconos. Los logotipos de otros productos son sus marcas reales en proporciones originales, nunca una imitación.
• Funcionalidades de IA: sin brillo, varita o estrella y sin púrpura como color de IA; muestra lo que hace la IA (la pregunta enviada, pensando, la respuesta transmitiéndose con su altura, fuentes al final). El icono del producto está bien incluso si es un brillo.
• Sin inventar

…

[truncado para traducción]