---
title: Getting started
description: Spin up your first deck in under a minute.
---

## Install

```npm
npx @open-slide/cli init my-deck
cd my-deck
npm run dev
```

The scaffolder generates a minimal workspace:

```text
my-deck/
├── slides/
│   └── getting-started/
│       └── index.tsx       # your first slide
├── themes/                 # optional, shared design systems
├── open-slide.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:

```text
/create-slide 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 `slides/<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 `@slide-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
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

<Cards>
  <Card title="Create a slide" href="/docs/flow/create-slide" />
  <Card title="Present mode" href="/docs/core-feature/present-mode" />
  <Card title="Agent skills" href="/docs/skills/overview" />
</Cards>