📄 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/reactto 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-2orecharts.
🧠 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
