motion-designer by ncklrs/startup-os-skills
npx skills add https://github.com/ncklrs/startup-os-skills --skill motion-designer为创建引人入胜、富有吸引力的视频提供专业的动效设计指导。此技能提供数十年的 After Effects 和动态图形知识,并将其应用于 Remotion 视频规范。
出色的动效设计结合了三个要素:
当调用此技能时,它会引导您创建详细的视频规范,包括:
输出是一份全面的规范文档,可与 /remotion-best-practices 无缝配合以实现。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
每个引人入胜的视频都遵循一个情感弧线:
吸引(0-5秒) → 立即抓住注意力
构建(5-30秒) → 建立背景并激发兴趣
高潮(30-70秒) → 以最大影响力传递核心信息
收尾(70-90秒) → 令人满意的结论和行动号召
专业的动态图形使用分层音频:
动态图形的时间遵循自然节奏:
创建视频规范时,请使用此结构:
对于每个场景,请指定:
## 场景 N: [名称] (Xs - Ys, 时长: Zs)
**视觉描述:**
[每个元素、位置、颜色、大小、排版的详细描述]
**动画细节:**
- 元素 1: [进入/行为] 从 Xs 到 Ys
- 元素 2: [移动/变换] 从 Xs 到 Ys
- 元素 3: [退出/转场] 从 Xs 到 Ys
**时间点:**
- 帧 0-30: [发生什么]
- 帧 30-60: [发生什么]
- 帧 60-90: [发生什么]
**音频:**
- 背景音乐: [音量级别,情绪]
- Xs 处的音效: [音效描述]
- Ys 处的音效: [音效描述]
**转场:**
[此场景如何过渡到下一个场景]
**焦点:**
[应该吸引观众注意力的地方]
包含 Remotion 特定的指导:
此技能生成的规范可直接映射到 Remotion 实现:
<Sequence> 组件useCurrentFrame()spring() 和 interpolate() 配置<Audio> 组件使用此技能创建规范后,请使用 /remotion-best-practices 来实现它。
| 类型 | 时长 | 结构 | 关键元素 |
|---|---|---|---|
| 微交互 | 1-3秒 | 单一动作 | 快速、干脆、清晰的反馈 |
| 解说视频片头 | 5-10秒 | 吸引 + 预告 | 粗体文字,简单概念 |
| 产品演示 | 15-30秒 | 问题 → 解决方案 | 展示,而非讲述 |
| 功能展示 | 30-60秒 | 构建 → 高潮 → 行动号召 | 多个场景,转场 |
| 品牌故事 | 60-120秒 | 弧线结构 | 情感旅程 |
| 教程 | 2-5分钟 | 逐步进行 | 清晰的进展,停顿 |
在最终确定视频规范之前:
关于特定方面的详细指导:
每周安装量
136
代码仓库
GitHub 星标数
9
首次出现
Jan 27, 2026
安全审计
安装于
opencode129
gemini-cli127
codex126
github-copilot125
cursor125
kimi-cli121
Expert motion design guidance for creating compelling, engaging videos. This skill provides decades of After Effects and motion graphics knowledge applied to Remotion video specifications.
Great motion design combines three elements:
When invoked, this skill guides you through creating detailed video specifications that include:
The output is a comprehensive specification document that works seamlessly with /remotion-best-practices for implementation.
Every engaging video follows an emotional arc:
Hook (0-5s) → Grab attention immediately
Build (5-30s) → Establish context and build interest
Peak (30-70s) → Deliver main message with maximum impact
Resolve (70-90s) → Satisfying conclusion and call-to-action
Professional motion graphics use layered audio:
Motion graphics timing follows natural rhythms:
When creating a video spec, use this structure:
For each scene, specify:
## Scene N: [Name] (Xs - Ys, Duration: Zs)
**Visual Description:**
[Detailed description of every element, position, color, size, typography]
**Animation Details:**
- Element 1: [entrance/behavior] from Xs to Ys
- Element 2: [movement/transform] from Xs to Ys
- Element 3: [exit/transition] from Xs to Ys
**Timing:**
- Frame 0-30: [what happens]
- Frame 30-60: [what happens]
- Frame 60-90: [what happens]
**Audio:**
- Background music: [volume level, mood]
- SFX at Xs: [effect description]
- SFX at Ys: [effect description]
**Transitions:**
[How this scene transitions to the next]
**Focus Points:**
[What should draw viewer attention]
Include Remotion-specific guidance:
This skill produces specifications that map directly to Remotion implementation:
<Sequence> componentsuseCurrentFrame()spring() and interpolate() configurations<Audio> components with timingAfter creating a spec with this skill, use /remotion-best-practices to implement it.
| Type | Duration | Structure | Key Elements |
|---|---|---|---|
| Micro-interaction | 1-3s | Single action | Fast, snappy, clear feedback |
| Explainer intro | 5-10s | Hook + tease | Bold text, simple concept |
| Product demo | 15-30s | Problem → Solution | Show, don't tell |
| Feature showcase | 30-60s | Build → Peak → CTA | Multiple scenes, transitions |
| Brand story | 60-120s | Arc structure | Emotional journey |
| Tutorial | 2-5min | Step-by-step | Clear progression, pauses |
Before finalizing a video spec:
For detailed guidance on specific aspects:
Weekly Installs
136
Repository
GitHub Stars
9
First Seen
Jan 27, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode129
gemini-cli127
codex126
github-copilot125
cursor125
kimi-cli121
shadcn/ui 框架:React 组件库与 UI 设计系统,Tailwind CSS 最佳实践
69,400 周安装
Elastic Observability SLO管理指南:创建、监控服务等级目标与SLI类型详解
204 周安装
CSS开发指南:Flexbox、Grid布局、响应式设计与性能优化最佳实践
199 周安装
OpenSpec (OPSX) 指南:基于工件的开发工作流系统,实现变更管理与自动化
202 周安装
React Testing Library 测试最佳实践:用户行为测试、查询优先级与异步处理指南
200 周安装
Web无障碍测试指南:WCAG合规、键盘导航与屏幕阅读器测试最佳实践
202 周安装
化学分析师技能:原子理论、热力学、光谱学、色谱法、合成路线规划与材料表征
200 周安装