Menu
将栅格 Logo 转换为语义化 SVG，并生成带 CSS 动画的独立 HTML、帧序列胶片条和拟合 QA 报告。适合品牌 Logo、图标、标识的动效设计。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
完成数字广告投放全链路规划与优化：投放策略、创意文案、受众定向、预算分配、效果复盘。
Bilibili 平台深度运营专家，擅长 B 站风格文案、视频投稿与动态发布管理。
完成商务拓展与战略合作关键工作：Outreach 文案、合作方案、条款要点、伙伴评估、BD Pipeline 规划。
帮助开发者理解代码库、定位符号与调用关系、审查代码质量、给出架构/目录规范建议。
Reviews Python code for bugs, style, and project conventions. Invoke when user asks for a review or advice on code.
moderation Skill 的兼容别名。新任务请优先使用 .agent/skills/moderation/SKILL.md。
| name | logo-motion |
| display_name | Logo 动画 / 标志动效 |
| description | 将栅格 Logo 转换为语义化 SVG，并生成带 CSS 动画的独立 HTML、帧序列胶片条和拟合 QA 报告。适合品牌 Logo、图标、标识的动效设计。 |
| version | 1.0.0 |
| category | media |
| tags | ["logo-animation","motion-design","svg","css-animation"] |
| allowed-tools | ["generate_logo_motion","trace_logo_to_svg"] |
本 Skill 基于 nolangz/pixel2motion（MIT License）的工作流，将静态 Logo 图转换成可交互的动画 HTML。
source_image_url: Logo 栅格图（PNG/JPG/WebP），建议背景干净、主体清晰。motion_brief: 自然语言动画需求，例如「科技感线条依次描绘」「柔和淡入并轻微上浮」「活泼弹跳」。style: 预设风格
subtle — 柔和克制，适合高端品牌energetic — 活泼弹性，适合年轻品牌cinematic — 电影感、层次 revealloop — 无缝循环reveal — 线条描绘、stroke-dashoffsetduration_ms: 动画总时长，默认 1500ms。| 产物 | 说明 |
|---|---|
html_url | logo_motion.html 独立动画页，可预览、慢放、重播 |
svg_url | 转换后的 SVG |
css_url | 驱动动画的 motion.css |
render_url | SVG 静态渲染图 |
strip_url | 关键帧胶片条 |
metrics | IoU 等拟合指标 |
trace_logo_to_svg 将栅格图描摹为 SVG，并做 headless-Chrome 拟合 QA。motion.css。animate_svg_showcase.py 打包成独立 HTML。prefers-reduced-motion。storage/outputs/，可通过 /api/media/<filename> 访问。CHROME_BIN 环境变量可覆盖自动检测）本 Skill 引用的脚本来自 nolangz/pixel2motion，保留其 MIT License，详见 LICENSE 文件。