Claude MarketplacesSubmit
nexu-io avatar

Video Hyperframes

nexu-io/open-design

This generates Remotion-compatible video animations as a series of HTML frames, each 1920×1080, designed to be fed directly into video rendering pipelines. You get 6-10+ sections depending on content density, each holding a single concept with cinematic typography (huge text, minimal copy) and composition rules baked in. It includes autoplay JavaScript with a progress bar and navigation, plus hidden metadata comments for duration and transitions that Remotion can parse. Think of it as a bridge format: Claude builds the storyboard as styled HTML frames, you pipe it to Remotion for MP4 export. The template enforces a hook-argument-CTA structure and a consistent dark-plus-neon color palette, so output feels intentional rather than random.

skills.sh installs
2.8K
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill video-hyperframes --agent claude-code

Installs into .claude/skills of the current project.

Files

【模板: 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。
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Categories
Design & UI/UX, Generative Media
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Design & UI/UX
1nexu-io avatardoc-kami-parchmentnexu-io/open-designWarm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.2.7Kskills.sh installs
2nexu-io avatarframe-flowchart-stickynexu-io/open-designSVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.2.7Kskills.sh installs
3nexu-io avatarimagegen-frontend-mobilenexu-io/open-designElite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile product1.8Kskills.sh installs
4nexu-io avatarimagegen-frontend-webnexu-io/open-designElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal1.8Kskills.sh installs
5plugin87 avatarimage-to-codeplugin87/ux-ui-agent-skillsTurn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, rad768skills.sh installs
6ihlamury avatarawwwards-ui-skillsihlamury/design-skillsAwwwards's UI design system. Use when building interfaces inspired by Awwwards's aesthetic - light mode, Inter font, 4px grid.587skills.sh installs