Ian Xiaohei SVG Motion
把 Ian 小黑正文配图的原则，改造成可控的 HTML + SVG + GSAP timeline 动效。目标不是复刻生图像素，而是把文章里的一个认知动作重建成分层漫画舞台，方便录视频、按字幕 cue 对齐、后续改文案和元素。
Core Rule
Do not auto-vectorize a PNG and animate the resulting path soup. Use raster images only as composition references. Rebuild the scene as semantic SVG groups:
idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review
Workflow
- Extract one cognitive anchor from the article, script, screenshot, or storyboard scene.
- Choose one physical metaphor: sorting, carrying, bridging, leaking, catching, folding, weighing, opening, rerouting, or falling.
- Make Xiaohei perform the core action. If removing Xiaohei does not change the meaning, redesign.
- Design a 16:9 white canvas with one main scene, 35%+ whitespace, and 3-5 short handwritten annotations at most.
- Build semantic SVG groups for every moving object.
- Animate with GSAP timeline. Use
x, y, rotation, scale, opacity, and SVG stroke drawing. Avoid layout animations.
- Save both a playable HTML page and a static review screenshot.
- If this is for a 口播成片 project, map timeline segments to subtitle/cue timing before final render.
Read When Needed
- Read
references/style-rules.md before designing a new scene or judging whether the result still feels like Ian Xiaohei.
- Read
references/svg-layering.md before writing or editing the SVG structure.
- Read
references/motion-rules.md before writing GSAP animation.
Output Contract
Default output folder:
output/<slug>-xiaohei-svg-motion/
Required files:
index.html
README.md
preview.png
vendor/gsap.min.js
Optional files:
source.png # reference image, if provided by the user
cue-map.md # when aligning to spoken script or subtitles
Reusable Assets
AI model and interface icons live in:
assets/icons/
Use assets/icons/index.json as the source of truth. Keep original SVG files in subfolders and inline their complete SVG content into scene SVGs during generation, so gradients, strokes, and brand colors are preserved.
Icon rules:
- If
index.json already has the exact model, provider, or semantic icon, use that icon. Do not replace ChatGPT, Claude, Flash lightning, Step, DeepSeek, Qwen, bug, table, chart, database, or web icons with generic boxes, stars, sparks, or abstract marks.
- When the user provides a new SVG icon, save the raw SVG under
assets/icons/<category>/, add an entry to index.json, and then reference it by id in the scene plan.
- For comparison scenes, icon choice is part of the meaning. Keep model icons visually consistent in size and placement so the viewer can identify the actors before Xiaohei starts moving objects.
Template
Use assets/templates/xiaohei-comic-motion/ as the starter when the request resembles a hand-drawn comic scene with moving objects, arrows, annotations, or a Xiaohei action.
Use assets/templates/xiaohei-series-reference/ when the request asks for multiple variants, a reusable series, or a broader reference set for 口播 explanation scenes.
Copy the template into the project output folder, then edit:
- SVG group names.
- Handwritten labels.
- Object positions.
- Timeline labels and durations.
- README notes for the scene-specific metaphor.
Quality Gate
Before final response:
- Open the HTML in a local server.
- Check console for errors.
- Capture a static screenshot with
?static=1.
- Capture at least one playback mid-frame when the scene has multiple beats. If available, use
?frame=mid for a deterministic review frame.
- Visually inspect that text, arrows, Xiaohei, props, belts, pits, cards, and final impact points do not overlap.
- Confirm the animation has visible progression: context first, action second, problem/result third, summary last.
- Confirm annotations appear only after the object/action they explain.
- Remove decorative or semi-transparent guide arrows if the object motion already shows direction.
- Confirm Xiaohei is part of the action.
- Confirm the page is not just a PNG in an
<img> tag unless the user explicitly asked for PNG-only camera moves.
1---2name: ian-xiaohei-svg-motion3description: Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the user asks for 小黑 SVG、漫画感 HTML、分层 SVG 动效、把小黑生图做成 HTML/SVG、可编辑矢量动效、口播流程动画、手绘漫画动效、正文配图动画, or wants a Xiaohei illustration style adapted into controllable HTML/SVG/GSAP output instead of raster image generation.4---5
6# Ian Xiaohei SVG Motion
7
8把 Ian 小黑正文配图的原则，改造成可控的 `HTML + SVG + GSAP timeline` 动效。目标不是复刻生图像素，而是把文章里的一个认知动作重建成分层漫画舞台，方便录视频、按字幕 cue 对齐、后续改文案和元素。
9
10## Core Rule
11
12Do not auto-vectorize a PNG and animate the resulting path soup. Use raster images only as composition references. Rebuild the scene as semantic SVG groups:
13
14```text
15idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review
16```
17
18## Workflow
19
201. Extract one cognitive anchor from the article, script, screenshot, or storyboard scene.
212. Choose one physical metaphor: sorting, carrying, bridging, leaking, catching, folding, weighing, opening, rerouting, or falling.
223. Make Xiaohei perform the core action. If removing Xiaohei does not change the meaning, redesign.
234. Design a 16:9 white canvas with one main scene, 35%+ whitespace, and 3-5 short handwritten annotations at most.
245. Build semantic SVG groups for every moving object.
256. Animate with GSAP timeline. Use `x`, `y`, `rotation`, `scale`, `opacity`, and SVG stroke drawing. Avoid layout animations.
267. Save both a playable HTML page and a static review screenshot.
278. If this is for a 口播成片 project, map timeline segments to subtitle/cue timing before final render.
28
29## Read When Needed
30
31- Read `references/style-rules.md` before designing a new scene or judging whether the result still feels like Ian Xiaohei.
32- Read `references/svg-layering.md` before writing or editing the SVG structure.
33- Read `references/motion-rules.md` before writing GSAP animation.
34
35## Output Contract
36
37Default output folder:
38
39```text
40output/<slug>-xiaohei-svg-motion/
41```
42
43Required files:
44
45```text
46index.html
47README.md
48preview.png
49vendor/gsap.min.js
50```
51
52Optional files:
53
54```text
55source.png # reference image, if provided by the user
56cue-map.md # when aligning to spoken script or subtitles
57```
58
59## Reusable Assets
60
61AI model and interface icons live in:
62
63```text
64assets/icons/
65```
66
67Use `assets/icons/index.json` as the source of truth. Keep original SVG files in subfolders and inline their complete SVG content into scene SVGs during generation, so gradients, strokes, and brand colors are preserved.
68
69Icon rules:
70
71- If `index.json` already has the exact model, provider, or semantic icon, use that icon. Do not replace ChatGPT, Claude, Flash lightning, Step, DeepSeek, Qwen, bug, table, chart, database, or web icons with generic boxes, stars, sparks, or abstract marks.
72- When the user provides a new SVG icon, save the raw SVG under `assets/icons/<category>/`, add an entry to `index.json`, and then reference it by id in the scene plan.
73- For comparison scenes, icon choice is part of the meaning. Keep model icons visually consistent in size and placement so the viewer can identify the actors before Xiaohei starts moving objects.
74
75## Template
76
77Use `assets/templates/xiaohei-comic-motion/` as the starter when the request resembles a hand-drawn comic scene with moving objects, arrows, annotations, or a Xiaohei action.
78
79Use `assets/templates/xiaohei-series-reference/` when the request asks for multiple variants, a reusable series, or a broader reference set for 口播 explanation scenes.
80
81Copy the template into the project output folder, then edit:
82
83- SVG group names.
84- Handwritten labels.
85- Object positions.
86- Timeline labels and durations.
87- README notes for the scene-specific metaphor.
88
89## Quality Gate
90
91Before final response:
92
93- Open the HTML in a local server.
94- Check console for errors.
95- Capture a static screenshot with `?static=1`.
96- Capture at least one playback mid-frame when the scene has multiple beats. If available, use `?frame=mid` for a deterministic review frame.
97- Visually inspect that text, arrows, Xiaohei, props, belts, pits, cards, and final impact points do not overlap.
98- Confirm the animation has visible progression: context first, action second, problem/result third, summary last.
99- Confirm annotations appear only after the object/action they explain.
100- Remove decorative or semi-transparent guide arrows if the object motion already shows direction.
101- Confirm Xiaohei is part of the action.
102- Confirm the page is not just a PNG in an `<img>` tag unless the user explicitly asked for PNG-only camera moves.
gabrielmoreira