design-demo

Design demo (faux product UI)

Carregue design-lean primeiro. Suas regras de Direção, Artesanato, Tokens e portão de componentes se aplicam aqui; este skill adiciona o que uma captura de produto precisa. O trabalho de demonstração fica na etapa 5 do Build quando uma página precisa de uma prévia do produto, ou é executado sozinho quando a demo é o trabalho inteiro.

Portões para uma execução de demonstração

Portão	Condição de aprovação	Evidência deixada	Limite	Na falha do limite
D1 Planejar	Posicionamento, objeto focal, ação, recompensa e o que foi omitido escritos antes do código	O plano	—	—
D2 Enquadrar	Uma imagem estática na largura mostrada e a 390 não está vazia, plana ou em caixa	Duas imagens estáticas	2 reenquadramentos	Entregar com o defeito de enquadramento nomeado
D3 Ensaio	Quadro de pôster definido; as folhas de contato em ambas as larguras não mostram nenhum defeito da lista no final	Folhas de contato	3 rodadas de filme	Entregar com os defeitos restantes listados
D4 Portão anfitrião	gate.js passa nos controles da própria página anfitriã, incluindo Pausa	Totais do portão	2 tentativas de correção por verificação	Relatar como problema em aberto

Configuração (extraia, não redigite; o diretório base é mostrado quando cada skill carrega):

mkdir -p .design && for f in "<diretório base design-lean>/SKILL.md" "<diretório base 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

Miniatura de UI de produto: uma interface crível, emoldurada em seu espaço, como uma imagem estática ou uma animação curta na qual uma coisa acontece. O espectador reconhece a tela e vê a coisa acontecer. Estas são ilustrações autorais, não automação de navegador: o script desenha o cursor pressionando e muda a cena. As regras de Artesanato e Tokens de design-lean ainda se aplicam; esta seção adiciona o que uma captura de produto precisa e substitui a Movimentação de design-lean onde elas diferem.

A única ideia: parece um produto real, simplificado para o que o espectador precisa, enquadrado com intenção, e cada movimento tem uma causa.

Cinco maneiras de falhar:

• Excesso. Texto real em cada linha, números em todo lugar, tudo empacotado. Quanto mais detalhe, mais parece gerado.
• Wireframe. Duas manchas cinzas e um botão. Construído muito pequeno, ou destituído do que o tornava reconhecível.
• Em caixa. Uma janela inteira encolhida em um cartão com margens iguais: uma captura de tela colada, não uma foto de produto.
• Plano. Cada objeto com o mesmo peso no mesmo cartão com borda. O olho não tem onde pousar.
• Insosso. Uma janela cinza com um cursor, seja qual for o briefing. O visual e a energia do briefing (um blueprint, vidro sobre cor, uma Dynamic Island, um mascote) são o ponto; construa o que ele pede, de acordo com estas regras.

A correção: uma tela completa e estruturada em cinzas suaves, palavras reais apenas no que a história é sobre, barras de placeholder para o resto, espaço para respirar, um corte que coloca o olho onde a história está. Simplifique as palavras, não o contexto. Um canto vazio, um vazio abaixo de uma lista, linhas espalhadas para preencher um painel, uma janela flutuando em uma bandeja: inacabado, não calmo.

O quão forte pressionar. Construa como se fosse uma página de lançamento pela qual você será julgado. Então olhe para o quadro como o designer mais exigente que você conhece faria, aquele que tira um print da única coisa errada e devolve com "o que é isso?": um ponto fora do avatar, uma unidade em sua própria linha, cópia tocando um cartão. Se você consegue imaginar esse print, você encontrou a próxima correção.

O kit Stageshow

