# Ian Xiaohei SVG Motion

Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts...

- Repository: https://github.com/Agentchengfeng/chengfeng-videocut-skills (3168 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-10-10
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion -g -a claude-code -y`
Codex: `npx skills add Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion -g -a codex -y`
Cursor: `npx skills add Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion -g -a cursor -y`
Gemini CLI: `npx skills add Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

```text
idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review
```

## Workflow

1. Extract one cognitive anchor from the article, script, screenshot, or storyboard scene.
2. Choose one physical metaphor: sorting, carrying, bridging, leaking, catching, folding, weighing, opening, rerouting, or falling.
3. Make Xiaohei perform the core action. If removing Xiaohei does not change the meaning, redesign.
4. Design a 16:9 white canvas with one main scene, 35%+ whitespace, and 3-5 short handwritten annotations at most.
5. Build semantic SVG groups for every moving object.
6. Animate with GSAP timeline. Use `x`, `y`, `rotation`, `scale`, `opacity`, and SVG stroke drawing. Avoid layout animations.
7. Save both a playable HTML page and a static review screenshot.
8. 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:

```text
output/<slug>-xiaohei-svg-motion/
```

Required files:

```text
index.html
README.md
preview.png
vendor/gsap.min.js
```

Optional files:

```text
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:

```text
assets/icons/
```

The rest: https://github.com/Agentchengfeng/chengfeng-videocut-skills/blob/HEAD/plugins/chengfeng-videocut/skills/chengfeng-visual/animation-styles/ian-xiaohei-svg-motion/SKILL.md