Skip to main content

Documentation Index

Fetch the complete documentation index at: https://hyperframes.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

Open Design is an open-source, local-first alternative to Claude Design. It runs on your laptop with pnpm tools-dev, deploys the web layer to Vercel, and delegates to whichever coding-agent CLI you already have on your PATH (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen, Copilot, Hermes, Kimi, Pi) — or to any OpenAI-compatible BYOK endpoint. Open Design produces a valid first draft of a HyperFrames composition — palette, scene content, GSAP entrance tweens, mid-scene activity, and shader transitions. You then download the project and refine in any AI coding agent with linting and live preview.

​
Get started

1

Download the instruction file

Open open-design-hyperframes.md on GitHub and click the download button (↓) to save it.
2

Run Open Design locally

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm tools-dev run web
# open the web URL printed by tools-dev
3

Drop the file into a skill, or attach it to chat

Recommended: copy open-design-hyperframes.md to skills/hyperframes-handoff/SKILL.md inside the Open Design repo. The daemon auto-discovers it on the next request and exposes it as a skill in the picker. Or: start a new chat and attach the file directly — Open Design reads attachments natively.
4

Describe your video

Pick the hyperframes-handoff skill (or your active prototype skill), pick a design system or visual direction, and type the brief. Include screenshots, brand assets, or a palette if you have them.
5

Save the project to disk

Open Design writes index.html, preview.html, README.md, and a DESIGN.md snapshot into .od/projects/<id>/. Click Save to disk or download as a project ZIP.
6

Refine in any AI coding agent

The Open Design project folder is already a real on-disk working directory. Hand it off to Claude Code, Cursor, Codex, or any agent with terminal access:
cd .od/projects/<id>
npx skills add heygen-com/hyperframes   # install skills (one-time)
npx hyperframes lint                     # should pass with zero errors
npx hyperframes preview                  # open the studio
Drop into skills/, don’t paste into chat. Open Design’s daemon reads SKILL.md files at request time and injects the side files (templates, references) automatically. A pasted URL or chat attachment works, but the skill path gives you the full pre-flight pipeline (template injection + 5-dimensional self-critique gate).

​
Which setup to use

SurfaceRecommended setup
Open Design (open-source)Drop open-design-hyperframes.md into skills/hyperframes-handoff/SKILL.md
Claude Codenpx skills add heygen-com/hyperframes, then use /hyperframes
Cursor / Codex / Gemini CLInpx skills add heygen-com/hyperframes
Claude Design (closed-source)Attach claude-design-hyperframes.md to your chat

​
How it works

The instruction file gives Open Design pre-valid HTML skeletons — the structural rules (data attributes, timeline registration, scene visibility, preview token forwarding) are already embedded. Open Design fills in the creative work:
  1. Palette + typography — driven by the active DESIGN.md (Open Design ships 72 systems out of the box, plus 5 deterministic visual directions when no brand is named) bound onto :root
  2. Scene content — text, images, layout inside .scene-content wrappers
  3. Animations — GSAP entrance tweens and mid-scene activity
  4. Transitions — hard cuts for most scenes, shader transitions at 2-3 key moments
Open Design’s 5-dimensional self-critique runs before emission, so the artifact arrives lint-clean and your coding agent can start refining immediately without structural fixes.

​
Example prompts

Feature announcement

Use the hyperframes-handoff skill. I just shipped dark mode for my app.
Make me a 15-second Instagram reel announcing it.

- App name: Taskflow
- Primary color: #6C5CE7
- The vibe is clean, minimal, dark
- Key stat: "47% of users requested this"

Founder pitch (BYOK with your own CLI)

Use the hyperframes-handoff skill on Codex CLI. 25-second LinkedIn video.

Problem: Sales teams waste 3 hours/day on manual CRM updates.
Solution: AutoCRM — AI that logs every call, email, and meeting.
Traction: 200+ teams, $1.2M ARR, 18% MoM growth.
CTA: autocrmhq.com

Use the Linear design system. Professional but not corporate.

Brand-driven (use one of the 72 design systems)

Use the hyperframes-handoff skill. Design system: Stripe. 10-second reel.
One big number: "$4.2 billion processed in Q1 2026"

Dark background, the number animates up from zero. Subtle, confident.
End with logo placeholder and "stripe.com"

Sparse brief (let it ask)

Use the hyperframes-handoff skill. 30-second launch video for Orbit.
Open Design’s RULE 1 always opens with a <question-form> before emitting code, so a sparse brief turns into one short question form (surface · audience · tone · brand · scale) instead of an AI-freestyle render.

​
What to include in your prompt

Open Design reads inputs in this order of reliability: active DESIGN.md > attachments > pasted content > web research > URLs.
Input typeWhat it gives Open Design
Active design system (72 shipped, switchable from picker)Full 9-section spec (color, typography, spacing, layout, components, motion, voice, brand, anti-patterns) — strongest source
Screenshots / PDFs / brand guidesPalette, typography, UI patterns, tone — read by the agent natively
Pasted hex codes, typefaces, copyAuthoritative for what they cover
Brand name (well-known)Open Design can WebFetch blogs, press, Wikipedia
SPA URL (React/Vue homepage)Returns near-empty shell — pivot to blog/press instead
The more specific your prompt, the better the output. Pick a design system or visual direction up front, then describe content.

​
Why use Open Design vs. Claude Design

Claude DesignOpen Design
LicenseClosedApache-2.0
CostPro / Max / TeamBYOK (free with your own CLI / API key)
Form factorWeb (claude.ai) onlyWeb app + local daemon (or deploy to Vercel)
Agent runtimeAnthropic only (Opus 4.7)10 CLI adapters + OpenAI-compatible BYOK proxy
SkillsProprietary31 file-based SKILL.md bundles, droppable
Design systemsProprietary72 shipped DESIGN.md systems
Filesystem-grade workspace❌✅ Real cwd, real Read / Write / Bash / WebFetch
If you want the Claude Design loop without lock-in, Open Design is the same artifact-first mental model — open, local, BYOK.

​
Known limitations

  • Render still happens locally — Open Design produces the HTML; npx hyperframes render and HDR encoding still need FFmpeg + Node 22+ on your machine.
  • In-pane preview is sandboxed iframe — full browser playback is reliable; for frame-accurate scrubbing use npx hyperframes preview after handoff.
  • Shader passthrough requires WebGL — same as the Claude Design path; Open Design’s iframe sandbox supports it.
  • Skill pre-flight is daemon-side — if you bypass the skill picker and paste raw HTML into chat, you lose the side-file injection and 5-dim critique gate. Use the skill.

​
The handoff to your coding agent

Open Design’s project folder is the agent’s cwd. There’s no “export then re-import” step — open Claude Code, Cursor, Codex, or any AI coding agent against the same directory: 
cd .od/projects/<your-project-id>
npx skills add heygen-com/hyperframes   # one-time setup
npx hyperframes lint                     # verify structure
npx hyperframes preview                  # open the studio
Then iterate the same way as the Claude Design path:
  • “Make scene 3’s entrance snappier”
  • “Add a counter animation to the stat in scene 5”
  • “Tighten the pacing — scenes 4 and 6 feel too long”
  • “Change the shader on transition 2 to glitch”

​
Next steps

Claude Design Guide

The closed-source flavor of the same workflow — useful when you don’t have a CLI on your laptop.

Prompt Guide

More prompt patterns for HyperFrames across Claude Code, Claude Design, Open Design, and other agents.