Quando estiver disponível, use-o: partes React (Stage, Window, Phone, Row, Bar, Text, Roll, Count, Collapse, Fly, Connector e mais, com uma API de script Act), cerca de 70 exemplos de ouro e estudos de produto, e scripts/film.mjs, que filma uma folha de contato e sinaliza defeitos de enquadramento e movimento. Procure por uma pasta de skill stageshow ou um kit/ com stageshow.css no projeto. Caso contrário, com acesso à rede, instale (npx skills add benjitaylor/skills --skill stageshow) ou clone https://github.com/benjitaylor/skills e trabalhe a partir de stageshow/. Então seu SKILL.md, references/ e o exemplo de ouro mais próximo são as regras detalhadas; esta seção é o resumo. Instalá-lo executa os scripts do próprio pacote do repositório, que um sandbox pode bloquear. Sem o kit, construa em React puro ou HTML e CSS pelas regras abaixo e filme com o script em Filmando sem o kit.

Execução

A maior parte da qualidade é decidida antes de qualquer código. Escreva o plano primeiro: onde se senta, o objeto focal, a ação, a recompensa, o que pode ser omitido.

1. Meio e lugar. Imagem estática ou animação (loop, uma vez na visualização ou ao passar o mouse). A página, seu fundo, sua largura. Desenhe no tamanho em que será visto e mostre em 1:1: cerca de 720 × 340 para um herói ao lado de cópia, 900 a 1100 de largura para um herói de largura total, 400 × 300 para um cartão. Nunca abaixo de cerca de 320 de largura para uma demonstração; um tile de bento ou cartão satélite pode ser menor. Qualquer coisa que possa ficar em uma coluna de telefone recebe um design compacto a 358 de largura: um redesenho (corte mais próximo, satélite descartado ou empilhado), não um aperto.
2. Visual. Com o código ou site do produto em mãos, pegue seus tokens, ícones, cromados e palavras reais. Sem nenhum, execute a Direção de design-lean para ele. Escolha uma fidelidade: minimalista (todas as barras), padrão (palavras onde carregam significado, barras em outros lugares, o padrão), realista (conteúdo real em todo lugar; para escala de herói, um produto real nomeado, ou uma imagem estática cujo assunto é uma lista ou página). Um briefing com um estilo (kawaii, papel, uma cor de pôster) recebe esse estilo por completo, ainda construído de acordo com estas regras.
3. A história. Escolha sua forma a partir do que o produto é valorizado: como é usar (um cursor faz uma coisa satisfatória e o resultado aparece sob sua mão), um fluxo (algumas telas contadas como um objeto contínuo, recompensa na última), ou o que o sistema faz (a consequência chega em outro lugar, o link visível, geralmente sem cursor). Três a cinco batidas e uma recompensa, 10 a 16 segundos. Entre uma história mais rica e um quadro mais calmo, escolha o quadro.
4. Comece a partir de um ouro, então emoldure. Com o kit, filme o exemplo de ouro mais próximo e copie sua pasta como início; mantenha seu tamanho de palco, corte, tamanhos de linha e tipo, espaçamento e batidas, então substitua seu visual e conteúdo pelo produto do briefing. Uma cópia que apenas muda o nome não está pronta. Sem o kit, escolha um layout da tabela abaixo e se atenha a ele da mesma forma. Emoldure antes de qualquer movimento: filme uma imagem estática em ambas as larguras; se estiver mais vazia, mais plana ou mais em caixa do que deveria, corrija o quadro primeiro.
5. A tela. Conte as strings reais, geralmente de 3 a 7: um orçamento para palavras, não para elementos. Ajuste o texto de cada controle antes de ele se mover. Meça o que o cursor toca a partir do DOM; nunca codifique posições.
6. Coreografia. Mantenha o que aparece montado e alterne para que as saídas animem. Anime o relacionamento, não apenas o objeto: uma nova linha carrega as linhas abaixo dela; uma superfície de redimensionamento nunca estica seu texto. As batidas se sobrepõem, os grupos escalonam, a recompensa se mantém, o loop termina onde começou ou reinicia com uma causa visível.
7. Ensaio. Defina o quadro de pôster primeiro: a batida que conta a história por si só, nunca uma pega no meio da mudança, o resultado deixado na tela. Então filme o loop, não apenas uma imagem estática: uma folha de contato na largura mostrada e a 390, e passe quadro a quadro por cada pressionamento, menu, morph e a emenda do loop. Uma imagem estática não pode mostrar um pop. Corrija o maior defeito visível primeiro (enquadramento, depois hierarquia, depois movimento, depois polimento) e refilme. Limite: três rodadas de filme; depois disso, entregue com os defeitos restantes listados. Pergunte: onde o olho pousa primeiro, e é o resultado? Uma janela, tile ou dispositivo está claramente liderando? Qualquer não é o maior defeito. Um script aprovado é necessário, não suficiente. Entregue com uma pequena nota: o ouro ou layout de onde você começou, o que você mudou, o que você não verificou.

