excalidraw-slides（excalidraw slides 搜索）

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.

1. Read Content: Analyze the user's input text.
2. Load System Prompt: Read resources/prompt.md to understand the outlining strategy.
3. 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.

1. 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.

1. 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:

1. Read next 2-3 unchecked items from slides_list.md
2. Call Task tool with subagent_type="general-purpose"
3. 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"

1. Wait for completion and verify all files exist
2. Mark items as completed in slides_list.md

Detailed Steps (for Sequential or Batch):

1. Locate Project: Find the project folder containing slides_list.md.
2. Read Checklist: Open slides_list.md.
3. Find Next Task: LOCATE the first unchecked item (- []) OR next 2-3 unchecked items (for batch).

- *If all checked, stop.*

1. 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.

1. 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

1. 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...).

1. Update Checklist: Edit slides_list.md to mark items as completed (- [x]).
2. 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.