SuperAPI AI 工具集

vector-scene-layout

设计与创作

查看项目

更新于 10-16 03:15

技能介绍

用途:在已有 storyboard.json 后,搭建或修复 Remotion 项目、设计令牌、场景与静帧,检查文字过小、裁切和视频用色对比度。不负责写分镜、选素材、做动效与缓动、导出视频、成片质检,也不处理网页或幻灯片布局。

主要能力:用 npx create-video@4.0.522 --blank <name> 初始化项目,安装 @remotion/transitions、@remotion/google-fonts、@remotion/paths,并在 tsconfig.json 加 "resolveJsonModule": true。用脚本生成令牌而非手写像素:python3 "${CLAUDE_SKILL_DIR}/scripts/frame_tokens.py" --target linkedin-4x5 --target pptx-16x9 --ts > src/tokens.ts,令牌含宽高、安全边距、字号层级、最小字重、描边、图标尺寸、栅格与手机预览缩放。用 python3 "${CLAUDE_SKILL_DIR}/scripts/frame_tokens.py" contrast "#F5F7FF" "#0B1020" 检查品牌色对比。复制 assets/templates/ 中的 timeline.ts、fonts.ts、Video.tsx、SceneOnly.tsx、Root.tsx、scenes/ 到 src/,每个 beat 写一个 src/scenes/<beatId>.tsx 并注册。用 python3 "${CLAUDE_SKILL_DIR}/scripts/render_stills.py" storyboard.json --target linkedin-4x5 --out out/stills 渲染静帧,加 --phone 以 390 px 宽渲染,逐张目检。最后 npx tsc --noEmit 与 npx eslint src 须通过。

适用场景:需要为竖版或横版信息流、幻灯片等目标生成静态场景并检查可读性时。

限制:场景须为纯函数,不用 Math.random、Date.now、fetch 或 CSS 过渡;此处不加动效,后续交给 smooth-motion-choreography;时长与 fps 来自 storyboard 的 timeline.ts;字体需用 waitUntilDone() 配合 delayRender() 加载;帧 0 需能独立作为封面;分镜变更后应重新校验并重渲静帧,而非手改。Remotion 许可依据 animation.config.json 中的 remotion_license_basis 判断。