Enquadramento

• Um objeto herói, no máximo um ou dois satélites (um recibo, um telefone, um cartão de detalhe) que carregam o ponto. Mantenha o que identifica o produto: um título, o cromado real, as linhas que dão à ação uma razão. Logotipo e navegação são opcionais.
• Corte apenas preenchimento. A recompensa, a ação, o que o cursor toca e cada palavra real permanecem intactos. Uma ação de placeholder que o corte cortaria é removida, não cortada. Um botão, chip ou sombra cortado pela borda do palco é o defeito usual.
• Corte 10 a 40% do herói fora do palco. A janela ou telefone preenche pelo menos dois terços da largura do palco e ultrapassa uma borda. O palco mascara tudo (overflow: hidden).
• A página é o fundo. Em uma página branca ou escura, sem placa atrás da janela e sem janela inteira com ar nos quatro lados; isso flutua. Sem moldura (inteiro, centralizado, uma margem uniforme pelo menos tão profunda quanto a sombra) apenas quando o desenvolvedor pede.
• Uma calha, medida no corte final: cada distância de borda corresponde a ela, uma calha completa ou bem além. Cruzá-la por menos de 24px ou parar alguns pixels antes é um erro.
• Satélites atravessam a borda do herói, cerca de metade para fora, sobre o cromado (uma barra lateral, cabeçalho ou margem), nunca sobre o conteúdo. Dois satélites são dois tipos e tamanhos (um cartão e uma notificação em tamanho real), nunca dois cartões iguais empilhados. UI ancorada (popover, menu, toast) não é um satélite: fica onde o produto a coloca.
• Uma janela mantém a forma de seu dispositivo: inteira em 1,25:1 ou mais larga; sangrada, o que mostra é pelo menos quadrado. Corrija pelo corte, nunca por distorção.
• O que a história abre permanece no quadro, uma calha de cada borda em cada quadro; coloque o gatilho para que a sobreposição tenha espaço. Sem cantos mortos em repouso ou em qualquer lugar no loop.
• Comece plano e frontal. Profundidade de sombra, ordem z, escala e opacidade; incline apenas onde vale a pena (uma pilha solta de papel), perspectiva apenas quando solicitado.
• Telefones: um telefone satélite começa em 40% da largura visível da janela e pelo menos 220px; deixe-o ultrapassar a parte inferior em vez de encolher. As notificações permanecem na proporção real do iOS e nunca são cortadas. Um telefone cortado no topo perde sua barra de status e barra de navegação juntas. Nunca desenhe uma barra de status ou indicador de início manualmente; pegue o quadro do kit ou de uma referência real.

