Chefe de design do X abre o codigo da skill stageshow: agente desenha e anima demos de interfaces

Se voce ja pediu a um agente para desenhar uma interface, conhece o resultado: tudo esta no lugar, os botoes funcionam, mas olhar para aquilo doi. Nao ha senso de estilo, hierarquia nem aquilo que os designers chamam de bom gosto. Benji Taylor, chefe de design do X e da SpaceXAI, tentou transmitir esse criterio a um agente na forma de instrucoes. O resultado foi a skill stageshow, que ja esta disponivel como codigo aberto.

O que e e para que serve

A stageshow ensina o agente a criar faux UI, ou seja, interfaces que nao sao reais. Sao demos atraentes de produtos para landing pages, videos promocionais e infograficos. O aplicativo verdadeiro nao e necessario: o proprio agente desenha a tela e a anima. Segundo o autor, os exemplos da publicacao foram feitos sem gravacao de tela. O agente desenhou e deu vida a tudo.

O problema e conhecido por qualquer profissional de produto ou marketing. Capturas de tela ficam desatualizadas a cada lancamento, gravacoes de tela parecem pouco refinadas e ninguem vai disponibilizar um designer para cada ilustracao de um artigo. Se um agente consegue montar cenas bem-acabadas a partir de uma descricao, essa tarefa especifica pode ser delegada a ele.

Como funciona por dentro

O principal valor da skill esta no processo, nao nas imagens bonitas. O agente e conduzido por sete etapas.

1. Escolher o formato: estatico ou animado, em loop ou com uma unica execucao, alem do tamanho.
2. Escolher o visual: claro, escuro, blueprint ou glass, bem como o chrome e os icones reais do produto.
3. Criar uma narrativa de 3–5 cenas.
4. Selecionar o exemplo de referencia mais proximo e adapta-lo.
5. Montar a tela: algumas linhas reais e placeholders para o restante.
6. Configurar a animacao para que as cenas se sobreponham e o loop seja continuo.
7. Renderizar a demo com um script, examinar cada quadro, testa-la na largura de um telefone e corrigir os erros.

Ha varias decisoes sensatas de engenharia aqui. O agente nao desenha do zero; ele parte de uma referencia, o que protege contra escolhas de design aleatorias. A regra de “algumas linhas reais e placeholders para o restante” evita que a tela fique sobrecarregada de detalhes. A ultima etapa tambem cria feedback: o proprio agente examina o resultado quadro a quadro e verifica a largura para dispositivos moveis, como faria uma pessoa cuidadosa.

O que mais ela faz

A lista de recursos e bastante pratica. A skill desenha janelas de navegadores e aplicativos, alem de telefones, e oferece suporte ao estilo do macOS 26. Ha varios tipos de cursor: ele encontra elementos pelo nome e muda de formato ao passar sobre eles. Tambem ha uma camera que amplia o trecho necessario, bem como anotacoes e grades bento. Os exemplos incluem estilos inspirados em Linear, Slack, Figma, Notion e outros produtos.

O suporte a temas e especialmente importante. Os tokens do seu design system sao transmitidos por props: a cena e escrita uma vez, enquanto o tema altera as cores. Para uma equipe, isso significa que o mesmo roteiro pode ser publicado com as cores da marca, em uma versao escura e em versoes para diferentes segmentos, sem refazer a animacao.

Como experimentar

A instalacao exige um unico comando:

npx skills add benjitaylor/skills --skill stageshow

O autor de uma publicacao do canal Tips AI conta que usa a skill para criar infograficos destinados a artigos de SEO sobre os recursos de seu aplicativo. E um bom exemplo de uso pratico: o conteudo precisa ser produzido regularmente, enquanto o visual costuma se tornar o gargalo.

Limitacoes e conclusao

E importante manter expectativas realistas. A skill oferece disciplina e um conjunto de referencias ao agente, mas nao substitui um designer. A qualidade do resultado depende do modelo que executa as instrucoes e de quanto o seu produto se parece com os exemplos. Uma identidade visual fora do padrao exigira a personalizacao dos temas e, provavelmente, a adicao de referencias proprias. Alem disso, faux UI nao e uma interface real por definicao. Analises, documentacao e capturas de tela com relevancia juridica exigem um registro fiel; no marketing, vale lembrar que o usuario nao vera exatamente o mesmo que aparece na imagem.

A conclusao pratica e simples. Se voce cria landing pages, materiais promocionais ou conteudo sobre recursos de produtos, instale a skill e teste-a em uma tarefa. Estudar sua estrutura pode ser ainda mais util: formato, visual, narrativa, referencia, montagem, animacao e verificacao. Essa receita de “bom gosto como processo” tambem pode ser aplicada a outras tarefas nas quais falta senso de estilo ao agente.