Fluxograma animado
Cria um explicador animado de 20 a 30 segundos de um processo. Duas coisas importam mais, nesta ordem:
- Cada tópico recebe seu próprio design. Layout, formas dos nós, conectores, o "respondente", leituras, paleta e
movimento são escolhidos para o assunto. Dois filmes nunca devem parecer o mesmo modelo com novos rótulos — o usuário
rejeitou exatamente isso ("每一份流程看起來都會一模一樣"). Antes de construir, escreva um parágrafo de brief de design e verifique
contra os filmes anteriores nesta conversa (e os dois exemplos aqui); mude pelo menos quatro dos
eixos de variação em
references/design-directions.md. - Profissional e técnico por padrão. O registro base é um visual polido de tecnologia/produto (consoles, diagramas de arquitetura, painéis, plantas baixas, interfaces de produto limpas). Looks acolhedores, ilustrados ou lúdicos apenas quando o tópico for claramente casual (uma receita, um plano familiar) ou o usuário pedir.
O que permanece constante entre os filmes é a gramática de animação, não a aparência: controle de velocidade (saltos rápidos, um gargalo lento, verificações posteriores mais rápidas que a primeira), dados indo e voltando (pergunta → respondente trabalha → resposta de volta), um loop, coisas visivelmente escritas em algum lugar e uma tela final com uma linha de resumo. Sem página de papel, sem parágrafos corporativos sob o diagrama.
Fluxo de trabalho
1. Modele o processo (silenciosamente; pergunte apenas se algo essencial estiver faltando)
Classifique cada etapa: trabalho (alguém/algo executa uma tarefa; permanece ∝ esforço real), gargalo (o trabalho mais lento), verificação (espaço pequeno de resposta: pontuação / sim-não / escolha um), respondente (quem decide as verificações: mecanismo de regras, arquivo de política, revisor, modelo, chef), armazenamentos (onde os resultados são escritos), atores (quem executa cada etapa). Encontre um loop e o estado final. Use os próprios termos do usuário. Números não fornecidos pelo usuário são rotulados como 示意 / ilustrativos na tela; números reais do material deles (limiares, contagens, códigos de saída) são as melhores leituras.
2. Escreva o brief de design
Leia references/design-directions.md. Escolha uma direção que se ajuste ao tópico e ao público, depois decida cada eixo:
gramática de layout, formas das estações, estilo dos conectores, como o respondente parece e acende, formas dos pacotes/tokens, painéis
de leitura, paleta (4 cores), tipo, tratamento de fundo, assinatura de movimento. Diga o brief em uma linha no chat
("主控台風：深藍格線、直角匯流排、右側規則面板…") e vá em frente — não espere aprovação.
3. Faça o layout e verifique colisões
Use references/design-rules.md (geometria, verificações de colisão, temporização, fases de ida e volta, leituras). Padrão 16:9
1920×1080 a 30 fps; 9:16 quando o usuário quiser Reels/Shorts.
4. Construa
Se a ferramenta Artifact listar um tipo Motion (animação/vídeo) — preferido (reproduz, arrasta, exporta MP4/GIF): siga
as instruções desse tipo para seus arquivos e ordem de escrita. Uma cena contínua. Coloque o modelo, rota e marcação
em shared.js, movimento em scene-<id>.js e uma pontuação que espelhe a rota em score.js. Dois filmes concluídos estão em
references/ — pegue emprestados mecanismos (linha do tempo da rota, posAt, helpers de polilinha/bezier, rastros de pacotes, rolagem de terminal,
medidores), nunca sua composição ou paleta.
Escreva texto na tela como caracteres literais (não escapes \uXXXX) para que o usuário possa redigitar rótulos no player.
Caso contrário, escreva os mesmos arquivos em uma pasta e execute
python scripts/build_player.py <pasta> <out.html> --title "<título>" para obter uma única página HTML autocontida com
play/pause/arraste; publique ou apresente. Faça um teste de fumaça com jsdom se o Node estiver disponível (veja
references/example-kitchen/README.md).
5. Entregue
Link + uma linha sobre som (inicia mudo) + exportações: a Exportação do Motion salva MP4 ou GIF (GIF é silencioso e grande em 1080p; ofereça um corte mais curto). Se você inventou uma batida para mostrar um mecanismo (por exemplo, um loop de repetição que a fonte não descreve), diga isso em uma frase e ofereça a opção de removê-lo.
Arquivos
references/design-directions.md— direções, eixos de variação, paletas, a verificação "não repita". Leia primeiro.references/design-rules.md— geometria, verificações de colisão, coreografia/temporização, idas e voltas, leituras.references/example-ops-console/— direção técnica: console escuro, cartões de serviço + portões hexagonais, barramentos ortogonais, cilindros de armazenamento, painel de políticas com linhas de regras, log de terminal, medidores de limiar (um pipeline de base de conhecimento).references/example-kitchen/— direção casual: papel quente, pistas em ziguezague, anel de luzes central (uma receita). Seu README mapeia cada arquivo para o que alterar e contém o teste de fumaça.assets/player.html,scripts/build_player.py— player autônomo de fallback.