Animated flow diagram
Creates a 20–30 second animated explainer of a process. Two things matter most, in this order:
- Every topic gets its own design. Layout, node shapes, connectors, the "answerer", read-outs, palette and motion are chosen for the subject. Two films must never look like the same template with new labels — the user rejected exactly that ("每一份流程看起來都會一模一樣"). Before building, write a one-paragraph design brief and check it against the previous films in this conversation (and the two examples here); change at least four of the variation axes in
references/design-directions.md. - Professional and technical by default. The baseline register is a polished tech/product look (consoles, architecture diagrams, dashboards, blueprints, clean product UI). Warm, illustrated or playful looks only when the topic is clearly casual (a recipe, a family plan) or the user asks.
What stays constant across films is the animation grammar, not the look: speed control (quick hops, a slow bottleneck, later checks faster than the first), data going back and forth (question out → answerer works → answer back), one loop-back, things visibly written somewhere, and an end hold with a summary line. No paper page, no body paragraphs under the diagram.
Workflow
1. Model the process (silently; ask only if something essential is missing)
Classify every step: work (someone/something does a task; dwell ∝ real effort), bottleneck (the slowest work), check (small answer space: score / yes-no / pick-one), answerer (who decides checks: rules engine, policy file, reviewer, model, chef), stores (where results are written), actors (who does each step). Find one loop-back and the end state. Use the user's own terms. Numbers not given by the user are labelled 示意 / illustrative on screen; real numbers from their material (thresholds, counts, exit codes) are the best read-outs.
2. Write the design brief
Read references/design-directions.md. Pick a direction that fits the topic and audience, then decide each axis: layout grammar, station shapes, connector style, how the answerer looks and lights, packet/token forms, read-out panels, palette (4 colors), type, background treatment, motion signature. Say the brief in one line in chat ("主控台風：深藍格線、直角匯流排、右側規則面板…") and go — don't wait for approval.
3. Lay out and check collisions
Use references/design-rules.md (geometry, collision checks, timing, round-trip phases, read-outs). Default 16:9 1920×1080 at 30 fps; 9:16 when the user wants Reels/Shorts.
4. Build
If the Artifact tool lists a Motion (animation/video) type — preferred (plays, scrubs, exports MP4/GIF): follow that type's own instructions for its files and order of writes. One continuous scene. Put the model, route and markup in shared.js, motion in scene-<id>.js, and a score that mirrors the route in score.js. Two finished films are in references/ — borrow mechanics (route timeline, posAt, polyline/bezier helpers, packet trails, terminal scroll, meters), never their composition or palette.
Write on-screen text as literal characters (not \uXXXX escapes) so the user can retype labels in the player.
Otherwise, write the same files to a folder and run
python scripts/build_player.py <folder> <out.html> --title "<title>" to get one self-contained HTML page with play/pause/scrub; publish or present it. Smoke-test with jsdom if Node is available (see references/example-kitchen/README.md).
5. Deliver
Link + one line on sound (starts muted) + exports: Motion's Export saves MP4 or GIF (GIF is silent and large at 1080p; offer a shorter cut). If you invented a beat to show a mechanism (e.g. a retry loop the source doesn't describe), say so in one sentence and offer to remove it.
Files
references/design-directions.md— directions, variation axes, palettes, the "don't repeat" check. Read first.references/design-rules.md— geometry, collision checks, choreography/timing, round trips, read-outs.references/example-ops-console/— tech direction: dark console, service cards + hex gates, orthogonal buses, storage cylinders, policy panel with rule rows, terminal log, threshold meters (a knowledge-base pipeline).references/example-kitchen/— casual direction: warm paper, zigzag lanes, hub ring of lights (a recipe). Its README maps every file to what to change and holds the smoke test.assets/player.html,scripts/build_player.py— standalone fallback player.