Layout	Herói	Uso para
Fixado, sangria inferior	Inserção 8–12% esquerda, direita e superior; 15–35% além da parte inferior	Cartões de recurso e tiles de bento
Sangria de canto	Inserção 10% superior e esquerda; 15–35% além da direita e inferior; satélite na borda esquerda ou inferior	Heróis ao lado de cópia
Palco com calhas	Inserção 8–20% cada lado em um palco colorido, fora da parte inferior	Momentos de marca
Foco no satélite	Herói cortado fortemente; um grande satélite (30–40% da largura do herói) carrega a história	Uma coisa pequena: uma notificação, um recibo, um diff
Herói largo	Uma janela de 900–1100px em 1:1, fora da parte inferior; fidelidade realista	Heróis de página inicial em largura total
Par de dispositivos	Desktop 75–80% largo, fora da parte inferior; telefone atravessando a borda direita, um terço para fora	Histórias entre dispositivos
Muitos de um	Uma grade de uma coisa fora de cada borda; um tile em foco por profundidade, o único com palavras	Escala mostrada como repetição
Corte de desvanecimento	Janela inserida no topo e laterais, mascarada sobre seu último terço, apenas preenchimento sob o desvanecimento	Quando uma borda cortaria a janela em uma linha arbitrária
Close-up	A janela inteira em 1,3–1,6x, cromado e tudo, a linha do assunto inteira	Um cartão sobre um controle
Painel sobre produto	Um painel de configurações sobre a margem do produto, um líder neutro para o que mudou	Uma configuração e seu efeito
Cantos opostos	Cópia no canto inferior esquerdo; o produto pendurado no canto superior direito	Tiles de bento com uma linha de cópia

Uma grade bento é um conjunto: um tile herói, então uma janela, uma estatística, um objeto e um diagrama, cada um de um tipo diferente; planeje a grade antes de qualquer tile.

O quadro estático

• Moderação. Strings reais no título, na coisa sobre a qual se age, no que é digitado, no resultado; o resto são barras. Barras são preenchimento nas bordas; barras onde o olho pousa parecem inacabadas. Onde a história toca uma lista, duas ou três linhas reais. Em uma superfície pequena, uma linha é uma linha: avatar, nome, valor. Larguras de placeholder variam de linha para linha (60, 45, 70, 52). Rótulo e valor correspondem: ambas palavras ou ambas barras. Um número pode ser grande. Diga o sinal do recurso uma vez, não no cabeçalho, satélite e cada linha.
• Mantenha o conteúdo de assinatura do domínio: arte do álbum, miniaturas, avatares (cada avatar nomeado com sua própria cor). Trocado, é uma lista genérica.
• Sem cabeçalho para um nome fictício e sem nome do produto na tela, a menos que o briefing dependa disso e o produto real o mostraria lá. O título de um aplicativo falso é uma div, nunca h1 a h6: a demo vive dentro do contorno da página de alguém.
• Tipo: tamanhos reais de 11 a 15px de UI, dimensionados pelo palco, nunca 7px. Altura da linha de texto pequeno pelo menos 1,3. Monoespaçado apenas para código, identificadores e números alinhados.
• Espaçamento: palavras mantêm uma inserção de 12px de qualquer borda de janela, cartão, painel ou linha hoverizada (nunca abaixo de 8); barras podem sangrar, palavras não. Preenchimento de linha 12px, 8 para uma lista densa. Um título sobre seu subtítulo fica a 4 a 6px de distância. Um botão mantém 8px ou mais do campo acima dele. Sem tangentes próximas: bordas de 1 a 3px de distância parecem acidentes; alinhe exatamente ou separe por pelo menos 8.
• Centralização óptica: centralize um rótulo em suas letras (text-box: trim-both cap alphabetic) em pílulas, botões e avatares. Uma quantia centralizada centraliza seus dígitos, com o sinal da moeda pendurado fora em right: 100%.
• Ícones vêm de um conjunto, nunca da sua mão: o próprio pacote do produto primeiro, senão um conjunto escolhido de propósito (estilo SF para cromado Apple, Material Symbols para Android, senão Phosphor, Iconoir, Radix, Tabler, Heroicons ou Lucide), um tamanho (14–16px) e traço por cena, preenchido a 14px e abaixo. Emojis são conteúdo, nunca ícones. Logotipos de outros produtos são suas marcas reais em proporções originais, nunca uma imitação.
• Funcionalidades de IA: sem brilho, varinha ou estrela e sem roxo como a cor da IA; mostre o que a IA faz (a pergunta enviada, pensando, a resposta chegando com sua altura, fontes por último). O próprio ícone do produto é bom mesmo se for um brilho.
• Não invente uma UI de aplicativo do zero se um aplicativo real existir para a categoria: comece com suas telas reais [link para referências não fornecido] e simplifique. A captura de tela de um aplicativo real é ponto de partida, não resultado.
• Ativos visuais: logotipo oficial, captura de tela real ou uma abstração limpa. Uma fotografia como suporte de fundo, não dentro do contêiner do produto.
• Uma moldura de dispositivo não é necessária em uma página que já a fornece (um dispositivo em uma foto de herói). Se adicionar uma moldura, use um modelo preciso (notch, Dynamic Island, bezel) do kit ou referência, nunca um retângulo arredondado genérico.

