El responsable de diseno de X libera stageshow: un agente dibuja y anima demos de interfaces

Si alguna vez le ha pedido a un agente que disene una interfaz, ya conoce el resultado: todo esta en su sitio, los botones funcionan, pero mirarla duele. No hay sentido del estilo ni jerarquia, ni eso que los disenadores llaman buen gusto. Benji Taylor, responsable de diseno de X y SpaceXAI, ha intentado transmitir ese criterio a un agente mediante instrucciones. El resultado es la skill stageshow, que ya esta disponible como codigo abierto.

Que es y para que sirve

Stageshow ensena al agente a crear faux UI, es decir, interfaces que no son reales. Son demos atractivas de productos para landing pages, videos promocionales e infografias. No hace falta disponer de la aplicacion real: el propio agente dibuja la pantalla y la anima. Segun el autor, los ejemplos de la publicacion se hicieron sin grabar la pantalla. El agente lo dibujo y animo todo.

El problema resulta familiar para cualquier profesional de producto o marketing. Las capturas quedan obsoletas con cada lanzamiento, las grabaciones de pantalla tienen un aspecto poco pulido y nadie va a asignar un disenador a cada ilustracion de un articulo. Si un agente sabe montar escenas cuidadas a partir de una descripcion, se le puede delegar esta tarea tan concreta.

Como funciona por dentro

El principal valor de la skill esta en el proceso, no en las imagenes atractivas. El agente sigue siete pasos.

1. Elegir el formato: estatico o animado, en bucle o con una sola reproduccion, y el tamano.
2. Elegir el aspecto: claro, oscuro, blueprint o glass, ademas del chrome y los iconos reales del producto.
3. Idear una historia de 3–5 escenas.
4. Tomar el ejemplo de referencia mas cercano y adaptarlo.
5. Montar la pantalla: unas pocas lineas reales y elementos de relleno para el resto.
6. Configurar la animacion para que las escenas se solapen y el bucle sea continuo.
7. Renderizar la demo mediante un script, revisar cada fotograma, probarla con el ancho de un telefono y corregir los errores.

Hay varias decisiones de ingenieria sensatas. El agente no dibuja desde cero, sino que parte de una referencia, lo que evita decisiones de diseno arbitrarias. La regla de “unas pocas lineas reales y elementos de relleno para el resto” impide sobrecargar la pantalla con detalles. El ultimo paso aporta retroalimentacion: el propio agente revisa el resultado fotograma a fotograma y comprueba el ancho movil, como haria una persona meticulosa.

Que mas puede hacer

La lista de funciones es bastante practica. La skill dibuja ventanas de navegadores y aplicaciones, asi como telefonos, y admite el estilo de macOS 26. Incluye varios tipos de cursor: localiza elementos por su nombre y cambia de forma al pasar sobre ellos. Tambien ofrece una camara que acerca el fragmento necesario, anotaciones y cuadriculas bento. Entre los ejemplos hay estilos inspirados en Linear, Slack, Figma, Notion y otros productos.

El trabajo con temas es especialmente importante. Los tokens del sistema de diseno se pasan mediante props: la escena se escribe una sola vez y el tema cambia los colores. Para un equipo, esto significa que un mismo guion puede publicarse con los colores de la marca, en una version oscura y en versiones para distintos segmentos sin rehacer la animacion.

Como probarlo

La instalacion se realiza con un solo comando:

npx skills add benjitaylor/skills --skill stageshow

El autor de una publicacion del canal Tips AI cuenta que utiliza la skill para crear infografias destinadas a articulos SEO sobre las funciones de su aplicacion. Es un buen ejemplo de uso practico: se necesita contenido de forma regular y el apartado visual suele convertirse en el cuello de botella.

Limitaciones y conclusion

Conviene mantener expectativas realistas. La skill aporta disciplina y un conjunto de referencias al agente, pero no sustituye a un disenador. La calidad del resultado depende del modelo que ejecute las instrucciones y de cuanto se parezca el producto a los ejemplos. Una identidad visual poco convencional exigira personalizar los temas y, muy probablemente, anadir referencias propias. Ademas, una faux UI no es una interfaz real por definicion. Para resenas, documentacion y capturas con relevancia juridica hace falta un registro fiel; en marketing, conviene recordar que el usuario no vera exactamente lo mismo que aparece en la imagen.

La conclusion practica es sencilla. Si crea landing pages, promociones o contenido sobre funciones de un producto, instale la skill y pruebe una tarea. Puede ser aun mas util estudiar su estructura: formato, aspecto, historia, referencia, montaje, animacion y verificacion. Esta receta de “gusto convertido en proceso” tambien puede trasladarse a otras tareas en las que al agente le falte sentido del estilo.