Netizen: slides

Saturday, June 07, 2025

Product Specification: Cursor for Slides

📄 Product Specification: Cursor for Slides

🚀 Overview

Cursor for Slides is a slide presentation IDE that allows users to design, build, and deploy stunning, interactive, and data-rich slide decks using code (Markdown, JSX, or a custom DSL), while benefiting from Cursor’s AI-native developer experience — including autocomplete, AI refactoring, and live preview.

🧩 Key Features

1. Code-First Slide Authoring

Users write slides using a Markdown-like syntax or JSX/React-style components.
Live AI suggestions help build content, transitions, styles, and animations.
Supports themes, layouts, reusable components.

// Example syntax:
# Slide 1
Welcome to Cursor for Slides

---

# Slide 2
## Live coding preview
```js
const greet = (name) => `Hello, ${name}!`


#### 2. **Live Slide Preview**
- Right pane renders slide deck live as user types.
- Edits reflect in milliseconds — supports embedded charts, code, and AI-generated diagrams.

#### 3. **AI Assistance Built-In**
- Generate slide content based on outline.
- Rewrite, shorten, or expand slides via prompts.
- “Make it more visual”, “Add an animation here”, “Split into two slides”, etc.

#### 4. **Theme + Component System**
- Slide components: `<TitleSlide />`, `<CodeSlide />`, `<ChartSlide data={} />`
- Theming support with Tailwind, ShadCN, or custom CSS.
- Exportable design tokens.

#### 5. **Export + Sharing Options**
- Export to:
  - PDF
  - HTML
  - Notion
  - Reveal.js-compatible format
- Live shareable link (like Vercel Preview or Codesandbox Live)

#### 6. **Collaboration + Versioning**
- Git-backed.
- Real-time multiplayer with commenting.
- Branching, commits, history, rollback.

#### 7. **Embed + Interactivity**
- Live interactive components: quizzes, polls, charts, code runners.
- Embed YouTube, Figma, Twitter, CodePen.
- AI Q&A box built-in per slide.

---

## 🛠️ Tech Stack + How to Build It in Cursor

### 👨‍💻 Step-by-Step Using Cursor

#### Step 1: **Set Up Monorepo**
- Use Cursor's Next.js + Vite template.
- Two packages:
  - `slides-engine`: compiles Markdown/JSX to HTML.
  - `slides-editor`: frontend editor interface.

#### Step 2: **Editor Interface**
- File: `app/slides-editor/page.tsx`
- Use Monaco or CodeMirror as code editor.
- Set up live preview in adjacent pane using React hooks and `dangerouslySetInnerHTML` or a secure renderer.

```tsx
const [source, setSource] = useState<string>("")
const rendered = useMemo(() => renderSlides(source), [source])

Step 3: Rendering Engine

Use remark, rehype, MDX, or @mdx-js/react to parse code.
Custom slide renderer breaks content by ---.

Step 4: AI Commands

Integrate Cursor Copilot commands:
- /summarize slides
- /generate slide on climate change with bullet points
- /convert to bullet points + chart

const generateSlide = async (prompt: string) => {
  const response = await callOpenAI(prompt)
  return updateEditorContent(response)
}

Step 5: Export Engine

PDF: Puppeteer to print HTML.
HTML: Export as SPA.
GitHub Action for build + deploy to Vercel.

Step 6: Themes + Components

Tailwind CSS + shadcn/ui.
Theme toggle: light/dark/custom.

Step 7: Embed + Interactivity

Embed React Live to allow users to insert <LiveCode> blocks.
Integrate with charting libs like react-chartjs-2 or echarts.

🧠 AI Prompts Examples

“Create a slide deck on AI agents with 5 slides”
“Refactor this into an interactive coding presentation”
“Add illustrations on slides 2 and 4”
“Summarize this long text into 3 key bullet points for a slide”

🧾 Deliverables & Output

Output Type	Format	Notes
Slide Deck	`.html`, `.pdf`	Downloadable
Code	`.mdx`, `.tsx`	Editable
Live URL	Vercel/Netlify	Shareable
Git History	Git repo	Revisions

🧭 Future Additions

Plugin Marketplace (animations, chart types, integrations)
Speaker mode + presenter notes
Real-time audience Q&A powered by AI
Voice-over slide generation

Pages