Auto-invoked
od-contribute
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or…
@nexu-ioInstall Skill/video-hyperframes
Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
Claude Code
$ npx -y skills add nexu-io/open-design --skill video-hyperframes --agent claude-code
Codex
$ npx skills add nexu-io/open-design --skill video-hyperframes -a codex -y
Cursor
$ npx skills add nexu-io/open-design --skill video-hyperframes -a cursor -y
Gemini CLI
$ npx skills add nexu-io/open-design --skill video-hyperframes -a gemini-cli -y
GitHub Copilot
$ npx skills add nexu-io/open-design --skill video-hyperframes -a github-copilot -y
OpenCode
$ npx skills add nexu-io/open-design --skill video-hyperframes -a opencode -y
Windsurf
$ npx skills add nexu-io/open-design --skill video-hyperframes -a windsurf -y
SKILL.md
video-hyperframes.SKILL.mdname: video-hyperframes
zh_name: "Hyperframes 视频脚本"
en_name: "Hyperframes Video"
emoji: "🎞️"
description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
zh_description: "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
en_description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
recommended: 5
tags: ["video", "hyperframes", "remotion", "视频"]
example_id: sample-hyperframes-workflow
example_name: "Hyperframes · AI workflow 视频"
example_format: markdown
example_tagline: "8 帧自动播放, 含进度条 + 元数据"
example_desc: "电影感动画脚本, 可直接喂给 Remotion 做成 mp4"
example_source_url: "https://github.com/heygen-com/hyperframes"
example_source_label: "heygen-com/hyperframes"
od:
mode: video
surface: video
scenario: video
featured: 0.13
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: false
example_prompt: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"【模板: Hyperframes 视频帧】
- 输出 N 个连续 `<section class="frame">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定 (短脚本 6-10 帧起步, 长脚本应更多, 每帧只承载一个镜头/概念)。
- 每帧表达一个镜头/概念: 文字 + 视觉构图 (中央构图 / 黄金分割 / 三分法)。
- 每帧底部隐藏标记 `<!-- frame:N duration:3000 transition:fade -->` 供后续 Remotion / Hyperframes 渲染脚本读取。
- 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。
- 第 1 帧是 hook (一个数据 / 一个反常识 / 一个问题), 第 2-N 是论证, 最后是结论 + CTA。
- 字号巨大 (text-9xl), 一句话即可, 不要堆砌。
- 配色统一一套电影感 (深色背景 + 1 个霓虹强调色)。
- 输出最后包含一段简短注释 `<!-- HYPERFRAMES_META: ... -->`, 包含每帧 duration / transition / sceneSummary 的 JSON 元数据, 用于后续转 Remotion。
Read more
name: video-hyperframes
zh_name: "Hyperframes 视频脚本"
en_name: "Hyperframes Video"
emoji: "🎞️"
description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
zh_description: "Hyperframes / Remotion 兼容的连续帧动画, 可自动播放"
en_description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support."
category: video
scenario: video
aspect_hint: "1920×1080 (16:9)"
recommended: 5
tags: ["video", "hyperframes", "remotion", "视频"]
example_id: sample-hyperframes-workflow
example_name: "Hyperframes · AI workflow 视频"
example_format: markdown
example_tagline: "8 帧自动播放, 含进度条 + 元数据"
example_desc: "电影感动画脚本, 可直接喂给 Remotion 做成 mp4"
example_source_url: "https://github.com/heygen-com/hyperframes"
example_source_label: "heygen-com/hyperframes"
od:
mode: video
surface: video
scenario: video
featured: 0.13
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: false
example_prompt: "Use the Hyperframes Video template to turn my content into a Hyperframes / Remotion-compatible continuous frame animation with autoplay support. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「Hyperframes 视频脚本」模板把我的内容做成一段「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"【模板: Hyperframes 视频帧】
- 输出 N 个连续 `<section class="frame">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定 (短脚本 6-10 帧起步, 长脚本应更多, 每帧只承载一个镜头/概念)。
- 每帧表达一个镜头/概念: 文字 + 视觉构图 (中央构图 / 黄金分割 / 三分法)。
- 每帧底部隐藏标记 `<!-- frame:N duration:3000 transition:fade -->` 供后续 Remotion / Hyperframes 渲染脚本读取。
- 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。
- 第 1 帧是 hook (一个数据 / 一个反常识 / 一个问题), 第 2-N 是论证, 最后是结论 + CTA。
- 字号巨大 (text-9xl), 一句话即可, 不要堆砌。
- 配色统一一套电影感 (深色背景 + 1 个霓虹强调色)。
- 输出最后包含一段简短注释 `<!-- HYPERFRAMES_META: ... -->`, 包含每帧 duration / transition / sceneSummary 的 JSON 元数据, 用于后续转 Remotion。
Ships withopen-design
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.
107k170 skills1 MCP
Stars on GitHub
Momentum
- stars in total
- 106.9k
Other skills on open-design.
@nexu-ioInstall SkillAuto-invoked
8-bit-orbit-video-temp…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
@nexu-ioInstall SkillAuto-invoked
ad-creative
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad…
@nexu-ioInstall SkillAuto-invoked
after-hours-editorial-…
Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and…
@nexu-ioInstall SkillAuto-invoked
agent-browser
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages,…
@nexu-ioInstall SkillAuto-invoked
ai-music-album
Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album…
@nexu-ioInstall SkillMore skills from other plugins.
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
@nextlevelbuilderInstall Skillimpeccable
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
@pbakausInstall Skilldiagram-design
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…
@cathrynlaveryInstall Skillanimate
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…
@emilkowalskiInstall SkillQuestions about video-hyperframes.
- Which coding agents can use video-hyperframes?
- video-hyperframes installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.