Text-to-PPT — 文本转 HTML 演示文稿

Convert any text input into a visually stunning, single-file HTML presentation.

CRITICAL: Two-Phase Generation

ALWAYS use the two-phase approach. NEVER generate the full HTML in one shot.

Phase 1: Plan (fast, single call)

Read the input text, then produce a slide-by-slide outline in JSON format:

{
  "title": "Presentation Title",
  "language": "zh-CN",
  "density": "detailed",
  "theme": "dark",
  "slides": [
    {
      "number": 1,
      "type": "title",
      "heading": "Main Title",
      "content": "Subtitle or tagline",
      "layout": "centered",
      "notes": "Visual: large title with accent underline"
    },
    {
      "number": 2,
      "type": "content",
      "heading": "Section Title",
      "points": ["Point 1", "Point 2", "Point 3"],
      "layout": "bullets",
      "hasData": false,
      "notes": "Use numbered badges for each point"
    },
    {
      "number": 3,
      "type": "chart",
      "heading": "Key Metrics",
      "chartType": "bar",
      "chartData": {
        "labels": ["A", "B", "C"],
        "datasets": [{"label": "Sales", "data": [100, 200, 150]}]
      },
      "points": ["Insight 1", "Insight 2"],
      "layout": "split",
      "hasData": true,
      "notes": "Left: chart, Right: insights as stat cards"
    }
  ]
}

Rules for Phase 1:

Output ONLY the JSON plan. No HTML. No explanation.
Identify data points → mark hasData: true and provide chartType + chartData
Choose layout: centered, bullets, split, grid, timeline, cards, fullchart, quote
Target 8-15 slides. Never exceed 20.
This should take <10 seconds.

Phase 2: Generate (parallel, page-by-page)

Read references/design-system.md — this is where the full design spec lives.

Then generate HTML for each slide independently. Each slide is a self-contained <div class="slide"> block.

For each slide, the agent should:

Take ONE slide from the plan (by number)
Read only the design system reference if not already loaded
Generate ONLY that one slide's HTML <div class="slide">...</div>
No <html>, no <head>, no <body> — just the slide div

BATCHING: Generate slides in parallel using sub-agents. Spawn up to 5 sub-agents simultaneously, each generating 1-2 slides.

Phase 3: Assemble

After all slides are generated:

Read the shell template from references/shell-template.html
Insert all slide divs into the shell
Ensure chart canvas IDs are unique across all slides
Save to Obsidian vault: ~/Documents/longhai/Longhai/
Tell user the file path

Execution Strategy

When running as the main agent:

Phase 1 yourself (fast, just JSON)
Write the plan to a temp file
Spawn sub-agents for Phase 2 (parallel slide generation)
Collect results and assemble in Phase 3

Sub-agent task format (for Phase 2):

Generate HTML for slide {N} of a presentation.

SLIDE PLAN:
{JSON for this specific slide}

DESIGN SYSTEM: Read references/design-system.md for theme colors, components, and rules.

OUTPUT: Return ONLY a single <div class="slide" style="background-color: #0f172a;">...</div> block.
No <html>, <head>, or <body> tags. Use inline styles. Include <script> for Chart.js if this slide has charts.
Use unique canvas ID: chart-slide{N}-{random}.

Input Sources

Directly pasted text
A file path — read it first with read
A URL — fetch it first with web_fetch
An Obsidian note path — read it first

Output

Single self-contained HTML file
File naming: {topic-slug}.presentation.html
Default save location: ~/Documents/longhai/Longhai/
Tell the user the file path

Theme Options

| Theme | Background | Text | Cards | Accent | |-------|-----------|------|-------|--------| | dark (default) | slate-900 | slate-50 | slate-800 | blue-500/amber-500 | | light | slate-50 | slate-900 | white | blue-600/amber-600 | | tech | gray-950 | emerald-50 | gray-900 | cyan-500/violet-500 | | warm | stone-900 | amber-50 | stone-800 | orange-500/rose-500 |

User can specify a theme. Default: dark.