Communitygithub.com

jasonfast123/hyperframes-skills

将 Figma 内容导入到 HyperFrames 合成中——渲染的资产、品牌令牌、组件、故事板部分→重建的运动(帧被视为状态,而非幻灯片)(REST/CLI),在可用时通过连接器辅助运动,以及来自连接器或原生导出的着色器。当用户粘贴 figma.com 链接或要求将 Figma 设计、框架、Logo、品牌或动画导入到视频/合成中使用。

hyperframes-skills 是什么?

该技能将 Figma 设计内容无缝集成到 HyperFrames 合成中,支持渲染资产、品牌设计令牌、组件和故事板部分的导入。它能够将 Figma 帧转换为运动状态(而非传统幻灯片),通过 REST API 或 CLI 实现直接导入。当连接器可用时,技能会利用其辅助运动生成;同时支持从连接器或原生导出获取着色器效果。这为开发者提供了一种高效方式,将 Figma 设计元素(如帧、Logo、品牌和动画)直接转化为视频或动态合成中的可操作组件。支持的平台包括 HyperFrames 环境,并通过 REST/CLI 接口与 Figma 连接,适合需要在创意工作流中快速原型化和动画化 UI 设计的场景。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/product-launch-video

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

hyperframes-skills 是做什么的?

将 Figma 内容导入到 HyperFrames 合成中——渲染的资产、品牌令牌、组件、故事板部分→重建的运动(帧被视为状态,而非幻灯片)(REST/CLI),在可用时通过连接器辅助运动,以及来自连接器或原生导出的着色器。当用户粘贴 figma.com 链接或要求将 Figma 设计、框架、Logo、品牌或动画导入到视频/合成中使用。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

相关技能