Skilloop

真实产出

在我们的机器上用本 Skill 渲染，未经修饰。
driftboard简报: examples/driftboard.json

如何使用

  1. 1

    复制安装提示

    登录后点击右侧黑色按钮，一键复制。

  2. 2

    粘贴给你的 agent

    在 Claude Code、Codex、Cursor 等工具里粘贴发送，它会自己装好。

  3. 3

    用一句话调用

    像下面这样说出你要做的东西，agent 会按这个 Skill 的流程来做。

你：/before-after-wipe 帮我做：SaaS 落地页首屏循环视频

示例对话，仅演示调用方式，不代表实际产出。

你会得到

  • 1280x720 MP4（10 秒），顺滑的揭示擦除
  • 前后标签、三个结果指标、结果标题
  • 有真实截图时可替换示意界面

适合

  • SaaS 落地页首屏循环视频
  • 工作流自动化与运营工具
  • 主打"改变"的广告素材

不适合

  • 实物商品前后对比照（请用图像 Skill）
  • 多步骤长教程

你需要

  • Node.js 22+ 与 FFmpeg
  • 无需 API Key，本地渲染
  • 笔记本上每次渲染约 1 分钟
许可证
Proprietary (Skilloop Pro)
作者
@Skilloop
版本
v1.0.0
产出
视频
生成方式
HyperFrames (Apache-2.0) · GSAP · headless Chrome + FFmpeg
支持:Claude CodeCodexCursor

由 Skilloop 制作与维护（Pro）。下方每个样例都由这个 Skill 原样产出。源码包为专有授权，非 MIT。

安装包内容

  • before-after-wipe/LICENSE
  • before-after-wipe/NOTICE
  • before-after-wipe/SKILL.md
  • before-after-wipe/examples/driftboard.json
  • before-after-wipe/examples/ledgerly.json
  • before-after-wipe/template/hyperframes.json
  • before-after-wipe/template/index.html
  • before-after-wipe/template/package.json

SKILL.md

Render a 10-second before/after product demo video: a messy "before" screen is wiped away to reveal a clean "after" dashboard, then an end card with the product name and outcome — HyperFrames (HTML → MP4). Use for transformation demos, SaaS before-after, workflow improvement clips, 前后对比视频, 效果对比.

Pro 解锁

Skilloop 原创可用 Pro 全包，也可单买某一个。简介与样例可预览；安装提示、ZIP 与 install.md 需要 Pro，或已购买该 Skill。

相关技能

新品倒计时预告片
ProSkilloop 原创
9s
视频

新品倒计时预告片

9 秒发布预告：3-2-1 倒计时、闪白、产品名逐字揭晓、发布日期胶囊，用你的品牌色本地渲染。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)
版本更新短片
ProSkilloop 原创
12s
视频

版本更新短片

把更新日志变成 12 秒"新功能"短片：版本徽章、三张功能卡片、行动号召结尾。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)
动态金句卡
ProSkilloop 原创
8s
视频

动态金句卡

竖版 8 秒金句视频：逐词弹出、关键词下划线动画、署名滑入。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)
数据滚动战报
ProSkilloop 原创
10s
视频

数据滚动战报

三个数字像里程表一样滚动上升并配进度条：里程碑、影响力报告、年度回顾，10 秒讲完。

Skilloop · v1.0.0 · Proprietary (Skilloop Pro)