Diagramme de flux animé
Crée un explicateur animé de 20 à 30 secondes d'un processus. Deux choses comptent le plus, dans cet ordre :
- Chaque sujet a son propre design. La mise en page, les formes des nœuds, les connecteurs, le « répondeur », les lectures, la palette et le mouvement sont choisis pour le sujet. Deux films ne doivent jamais ressembler au même modèle avec de nouvelles étiquettes — l'utilisateur a exactement rejeté cela (« 每一份流程看起來都會一模一樣 »). Avant de construire, rédigez un brief design d'un paragraphe et vérifiez-le par rapport aux films précédents de cette conversation (et aux deux exemples ici) ; modifiez au moins quatre des axes de variation dans
references/design-directions.md. - Professionnel et technique par défaut. Le registre de base est un look technique/produit soigné (consoles, diagrammes d'architecture, tableaux de bord, plans, interface produit propre). Des looks chaleureux, illustrés ou ludiques uniquement lorsque le sujet est clairement décontracté (une recette, un plan familial) ou que l'utilisateur le demande.
Ce qui reste constant entre les films, c'est la grammaire d'animation, pas l'apparence : contrôle de vitesse (sauts rapides, un goulot d'étranglement lent, les vérifications ultérieures plus rapides que la première), les échanges de données (question sort → répondeur travaille → réponse revient), une boucle de retour, des choses écrites visiblement quelque part, et une tenue finale avec une ligne de résumé. Pas de page en papier, pas de paragraphes de corps sous le diagramme.
Flux de travail
1. Modéliser le processus (silencieusement ; ne demandez que si quelque chose d'essentiel manque)
Classifiez chaque étape : travail (quelqu'un/quelque chose effectue une tâche ; durée ∝ effort réel), goulot d'étranglement (le travail le plus lent), vérification (petit espace de réponse : score / oui-non / choisir-un), répondeur (qui décide des vérifications : moteur de règles, fichier de politique, réviseur, modèle, chef), stocks (où les résultats sont écrits), acteurs (qui effectue chaque étape). Trouvez une boucle de retour et l'état final. Utilisez les termes de l'utilisateur. Les numéros non donnés par l'utilisateur sont étiquetés 示意 / illustratif à l'écran ; les vrais numéros de leur matériel (seuils, comptes, codes de sortie) sont les meilleures lectures.
2. Rédiger le brief design
Lisez references/design-directions.md. Choisissez une direction qui correspond au sujet et au public, puis décidez chaque axe : grammaire de mise en page, formes des stations, style des connecteurs, comment le répondeur apparaît et s'illumine, formes des paquets/jetons, panneaux de lecture, palette (4 couleurs), police, traitement du fond, signature de mouvement. Dites le brief en une ligne dans le chat (« 主控台風：深藍格線、直角匯流排、右側規則面板… ») et lancez — n'attendez pas d'approbation.
3. Disposer et vérifier les collisions
Utilisez references/design-rules.md (géométrie, vérifications des collisions, timing, phases d'aller-retour, lectures). Par défaut 16:9 1920×1080 à 30 ips ; 9:16 lorsque l'utilisateur souhaite Reels/Shorts.
4. Construire
Si l'outil Artifact répertorie un type Motion (animation/vidéo) — préféré (joue, scrute, exporte MP4/GIF) : suivez les instructions de ce type pour ses fichiers et l'ordre d'écriture. Une seule scène continue. Mettez le modèle, le chemin et le balisage dans shared.js, le mouvement dans scene-<id>.js, et un score qui reflète le chemin dans score.js. Deux films terminés se trouvent dans references/ — empruntez les mécanismes (timeline du chemin, posAt, aides de polyligne/bezier, traces de paquets, défilement de terminal, compteurs), jamais leur composition ou palette.
Écrivez le texte à l'écran sous forme de caractères littéraux (pas d'échappements \uXXXX) afin que l'utilisateur puisse retaper les étiquettes dans le lecteur.
Sinon, écrivez les mêmes fichiers dans un dossier et exécutez python scripts/build_player.py <dossier> <out.html> --title "<titre>" pour obtenir une seule page HTML autonome avec lecture/pause/scrutation ; publiez-la ou présentez-la. Faites un test de fumée avec jsdom si Node est disponible (voir references/example-kitchen/README.md).
5. Livrer
Lien + une ligne sur le son (démarre en sourdine) + exportations : l'Export de Motion enregistre MP4 ou GIF (GIF est silencieux et volumineux en 1080p ; proposez un extrait plus court). Si vous avez inventé un rythme pour montrer un mécanisme (par exemple, une boucle de tentative que la source ne décrit pas), dites-le en une phrase et proposez de le supprimer.
Fichiers
references/design-directions.md— directions, axes de variation, palettes, la vérification « ne pas répéter ». Lisez d'abord.references/design-rules.md— géométrie, vérifications des collisions, chorégraphie/timing, allers-retours, lectures.references/example-ops-console/— direction technique : console sombre, cartes de service + hexagones, bus orthogonaux, cylindres de stockage, panneau de politique avec lignes de règles, journal du terminal, compteurs de seuil (un pipeline de base de connaissances).references/example-kitchen/— direction décontractée : papier chaleureux, voies en zigzag, anneau central de lumières (une recette). Son README associe chaque fichier à ce qu'il faut modifier et contient le test de fumée.assets/player.html,scripts/build_player.py— lecteur de secours autonome.