A slide deck template that provides a controlled environment for AI coding agents (like Cursor) to generate beautiful, web-based slide decks. Built with real-time preview capabilities and precise formatting controls, this template serves as the development foundation for DeckSpeed - the AI-powered presentation generator by CoreSpeed.
This template provides a structured environment where AI coding agents can develop slide decks with immediate visual feedback:
- Real-time preview of slides as they're generated
- Precise paper format controls with multiple size options
- Clean, predictable architecture for AI-driven development
- Standardized component patterns for consistent results
- Multiple Paper Formats: Supports various standard sizes:
- ISO (A3, A4, A5)
- US (Letter, Legal, Tabloid)
- Presentation (4:3)
- Wide (16:9)
- Orientation Control: Switch between portrait and landscape
- Responsive Scaling: Automatically scales to fit any container while maintaining aspect ratio
- AI-Friendly Architecture:
- Clean, predictable structure for AI code generation
- Standardized component patterns
- Clear separation of concerns
- Consistent styling approach
- Real-time preview via iframe
- Well-defined boundaries for AI modifications
- Node.js 22.14 or later
- bun
- Clone the template repository:
git clone https://github.com/CoreSpeed-io/deckspeed-template.git
cd deckspeed-template- Install dependencies:
bun install- Start the development server:
bun dev- Open http://localhost:3000 in your browser
- Slides are named using descriptive keywords and a random number
- Format:
{descriptive-name}-{random-number}.tsx - The filename without the
.tsxextension serves as the slide's ID - Example: File
introduction-to-deckspeed-1123.tsxhas IDintroduction-to-deckspeed-1123
The deck can be previewed through two endpoints:
/by-id/{slide-id}- Access slide directly by its ID (e.g.,/by-id/introduction-to-deckspeed-1123)/by-index/{number}- Access slide by its position in the deck (e.g.,/by-index/1)
// src/slides/introduction-to-deckspeed-1123.tsx
export default function Slide() {
return (
<div className="w-full h-full flex items-center justify-center">
<h1 className="text-4xl font-bold text-gray-800">Your Beautiful Slide</h1>
</div>
);
}| Format | Dimensions (mm) | Aspect Ratio |
|---|---|---|
| A4 | 210 × 297 | ~1:1.414 |
| A3 | 297 × 420 | ~1:1.414 |
| A5 | 148 × 210 | ~1:1.414 |
| Letter | 215.9 × 279.4 | ~1:1.294 |
| Legal | 215.9 × 355.6 | ~1:1.647 |
| Tabloid | 279.4 × 431.8 | ~1:1.545 |
| Presentation | 254 × 190.5 | 4:3 |
| Wide | 320 × 180 | 16:9 |
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the Business Source License 1.1 (BSL).
See the LICENSE file for details.