Animação

Uma única causa, uma transição de estado, satisfação. O cursor (ou o que a ação é) começa parado por 2 a 3 segundos, então faz uma coisa, o resultado aparece suavemente, e a tela fica em repouso mostrando o resultado.

O cursor do usuário:

• A não ser que o briefing peça explicitamente o contrário, um cursor de seta cinza (o conjunto SF ou Phosphor) em 24px (16px para 14px de traço), apontando para o que é pressionado. O cursor começa como se o usuário tivesse acabado de mover o mouse: pousando, acessando um espaço da esquerda, nunca pairando sobre um elemento não interativo por mais de 0,5s sem um motivo. Ele viaja em caminhos suaves, para abruptamente apenas quando o alvo é alcançado, nunca fazendo um loop. Entre as batidas, ele sai da borda do palco como se o usuário tivesse olhado para longe.
• Pressionar: o cursor se sobrepõe ao elemento, pisca seu rabo em 2px e desce 1px. O elemento desce 1px e retorna, então o cursor se move para o resultado. "Pressionar" significa que a seta toca o alvo; não há clique animado, apenas um movimento descendente e retorno. A seta está sempre no topo. Uma ação de arrastar não mostra o movimento do dedo, mas o objeto sob o cursor se move com ele.
• Quando não há cursor (o sistema age sozinho), a causa ainda é visível no primeiro quadro: um ícone de pesquisa com um termo, uma lista parcialmente deslizada, um modal meio aberto. Algo aconteceu. O gatilho está no quadro, o efeito é o que se desenrola, e o loop pode cortar o gatilho de sua borda inicial (a causa já está em andamento).

Animações de estado:

• Transições de estado são curtas (200 a 350ms) com uma curva de easing cubic-bezier(0.3, 0.0, 0.0, 1.0) ou ease-in-out. Uma lista ou menu que desliza se expande livremente sem ultrapassar. O estado final nunca mostra um valor intermediário de animação.
• Morphs (expansão de cartão, tela girando) acontecem em 400 a 600ms, com o conteúdo do estado final já na posição antes de aparecer, não se movendo para o lugar. Use layout: true no React ou deixe o layout se ajustar antes de aparecer.
• Sobreposições (modal, popover, menu) aparecem (100 a 200ms) escalonando de um ponto de ancoragem (transform-origin no centro do elemento que as invoca ou no ponto de contato do cursor), com um backdrop que fadeia (100ms) de rgba(0,0,0,0.0) para rgba(0,0,0,0.3) (ou a cor de sobreposição do produto real). Elas desaparecem com o inverso.
• Digitação e streaming: caracteres aparecem um a um (30 a 50ms por caractere), uma resposta de IA flui para baixo linha por linha (80 a 150ms por linha, começando do topo, nunca aparecendo de uma vez). O texto nunca aparece pré-escrito; veja-o sendo escrito ou fluindo.
• Mudanças de rolagem: uma lista ou página desliza em 300 a 500ms, com conteúdo que permanece em posições estáveis durante a rolagem (nadar), parando sem ultrapassar. O conteúdo rolado para fora da vista nunca reaparece no topo.
• Animações de loop são costuradas: o último quadro transita suavemente para o primeiro. A costura nunca corta uma palavra, ícone ou sombra. Se a animação terminar em um resultado, o loop reinicia a partir de uma causa externa (o cursor sai e retorna, os dados são atualizados por uma ação externa). Um loop sem fim que repete a mesma ação indefinidamente é um erro: deve começar e terminar em um estado de repouso.
• Segurança de loop: nunca anime uma propriedade que não retorne ao seu valor inicial (ex.: opacity: 0 para opacity: 1 e de volta, mas nunca left: 0px para left: 100px sem um left: 0px no final). A animação nunca deixa a tela em um estado não intencional.

