手绘插画

SKILL前端设计
前端设计 未标注权限 许可证不明确
安装这个技能

把一张插画图片渲染成白板手绘动画视频:白底静置 → 线稿逐区手绘 → 逐区刷色 → 收尾渐变成品。渲染器与手部素材随包自带,不依赖任何绝对路径,可在任意工作目录直接运行。 适用场景:图片转手绘动画、白板动画视频、教学与科普插图动效、封面预热短片。 工作流(四步,逐步确认) 1. 自动分区——对图片做区域分割,输出掩码与标注 JSON,按画面显著性排序 2. 参数预检——渲染前必须确认配方(硬性停机点),确认后的预设可跨机完全一致复现 3. 渲染——骨架追踪笔迹 + 沿轨迹刷色,输出 H.264 4. 验收——抽帧校验白底帧与收尾帧亮度、总时长,交付成片 默认输出:1920×1080 @30fps,10 秒(白底 0.5s + 线稿 6s + 彩稿 2.3s + 收尾 1.2s),画布纯白 #FFFFFF,H.264 编码(ffmpeg → PyAV → mp4v 三级降级)。 依赖:Python 3.10+,pip install -r requirements.txt(opencv-python / numpy / scikit-image / av)

一句话选型结论

按资料字段整理

手绘插画是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install zhenningtech/handdraw-video-zhenning
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方zhenningtech仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 enterprise
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-11-06上游最后核验时间 · 数据更新 2026-11-06
正文体量7.3 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
手绘插画当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

7.3 KB
模型实际读到的说明书原文,来自技能仓库

handdraw-video 手绘白板动画视频

把一张插画渲染为三阶段白板动画:白底静置 → 线稿逐区手绘 → 彩稿逐区刷色 → 收尾渐变成品。渲染器与手部素材全部随包自带,不依赖任何绝对路径,可在任意工作目录下运行。

前置依赖

Python 3.10 及以上,安装依赖:

pip install -r requirements.txt

等价于:

pip install opencv-python numpy scikit-image av

> 注意:PyPI 包名是 av(不是 pyav,pyav 不存在会导致安装失败)。Python 3.13 实测可用组合:opencv-python 5.x + numpy 2.x + scikit-image 0.26 + av 18.x。
> 转码依赖为三级降级:系统 ffmpeg → PyAV → mp4v,装了 av 即可保证 H.264 输出。

标准工作流(四步,逐步确认)

第 1 步:分区

对输入图片做自动分区(生成掩码 + 标注 JSON):

python scripts/auto_segment.py --src "<输入图绝对路径>" --out "<项目目录>" --batch 8 --total-ms 10000
  • 产出:<项目目录>/masks-auto/auto-XX.png、annotation-auto.json、qa/auto-masks-preview.png
  • --batch:分区批次数量,默认 8(画面元素多可加到 10~12)
  • --total-ms:总时长毫秒,默认 10000
  • 关键约束:脚本只把底图复制为项目目录下的 input-original.jpg 一次,之后运行不再覆盖(防底图反复 JPEG 压缩导致骨架漂移)。更换原图时必须先手动删除旧的 input-original.jpg。

第 2 步:参数预检(渲染前必做 · 硬性停机点)

铁律:渲染前必须先给用户「执行方式选择」,拿到明确答复后才能进入渲染。禁止跳过选择直接按默认参数渲染——这是本技能最高优先级约束,优先于任何「直接做」的指令。

python scripts/build_config.py --ask choice.md --preset-out pending.json
  1. 脚本生成 choice.md(执行方式选择单)+ pending.json(当前预设)
  2. 把选择单完整展示给用户,二选一:
    - 选 1「直接按默认执行」 → 用 pending.json 直接进入第 3 步
    - 选 2「自定义参数」 → 生成完整参数确认单并渲染到回复里:
    bash python scripts/build_config.py --ask confirm.md --preset-out pending.json --ask-mode confirm
    用户提出修改(如「总时长 15 秒」)→ 落到 pending.json → 重新展示表格再确认 → 确认后才进入第 3 步
  3. 确认后生成渲染命令:
python scripts/build_config.py --preset pending.json --out cmd.txt \
  --image <输入图> --annotation <annotation-auto.json> --output <输出.mp4>
  • 防呆机制:不带 --preset 且非真人终端时,脚本拒绝生成渲染命令([block] 提示),因此不能绕过确认流程
  • 自动校验:四段时长之和 vs 总时长、宽高偶数、ink_share 合法性
  • 跨机复用:确认后的 preset.json 拷到其他机器即得完全一致的渲染命令

第 3 步:渲染

用预检输出的命令渲染(后台运行,1080p 约需 5~10 分钟):

python scripts/render_stream_whiteboard.py "<img>" "<annotation>" "<out.mp4>" \
  "<技能包>/assets/user-marker-hand.png" \
  --ink-path skeleton --color-fill brush --pause off \
  --gaze-fade-ms <fade_ms> --draw-start-ms <white_ms> --ink-share <share> \
  --ink-budget 0.1 --canvas "#FFFFFF" --fps <fps> --cap-long-edge <long_edge> \
  --tip-anchor-x 0.005 --tip-anchor-y 0.363 --hand-height 560

手素材位置参数(第 4 个位置参数)绝不可省略——省略会回退到内置铅笔手。渲染命令末行输出 OUTPUT=<路径>。

第 4 步:验收

抽帧校验:白底帧均亮 ≈251、收尾帧均亮 ≈200、时长 = 总时长 ±0.1s。交付 mp4 给用户目检手部外观是否为马克笔手。

标准配方

参数 默认值 说明
总时长 10s 可按需调整
白底 0.5s --draw-start-ms 500
线稿 6s ink_share = 线稿 / (线稿 + 彩稿)
彩稿 2.3s
收尾 1.2s --gaze-fade-ms 1200
分辨率 1920×1080 @30fps --cap-long-edge 1920 --fps 30
画布 #FFFFFF
笔迹 skeleton(骨架追踪,含 Chaikin 平顺 + 滑窗平滑)
染色 brush(沿轨迹刷 + 墨线浓度软混合)
ink-budget 0.1 笔手写 10% 关键笔画,其余整线浮现
手素材 assets/user-marker-hand.png 1271×940 真透明
笔尖锚点 x=0.005, y=0.363 手高 560px

可调参数速查(build_config.py 交互项)

total_s / white_s / ink_s / color_s / fade_s(时间轴五段)、width / height / fps(画质)、canvas / ink_path / color_fill / ink_budget / pause(画法)、tip_anchor_x / tip_anchor_y / hand_height(手素材对齐)。全部参数都有默认值,改动后脚本即时校验合法性。

故障排查

  • 线条有颗粒感:确认用的是本包渲染器(含软混合),勿用旧的二值揭示渲染器
  • 成片与历史版本不一致:先查底图是否被反复压缩(第 1 步约束),再查渲染器版本
  • 手不是马克笔手:渲染命令漏传第 4 个位置参数(手素材路径)
  • 输出尺寸异常:宽高须为偶数;cap_long_edge 按长边等比缩放并对齐网格
  • 非 16:9 输入图:输出分辨率随源图长宽比缩放(如 4:3 图 → 1920×1440),属正常行为
  • 渲染末尾报清理错误(exit=1):收尾删除临时文件 output_raw.mp4 被系统安全钩子拦截,成片 output.mp4 通常已完整生成——先校验时长/亮度,合格后手动删除 output_raw.mp4 即可,无需重渲
  • 收尾段手不消失:gaze-fade 阶段的设计就是「手部平滑游走 + 彩稿渐显」,最后一帧仍带手属预期行为,不是 bug
  • QA 时长打印异常:抽帧脚本手动计算时长时若除数是帧率对象而非浮点,可能打出荒谬值;以 帧数 / fps 手算为准
  • 中文路径读图失败:脚本统一用 cv2.imdecode(np.fromfile(...)) 读取,若自行改写请注意不要直接用 cv2.imread

常见问题

5 问
答案由本站依据条目字段整理
手绘插画怎么安装?

在支持 Skills 的客户端里执行:skillhub install zhenningtech/handdraw-video-zhenning。安装方式为未标注。装完刷新技能列表或重开客户端。

手绘插画支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

手绘插画权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

手绘插画收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

手绘插画用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-11-06。