Turn the video storyboard intoeditorial-grade typography + visual chartspresentation animation: paper-gray background, charcoal-black ink, hairline rules, grayscale lightness ladder,a single accent orange per page; the subject of each shot is a "chart" matching the content (timeline, cycle ring, process chain, two-column comparison, dot-matrix count, heatmap matrix, swimlane, nested cutaway...), rather than piles of text. One HTML per shot, cinematic foundation (opening from black/ virtual clock/ camera push-pull/ WebAudio sound effects), full-screen screen recording becomes the finished video.
Anti-patterns are the reason this Skill was born: the presentation pages AI generates by default are always "pitch-black + glossy and shiny" (black background + neon glow + gradient light spots)—this system completely bans them, and instead uses the flat restraint of Swiss International Style: white paper, ink text, a single hairline rule, a touch of orange.
Creative philosophy
- Charts first: given any piece of narration, first ask "what kind of chart is this"—process→chain/swimlane, cycle→ring, comparison→two-column/slopegraph, quantity→dot matrix/count, time→timeline, structure→nested/layered, distribution→heatmap matrix. Text only serves as title/label/conclusion bar, and the main graphic area is ≥55% of the area.
- Lightness is data: the grayscale ladder L1-L7 carries all hierarchy (important = darkest), color keeps only one orange
#F5572Fto mark "the single protagonist of this page" (largest number/conclusion/focal node/warning). - Typography is power: Inter large-type typography (main title 64-120px, assertion number 120-260px·800-900, eyebrow 15px uppercase tracking .14em) + 88px page margins + 12-column grid + asymmetrical layout (heavy on the left, light on the right).
- Restraint is a virtue: no glow/neon text-shadow, radial light spots, glossy gradients, vignette, scanlines, grain, large blurred shadows. Allowed: flat color blocks, 1-2px hairline rules, dashed lines, reverse (ink background with paper text), fine grid.
- Animation fast-forward and fast-stop: quarticOut/cubicOut easing; three entrance styles pop/fade/draw; no bouncing, flickering, or glowing. Beat animations always use cue+tws (pausable and freezable), and only pure decoration uses CSS animation.
- Each shot is 15-45s; narration does not go on screen (cue annotations align with timestamps); numbers must not be invented (whitelist discipline).
Token discipline (mandatory)
- Do not read through
assets/template.htmlandassets/examples/any finished pages under . Templatecpafter copyinggrep -n "改这里\|DUR="get line numbers, and only read the marked areas; when a finished page gets stuck, grep to locate it and then read a window of ≤80 lines. - For knowledge, prioritize
references/four condensed documents (swiss-system design source / chart-skill-bridge three-skill fusion selection / chart-vocabulary built-in chart vocabulary / production-spec production discipline).
Workflow
Step 0 · Storyboard table: read through the material (narration script with timestamps/outline/storyboard script), split into 镜头|时长|图表主视觉(选型)|页面分类(A 信息动效 / B 拟真仿真) Assign the table to the user for confirmation. Page classification determines the strategy: Category A is all-Swiss + chart maximization; Category B (real device/software interface simulation) keeps the simulation itself and only Swissifies the stage base/page header/annotations/corner notes/conclusion bar. Asset copying (do not read contents):
cp -r "assets/examples/vulnclaw-tutorial/Shark-GIF" <输出目录>/ # 大肥鱼 GIF（角色位）
Step 1 · Implement page by page：cp assets/template.html <输出目录>/shot-x-x_名称.html → grep to locate → only modify the [modify here] area: eyebrow + large title + main chart (select type from chart-vocabulary) + cue table. The chassis/Swiss tokens/component library stay untouched.
Chart skill bridging(when selecting the main visual, prioritize checking references/chart-skill-bridge.md): built-in diagram-design (14 types of conceptual diagrams, MIT) and archify (5 types of engineering diagrams, MIT) at assets/chart-skills/, lieflat-charts (63-type data chart codex, NC license requires self-installation) — match and select by "has numbers → lieflat / explains relationships → diagram-design / explains systems → archify / lightweight illustration → built-in"; when external charts are merged in, apply Swiss reskinning according to the bridging document (token override/remove interaction/cue-driven). Read type documents individually as needed; do not read through the gallery.
Step 2 · Quality check: the chassis has built-in QA hooks — add to the URL #auto,t=毫秒 after playback starts, freeze at that moment and take a headless screenshot directly (no need to modify files):
& "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --disable-gpu --hide-scrollbars --window-size=1920,1080 --virtual-time-budget=4500 --screenshot="_qa\p_t6000.png" "file:///C:/路径/shot-x-x.html#auto,t=6000"
Each page ≥4 time points (opening/middle/climax/ending) + zero console errors.Go through the four aesthetic questions page by page: ① Is the paper base/ink text/hairline system consistent? ② No residual glow/gradients/greasy shine? ③ Do the large-type hierarchy and grid hold, and is the main visual ≥55%? ④ Are the chart vocabulary items actually placed and matched to the content?
Step 3 · index overview: a scheduling board grouped by chapter (same Swiss system), listing each shot's duration/chart type/category tag.
Delivery standards
- Start with the black-screen "Start Playback"; 1920×1080 adaptive; HUD summoned at the bottom (progress bar in ink color); pausable and replayable; DUR precise
- Swiss tokens are the sole source of truth (paper
#F0EFEB/ink#1C1C1A/orange#F5572F/grayscale ladder); Inter+Noto Sans SC+IBM Plex Mono trio - Main graphic area ≥55%; eyebrow→large title→chart three-part structure; orange ≤3 places per page, marking only one protagonist
- Chart vocabulary matches the content (see the chart-vocabulary selection table); zero glow/gradients/light spots
- cue annotations = original spoken sentence + timestamp; spoken narration does not go on screen; the number whitelist is not fabricated
- Big Fat Fish 1-2 times (paper-base bubble: white background + 1px ink border + black text + orange keywords); corner-note sources; all four QA questions passed