Filmando sem o kit

Sem o kit, escreva um script film.mjs em .design/ que:

• Abre a página em um navegador headless (Puppeteer ou Playwright) em ambas as larguras (a largura de exibição e 390px).
• Espera 2s para a animação terminar, então tira uma captura de tela (page.screenshot()).
• Para cada quadro na animação, calcula o estado atual e tira uma captura de tela.
• Combina as capturas em uma folha de contato (use um canvas ou uma ferramenta como montage do ImageMagick).
• Verifica defeitos: objeto focal cortado, texto tocando bordas, sombras cortadas, animação não costurada.
• Saída: um arquivo HTML com a folha de contato e uma lista de defeitos encontrados.

Lista de defeitos para verificar:

• Enquadramento: o objeto herói está cortado? O satélite está sobre o conteúdo? Uma janela ou telefone está flutuando (sem margem no fundo, espaço nos quatro lados)? O corte está muito próximo (menos de uma calha de distância)?
• Hierarquia: o olho pousa primeiro no resultado? Há mais de um herói? O satélite compete com o herói?
• Animação: o cursor se move suavemente? A transição de estado é suave? A costura do loop é invisível? O loop termina em um estado de repouso?
• Polimento: o texto está muito pequeno (< 11px)? O espaçamento está irregular (tangentes, palavras tocando bordas)? Os ícones são consistentes em estilo e tamanho? O logotipo ou nome do produto parece genérico?

Após três rodadas de filme, entregue com a folha de contato e a lista de defeitos restantes. O script de filme é a principal ferramenta de verificação; não pule esta etapa.

Substituições de design-lean

• Motion (Movimentação): substitui as regras de Motion de design-lean por estas regras de animação acima. Em particular, animações são mais curtas e mais focadas (200 a 350ms em vez de 400 a 600ms) e o cursor é um ator central.
• Componentes: substitui a definição de componente de design-lean com o kit Stageshow. Usar Stageshow significa que design-lean não se aplica a partes do palco, mas as regras de Artesanato e Tokens ainda se aplicam.
• Direção: não substitui, mas adiciona a regra "O produto real primeiro" (comece de capturas de tela reais, não invente).
• Tokens: não substitui; os tokens de design-lean (cores, tipografia, espaçamento) ainda se aplicam.

Esta skill é carregada após design-lean em uma sessão de agente de IA, então suas substituições substituem as definições de design-lean.

Nota final

O objetivo é produzir uma ilustração de interface de produto crível e bonita que comunique o valor do produto em uma única imagem ou animação curta. Siga as regras rigorosamente, comece a partir de exemplos de ouro e filme cedo e frequentemente. A demonstração não é uma captura de tela de um aplicativo real; é uma ilustração que parece real, mas é simplificada para o que o espectador precisa ver. Cada elemento serve à história, e cada movimento tem uma causa. Se você não consegue ver a causa, remova o movimento.