--- slug: generate-presentation name: generate-presentation version: "1.0.0" displayName: Generate Presentatio summary: "从Markdown/URL/主题生成专业HTML与PDF演示文稿(社区下载版)" or topics. Creates ... license: MIT description: |- Generate professional HTML and PDF presentations from markdown content, URLs, or topics。Creates。Use when 需要生成营销文案、写作内容、标题优化、内容创作时使用。不适用于纯技术文档撰写。适用于独立开发者、企业团队和自动化工作流场景。 tags: - Knowledge tools: - - read - exec pricing_tier: "L4" pricing_model: "monthly" suggested_price: 99.9 --- # Generate Presentation You are a presentation designer. Your job is to create beautiful, professional presentation slides that match the visual style found in the `references/` folder. ## Workflow Follow these steps exactly in order: ### Step 1: Gather Content Ask the user what the presentation should contain. The user may: * Provide a topic and let you generate the content * Provide a URL — fetch it with the WebFetch tool and extract the key content * Provide a markdown file path — read it with the Read tool and use its structure as slide content * Provide the content directly as text * Provide a combination of the above If `$ARGUMENTS` is provided, use it as the starting point. Detect the input type: * If it ends in `.md` or `.markdown` — treat it as a **markdown file path**. Read the file with the Read tool and use its content to generate slides. Use headings (`#`, `##`) as slide titles/breaks, and body text as slide content. * If it starts with `http://` or `https://` — treat it as a **URL**. Fetch it with WebFetch and extract key content. * Otherwise — treat it as a **topic description** and generate content from it. **Markdown file conventions:** When the source is a markdown file, interpret its structure as follows: * `# Top-level heading` → Presentation title (first slide) * `## Second-level heading` → New slide title (each `##` starts a new slide) * `### Third-level heading` → Section heading within a slide * Bullet lists (`-` or `*`) → Slide bullet points * Numbered lists (`1.`, `2.`) → Ordered content on a slide * Bold text (`**text**`) → Emphasized/highlighted text on slides * Regular paragraphs → Slide body text (keep concise, split long paragraphs) * `---` (horizontal rule) → Explicit slide break (alternative to using `##`) * Images (`![alt](path)`) → Include the referenced image on the slide if the file exists If the markdown has no `##` headings, split content into logical slides automatically (aim for one key idea per slide). Ask clarifying questions if needed: * How many slides? (if not obvious from the markdown structure) * What is the target audience? * Any specific points to emphasize? ### Step 1.5: Draft Content and Get User Approval **This step applies when the input is NOT an existing `.md` file** (i.e., the user gave a topic, URL, or plain text). If the user already provided a `.md` file, skip to Step 2 — the content is already approved. Before building any slides, generate a **content draft** as `presentation/content.md` and ask the user to review it. **Process:** 1. Based on the gathered content (from topic, URL, or text), write `presentation/content.md` following the markdown format described in Step 6. 2. Tell the user: "I've drafted the slide content at `presentation/content.md`. Please review it and let me know if you'd like any changes before I start designing." 3. **STOP and wait for the user's response.** Do NOT proceed to Step 2 until the user confirms. 4. If the user requests changes — edit `content.md` accordingly and ask again. 5. If the user approves (e.g., "looks good", "go ahead", "ok") — proceed to Step 2. This ensures the user controls the narrative before any design work begins. It prevents wasted effort on slides with wrong content. **Tip:** When drafting from a URL or topic, keep slides concise. Aim for: * 1 key idea per slide * Max 3-5 bullet points per slide * Short sentences, not paragraphs ### Step 2: Analyze Design References Read ALL image files in the `references/` folder using the Read tool (it can read images): ```text Glob pattern: references/*.{png,jpg,jpeg,webp,PNG,JPG,JPEG,WEBP} ``` Study the reference images carefully. Extract the design language: * **Color palette**: Primary, secondary, accent, background colors (extract exact hex values) * **Typography style**: Font weight, size hierarchy, letter spacing feel * **Layout patterns**: How content is arranged, spacing, alignment * **Visual elements**: Shapes, gradients, borders, shadows, decorative elements * **Overall mood**: Minimal, bold, corporate, playful, etc. If no reference images exist, inform the user and use a clean, modern default style (dark background, sans-serif fonts, generous whitespace). ### Step 3: Create HTML Slides Create a single HTML file at `presentation/slides.html` containing all slides. Requirements: * Each slide is a full-viewport section (100vw x 100vh) * Use inline CSS — no external dependencies * Use web-safe fonts or Google Fonts via CDN link * Include navigation: arrow keys to move between slides, slide counter * The visual style MUST match the reference images as closely as possible * Each slide should have a `data-slide-number` attribute (1-indexed) * Slides should be stacked vertically, with JS handling viewport snapping Use the template structure in [templates/slide-template.html](/api/v1/skills/generate-presentation/file?path=templates%2Fslide-template.html&ownerHandle=nhype) as a starting point but adapt the styling entirely to match the references. Slide content guidelines: * Title slide: presentation title, subtitle, author/date if relevant * Content slides: use bullet points, short sentences, visuals descriptions * Keep text concise — presentations are visual, not documents * Use consistent spacing and alignment across all slides * Add visual variety: some slides text-heavy, some minimal, some with diagrams ### Step 3.5: Generate Illustrations and Images **IMPORTANT: You MUST actively generate images for the presentation.** Do not skip this step. Every presentation benefits from visuals. Go through each slide and decide what image would enhance it, then generate it. Use the **OpenAI GPT Image MCP server** to generate images. Create the `presentation/images/` directory first. **For EACH slide, evaluate and generate:** 1. **Title/hero slides** → Generate a background illustration or key visual (always) 2. **Concept slides** → Generate an illustration representing the idea (e.g., architecture diagram, workflow visualization, metaphor image) 3. **Data/stats slides** → Consider generating infographic-style visuals 4. **Closing slides** → Generate a memorable visual or branded graphic **How to generate:** * Use `mcp__openai-gpt-image-mcp__create-image` with a detailed prompt. In the prompt, specify: + The subject matter clearly + The color palette from the reference design (e.g., "dark background with red accents #e63226") + The style (e.g., "minimal flat illustration", "abstract geometric", "tech-themed") + `size: "1536x1024"` for landscape, `"1024x1024"` for square + `output: "file_output"` with `file_output` path like `presentation/images/slide_3_illustration.png` + `quality: "high"` for hero images, `"medium"` for supporting visuals * Use `mcp__openai-gpt-image-mcp__edit-image` to refine any generated image that doesn't fit well. **Embed images in the HTML** using relative paths: ```html ``` **Aim for at least 2-3 generated images per presentation.** More is better unless the user says otherwise. **Only skip image generation when:** * The user explicitly says no images * The slide is purely a short bullet list where text alone is clear enough ### Step 4: Screenshot and Validate Each Slide After creating the HTML file: 1. Open the HTML file in the browser using the Playwright MCP tools: text ``` Use mcp__plugin_playwright_playwright__browser_navigate to open the file ``` 2. Set the viewport to 1920x1080 (standard presentation aspect ratio): text ``` Use mcp__plugin_playwright_playwright__browser_resize with width=1920, height=1080 ``` 3. For EACH slide: a. Navigate to the slide (use keyboard arrow keys via mcp__plugin_playwright_playwright__browser_press_key with "ArrowDown" or "ArrowRight") b. Take a screenshot: `mcp__plugin_playwright_playwright__browser_take_screenshot` saving to `presentation/slide_N.png` c. Read the screenshot with the Read tool to visually inspect it d. Read the reference images again for comparison e. Compare the screenshot against the reference design: * Does the color scheme match? * Does the layout feel similar? * Is the typography style consistent? * Are visual elements (shapes, gradients) similar? f. If the slide does NOT match the reference style well enough: * Identify what's wrong * Edit the HTML/CSS to fix the issues * Reload and re-screenshot * Repeat until the slide matches the reference style g. Move to the next slide ### Step 5: Convert to PDF After all slides are validated, convert the slide screenshots to a single PDF. Run the bundled Python script: ```bash python3 /scripts/slides_to_pdf.py presentation/ presentation/presentation.pdf ``` Where `` is the path to this skill's directory (e.g., `.claude/skills/generate-presentation`). This script: * Finds all `slide_*.png` files in the presentation directory * Sorts them by slide number * Combines them into a single PDF (one slide per page, 1920x1080 aspect ratio) * Outputs to `presentation/presentation.pdf` If the script fails (missing dependencies), install them: ```bash pip install Pillow ``` ### Step 6: Export Content as Markdown Generate a `presentation/content.md` file that contains the **final text content** of every slide in an editable markdown format. This file serves as a single source of truth — the user can edit it and ask you to regenerate the presentation from it. Format: ```markdown ## Slide 2: Slide Title Here Body text of the slide goes here. - Bullet point one - Bullet point two - Bullet point three ## Slide 3: Another Slide Title More content here. **Bold text** for emphasis. 1. Numbered item one 2. Numbered item two --- ## Slide N: Final Slide Title Closing content. ``` Rules for `content.md`: * Start with `# Title` matching the title slide * Each subsequent slide starts with `## Slide N: Title` * Include ALL text exactly as it appears on the slides (not paraphrased) * Preserve bullet lists, numbered lists, bold text, and emphasis * Use `---` between sections if a slide has no heading * If a slide has a generated image, note it: `![description](images/filename.png)` * Do NOT include CSS, HTML, or layout instructions — only content This allows the user to: 1. Open `content.md`, edit any text 2. Run `/generate-presentation presentation/content.md` to regenerate with updated content ### Step 7: Deliver Tell the user: * The HTML presentation is at `presentation/slides.html` (interactive, can be opened in browser) * The PDF is at `presentation/presentation.pdf` * Individual slide images are at `presentation/slide_N.png` * **The editable content is at `presentation/content.md`** — edit this file and run `/generate-presentation presentation/content.md` to regenerate with changes ## Important Notes * Always create the `presentation/` directory before writing files * The HTML must be completely self-contained (inline styles, no external CSS files) * Target 1920x1080 resolution (16:9 aspect ratio) for all slides * Keep slide count reasonable (5-15 slides unless user specifies otherwise) * If Playwright tools are not available, inform the user and skip the screenshot/validation step * If Python is not available, inform the user and provide just the HTML + screenshots ## 依赖说明 ### 运行环境 - **Agent平台**: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等) - **操作系统**: Windows / macOS / Linux ### 依赖说明 | 依赖项 | 类型 | 是否必需 | 获取方式 | |:-------|:-----|:---------|:---------| | LLM API | API | 必需 | 由Agent内置LLM提供 | ### API Key 配置 - 本Skill基于Markdown指令,无需额外API Key(除内容中明确标注的外部API) ### 可用性分类 - **分类**: MD+EXEC(纯Markdown指令,部分功能需要exec命令行执行能力) - **说明**: 基于Markdown的AI Skill,通过自然语言指令驱动Agent执行任务 ## 核心能力 - Generate professional HTML and PDF presentations from markdown content, URLs, or topics - 触发关键词: generate, presentations, professional, presentation, html ## 适用场景 | 场景 | 输入 | 输出 | |------|------|------| | 基础使用 | 用户请求 | 处理结果 | **不适用于**：需要人工判断的复杂决策场景 ## 使用流程 1. 确认运行环境满足依赖说明中的要求 2. 根据适用场景选择合适的使用方式 3. 执行操作并检查输出结果 4. 如遇错误，参考错误处理章节 ## 示例 ### 示例1：基础用法 ``` 输入: 用户请求 处理: 根据使用流程执行 输出: 处理结果 ``` ## 错误处理 | 错误场景 | 原因 | 处理方式 | |---------|------|---------| | 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 | | 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 | | 网络错误 | 连接超时或不可达 | 检查网络连接后重试，参考国内替代方案 | ## 常见问题 ### Q1: 如何开始使用Generate Presentatio？ A: 请先阅读使用流程章节，确认环境满足依赖说明中的要求。 ### Q2: 遇到错误怎么办？ A: 请参考错误处理章节，按照表格中的处理方式操作。 ### Q3: Generate Presentatio有什么限制？ A: 请参考已知限制章节了解具体限制。 ## 已知限制 - 需要LLM支持，无LLM环境无法使用 - 复杂场景可能需要人工辅助判断 - 性能取决于底层模型能力