Claude Design Hyperframes
Inside Claude Design only: generate a brand-accurate, structurally valid HyperFrames video draft (HTML + CSS + paused GSAP) the user zips and polishes in Claude Code with the main `hyperframes` skill.
Overview
Claude Design HyperFrames is an agent skill for the Validate phase that produces a valid, brand-accurate HyperFrames video draft from pre-valid skeletons inside Claude Design only.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill claude-design-hyperframesWhat is this skill?
- Template-first HyperFrames: plain HTML + CSS + paused GSAP timeline—no React, Babel, or built-in Animated video skill
- Explicit role split: Claude Design for brand/layout/first-pass motion; Claude Code for lint, preview, and timing polish
- CLI render path documented: `npx hyperframes render index.html` produces MP4 from authored HTML
- Replaces default video-artifact flows—do not use `copy_starter_component` for this medium
- Pre-valid skeletons so downloaded ZIP opens in HyperFrames tooling without structural repair
Adoption & trust: 2k installs on skills.sh; 25.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need an on-brand motion draft in Claude Design but default video artifacts use the wrong stack and break the HyperFrames HTML→MP4 pipeline.
Who is it for?
Creators prototyping branded short videos in Claude Design who plan to refine timing and render with HyperFrames locally.
Skip if: Claude Code, Cursor, or Codex sessions—use the `hyperframes` skill instead; also skip if you need a final rendered MP4 without a local polish step.
When should I use this skill?
You are running inside Claude Design and need a valid HyperFrames video draft using pre-valid skeletons (not Claude Code/Cursor/Codex).
What do I get? / Deliverables
You get a downloadable HyperFrames ZIP with valid HTML/CSS/GSAP structure so you can invoke the `hyperframes` skill in Claude Code for animation polish and production render.
- Valid HyperFrames project ZIP (HTML + CSS + paused GSAP)
- Brand-accurate scene layout and first-pass animation structure
Recommended Skills
Journey fit
Validate → prototype is the canonical shelf because the skill outputs a first-pass motion composition draft before full build or launch-grade rendering. Prototype subphase matches template-first drafts meant for download and refinement—not final MP4 production in the design surface.
How it compares
Claude Design entry for draft scaffolding; pair with the `hyperframes` skill for agent-side production QA—not React/Babel animated video components.
Common Questions / FAQ
Who is claude-design-hyperframes for?
People working in Claude Design who want HyperFrames-native video drafts with correct brand and layout before handing off to a coding agent.
When should I use claude-design-hyperframes?
During validate when you are prototyping launch or marketing motion creative; use only inside Claude Design for the first draft, then polish after download in build-adjacent tooling.
Is claude-design-hyperframes safe to install?
It authors local HTML projects without mandating exchange API keys; review the Security Audits panel on this Prism page and treat downloaded project files like any untrusted archive before running render commands.
Workflow Chain
Then invoke: hyperframes
SKILL.md
READMESKILL.md - Claude Design Hyperframes
# Claude Design + HyperFrames (Template-First) Your medium is **HyperFrames compositions**: plain HTML + CSS + a paused GSAP timeline. The CLI (`npx hyperframes render index.html`) turns the HTML into an MP4. You author the HTML -- the user renders locally. **HyperFrames replaces your default video-artifact workflow.** Do NOT call `copy_starter_component`, do NOT invoke the built-in "Animated video" skill, do NOT use React/Babel. Plain HTML + GSAP only. --- ## Your role **You produce a valid first draft -- not a final render.** Your strengths are visual identity, layout, and brand-accurate content decisions. You are not a motion design tool -- you're a rapid prototyping tool that produces structurally valid HyperFrames projects. The user's workflow: 1. **Claude Design** (you) -- brand identity, scene content, layout, first-pass animations, shader choices 2. **Download ZIP** -- user gets a valid HyperFrames project 3. **Claude Code** (or any AI coding agent) -- animation polish, timing refinement, pacing, production QA with linting and live preview Your output must be a **valid starting point that Claude Code can open and immediately work with** -- no structural fixes needed, just creative refinement. ### What you optimize for (your strengths) - Correct brand identity from attachments (palette, typography, tone) - Strong visual layout per scene (hierarchy, spacing, readability) - Scene content that tells the story (headlines, stats, copy, imagery) - Structural validity (passes `npx hyperframes lint` with zero errors) - Appropriate shader transition choices for the mood - Reasonable scene count and durations for the video type ### What Claude Code polishes after you (refinement, not creation) You create ALL the animations, transitions, and mid-scene activity. Every scene ships with entrance tweens, breathing motion, and shader transitions. The video plays with full motion from your first draft. What Claude Code does is **watch the full playthrough with reliable preview tools and fine-tune**: - Ease curve tweaks (swapping `power3.out` for `expo.out` after seeing it play) - Stagger timing adjustments (0.12 → 0.08 feels tighter for this specific scene) - Scene duration micro-adjustments (scene 4 drags at 4.5s, trim to 3.8s) - Adding richer mid-scene activity where a scene feels too static after playback - Shader swaps (this `cinematic-zoom` should be `whip-pan` for the energy shift) - Production QA (snapshot verification, cross-browser testing) Think of it as: **you create the first cut of the film, Claude Code does the edit bay refinement.** --- ## How this works You get a **pre-valid skeleton** that already passes the HyperFrames linter. Your job: 1. Read the brief, pick a skeleton 2. Fill in the palette + typography (CSS custom properties) 3. Fill in scene content (text, layout inside `.scene-content`) 4. Fill in GSAP animations (timeline blocks marked per scene) 5. Verify the preview, deliver the ZIP The skeleton handles the structural rules -- data attributes, timeline registration, HyperShader wiring, initial visibility, `preview.html` token forwarding. You focus on the creative work. **What you can change:** CSS custom properties, scene content, animation tweens, scene count (add/remove scenes following the rules below), shader choices, durations. **What you must not touch:** The `<script>` loading order, `window.__timelines` initialization, the `.scene.clip` class on scene containers, the `.scene-content` wrapper inside each scene, the `preview.html` structure. --- ## Step 1: Understand the brief **Gate:** You can name the subject, duration, aspect ratio, and at least one source of visual direction. ### Inputs, in order of reliability 1. **A