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: trueand providechartType+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.