Excalidraw Slide Generator

Transform text into professional Excalidraw slide decks (16:9 aspect ratio) using a robotic, resumable 2-phase workflow.

Core Philosophy

Act as a Presentation Designer. The goal is not just to put text on a canvas, but to visualize ideas.

Extract Content: Avoid copy-pasting. Summarize, simplify, and structure text into bullet points or punchy headlines.
Visual Hierarchy: Use size, color, and position to guide the eye.
16:9 Canvas: All work happens in 1600x900 pixel frames.

Workflow (Resumable & Robust)

Follow this 2-phase process to ensure stability and fault tolerance.

Phase 1: Planning (Outline)

Trigger: When the user provides a topic or content but NO project folder exists.

Read Content: Analyze the user's input text.
Load System Prompt: Read resources/prompt.md to understand the outlining strategy.
Create Project Folder:
- Generate a kebab-case folder name from the topic (2-4 words).
- Example: "AI Coding Assistant" → ai-coding-assistant/
- Example: "Climate Change Solutions" → climate-change-solutions/
- Create this folder in the root directory.
Generate Outline: Create slides_list.md inside the project folder.
- This file must be a Markdown checklist (- [ ]).
- Each item represents one slide.
- Include nested bullets for Narrative, Content, Visuals, and Layout for EACH slide.
Stop: Notify the user that the outline is ready for review.

Phase 2: Execution (Generation)

Trigger: When slides_list.md exists in a project folder (either just created or user provided).

Execution Strategy: Use sub-agents for efficiency. You have two options:

Option A: Sequential Generation (Default)

Generate one slide at a time
Good for: Early validation, user feedback iterations

Option B: Batch Generation with Sub-Agent (Recommended for speed)

Use Task tool to generate 2-3 slides in parallel
Good for: Finalizing complete decks, faster iteration

Batch Generation Workflow:

Read next 2-3 unchecked items from slides_list.md
Call Task tool with subagent_type="general-purpose"
Prompt: "Generate these N slides following the workflow below. For each slide:
- Read SKILL.md to understand Phase 2 execution steps
- Generate Excalidraw JSON for each slide
- Generate SVG illustration for each slide (theme is in the outline)
- Save each slide file
- Report back with file paths created"
Wait for completion and verify all files exist
Mark items as completed in slides_list.md

Detailed Steps (for Sequential or Batch):

Locate Project: Find the project folder containing slides_list.md.
Read Checklist: Open slides_list.md.
Find Next Task: LOCATE the first unchecked item (- [ ]) OR next 2-3 unchecked items (for batch).
- If all checked, stop.
Generate Slide:
- Extract the details (Narrative, Content, Visuals, Layout) for that specific slide.
- Select the matching layout from resources/slide-patterns.md.
- Generate the Excalidraw JSON.
Generate SVG Illustration (Always required - theme from outline):
- Extract SVG theme from the "视觉画面" section in slides_list.md.
- Read SVG prompt template from resources/svg-prompt.md.
- Use Task tool to generate SVG code:
  - Call Task tool with subagent_type="general-purpose"
  - Prompt: "Read resources/svg-prompt.md. Using that template, generate SVG code for theme: '[EXTRACTED SVG THEME]'. Output ONLY the SVG code, no explanations."
  - Wait for completion and capture the output
  - Verify the output is valid SVG code (starts with <svg, contains </svg>)
- Generate unique 32-character hexadecimal file ID (use openssl rand -hex 16).
- Save SVG as [folder-name].illustration-[N].svg in project folder.
- Embed SVG in markdown file:
  - Add ## Embedded Files section between ## Text Elements and ## Drawing
  - Format: [fileId]: [[filename.svg]] (e.g., e9c970134433484397edf4ca2699fd74355d9c22: [[ai-coding-assistant.illustration-01.svg]])
  - Add image element to JSON elements array with fileId matching the ID above
  - Keep files object as empty {}
- See examples/svg-embed-example.md for complete reference
Save File: Save as [folder-name].Slide-[N].excalidraw.md inside the project folder.
- Example: ai-coding-assistant/ai-coding-assistant.Slide-01.excalidraw.md
- N is the slide number (01, 02...).
Update Checklist: Edit slides_list.md to mark items as completed (- [x]).
Loop: REPEAT step 3-7 until you decide to stop for user feedback or finish all slides.

Output Format (Slide Files)

Follow this output structure precisely:

⚠️ CRITICAL: JSON Format Requirements

The JSON output must be valid JSON without any comments

DO NOT use // comments inside the JSON block

DO NOT use trailing commas

DO NOT use unquoted keys

All strings must use double quotes " not single quotes '

NO nested double quotes in values: Use single quotes ' inside text values

✅ Correct: "text": "He said 'hello'"

❌ Wrong: "text": "He said \"hello\"" (causes JSON parsing errors)

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{JSON 完整数据}
\`\`\`
%%

Coordinate System & Frames

Slide Size: 1600 (width) x 900 (height).
Positioning: Since files are separate, always place the Frame at x: 0, y: 0.
Frames: Use Frame elements (type: "frame") for all slides.
- All elements for a slide must be visually inside the frame's bounds.
- Crucial: element frameId must point to the parent frame's id.

Styled Elements

Typography

Font: Use fontFamily: 5 (Excalifont) for a hand-drawn look, or 1 (Virgil) if requested.
Sizes:
- Title: 60-80px
- Subtitle / Header: 36-48px
- Body: 20-28px
- Small: 16px

Colors (Theme) - "Warm Paper & Morandi"

Use this specific palette for all slides.

Canvas Background: #F0EEE6 (Warm Cream).
Text Main: #1A1A1A (Charcoal).
Text Secondary: #4A4A4A (Dark Gray).
Brand Accent: #D97757 (Terracotta) - for Headers, key highlights, buttons.
Card/Shape Backgrounds:
- Sand: #EBE5D5 (Default for containers)
- Sage: #D1E0D7
- Lavender: #D0D0E3
- Soft Red: #E09F87

JSON Structure Template

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "slide-frame",
      "type": "frame",
      "x": 0, "y": 0, "width": 1600, "height": 900,
      "name": "01 Title",
      "backgroundColor": "#F0EEE6"
    },
    {
       "id": "title-text",
       "type": "text",
       "x": 800, "y": 450,
       "text": "Presentation Title",
       "textAlign": "center",
       "strokeColor": "#1A1A1A",
       "frameId": "slide-frame"
    }
  ],
  "appState": { "viewBackgroundColor": "#F0EEE6" },
  "files": {}
}

References

Core Resources

resources/prompt.md: System prompt for generating the outline (emphasizes text hierarchy and layout over visuals).
resources/slide-patterns.md: Standard layouts (Title, Content, Split, Grid).
resources/excalidraw-schema.md: JSON element reference (colors, shapes, text).
resources/svg-prompt.md: SVG illustration prompt template for Anthropic-style graphics.

Examples

examples/project-structure.md: Directory structure and file naming conventions.
examples/slides_list.md: Sample outline file structure.
examples/pitch-deck.md: Complete JSON example (3 slides).
examples/svg-embed-example.md: SVG embedding guide with file ID generation and positioning.

excalidraw-slides