tao-illustrate

name	tao-illustrate
description	手绘线稿风 SVG 插画 + 纯 CSS 动画(生长描线/弹出/摇曳),Anthropic 暖手工质感,零依赖、SSR 友好。当用户提到"手绘插画""线稿插画""hero 插画""植物/有机风格 SVG""描线动画""随风摇曳""KV 图形化"、或想给官网/落地页加克制的装饰性动画插图时使用。与 tao-react-motion 的区别:本 skill 不用 Framer Motion,输出纯 SVG + CSS 的 Server Component。
allowed-tools	Read, Agent
metadata	{"short-description":"手绘风 SVG 插画 + 纯 CSS 生长/摇曳动画"}

手绘风 SVG 插画(纯 CSS 动画)

本 skill 把「手绘线稿 SVG + 纯 CSS 动画」的完整技法封装为隔离执行:门面在此,引擎用 Claude 自带的 general-purpose subagent,大段组件代码不污染主对话。完整技法(风格原则、参数化形状、动画分层、时间轴、已知坑、验证方法、成品范例)在 references/playbook.md。

执行步骤

1. 立即 Read 本 skill 目录下的 references/playbook.md(完整技法手册)。
2. 立即用 Agent 工具:subagent_type: "general-purpose",把 playbook.md 全文 + 用户的插画需求(主题隐喻、放置位置、站点色板/设计 token、目标文件路径)拼成 prompt 传入,并提示子 agent 执行时只需用 Read/Write/Edit/Glob/Grep。不要在主对话里直接写组件。
3. 子 agent 产出 SVG 组件 + CSS 后返回;若当前环境可起 dev server 与浏览器工具,按 playbook 的「验证」一节用 WAAPI 定格截图核对生长中间帧与最终帧,再把结果简洁呈现给用户。

触发前先问清(若用户没说)

• 插画要表达什么隐喻?(风格服务于语义,不做纯装饰)
• 放在哪个区块、站点现有色板/字体气质是什么?
• 要不要动画;是否只要静态线稿。