Getting started

Install

npx @open-frame/cli init my-frames
cd my-frames
npm run dev

The scaffolder generates a minimal workspace:

my-frames/
├── frames/
│   └── getting-started/
│       └── index.tsx       # your first frame
├── themes/                 # optional, shared design systems
├── open-frame.config.ts    # framework config
├── CLAUDE.md               # mirrors AGENTS.md
├── AGENTS.md               # agent rules
└── package.json

npm run dev boots the dev server on http://localhost:5173 (or the next free port) with hot module reload, the inspector, and the assets panel.

Author with an agent

Open the workspace in any agent-aware editor — Claude Code, Codex, Cursor, Windsurf, Zed, etc. From the agent prompt:

/create-frame for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic"

The skill walks the agent through scoping (topic & aesthetic, page count, density, motion), picks an id, plans the structure, and writes the pages under frames/<id>/index.tsx.

Iterate visually

1. Click any element in the browser preview.
2. Pick Comment and type a note — "use the accent colour on this title", "shrink to 88px", "swap to assets/cover.png".
3. Save. Comments are persisted as @frame-comment markers in the source.
4. Run /apply-comments in your agent. It rewrites exactly the flagged regions and clears the markers.

You can also edit text, font, weight, and colour directly from the inspector property panel — all edits buffer in memory until you press Save, so a batch lands as a single HMR write.

Build & deploy

npm run build      # static build to dist/
npm run preview    # preview the static build locally

The output is a plain static site — deploy to Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host.

What's next