SVG PPT Maker

This skill generates professional presentation slides in SVG format, styled with a modern business-tech aesthetic (blue theme, geometric accents). It produces a set of SVG files, an HTML viewer to browse them like a slideshow, and a narration script file.

Output Directory Convention

All output files MUST be saved under temp/<topic-slug>/ (e.g., temp/skill-md-ppt/). Never write to the project root or any directory other than temp/. Create the directory before writing files:

New-Item -ItemType Directory -Force -Path "temp\<topic-slug>"

Usage Workflow

1. Understand Requirements: Confirm the course title, author, and content outline with the user.
2. Plan Content: Propose a slide-by-slide breakdown (Cover -> Content Pages -> Back Cover).
3. User Confirmation: CRITICAL STEP - You MUST present the slide-by-slide outline to the user and wait for their explicit confirmation before proceeding. Do not generate any SVGs until the user approves the outline.
4. Pre-flight: Before generating any SVG, run the base64 icon extraction command (see "C哥出品" Icon note below) and keep the value ready. This avoids re-reading the reference file for every slide.
5. Generate SVGs: Once confirmed, generate the SVG files directly. Do NOT use any external scripts or templates. You must write the SVG code yourself, ensuring it follows the style guide below. Save each slide as a numbered SVG file (e.g., 1.svg, 2.svg) in the target directory.
6. Generate Narration Script: Create a scripts.js file in the same directory containing the narration for each slide.
7. Create Viewer: MANDATORY — Use the Read tool to read assets/viewer_template.html into memory first, then replace {{TOTAL_SLIDES}} and save as index.html. NEVER write index.html from scratch or from memory. The template already contains the full viewer UI (thumbnails, drawing tool, narration panel, etc.).

User Preferences & Critical Lessons (Auto-Added)

⚠️ CRITICAL USER PREFERENCES — READ BEFORE GENERATING:

1. Beginner-Friendly Terminology: Since this is a course for beginners, avoid unnecessary technical jargon that isn't the focus of the lesson. However, DO NOT ban terms entirely. If a term is essential for understanding (even if technical), use it but explain it simply. The goal is clarity for beginners, not artificial avoidance of terms.
2. Visual Alignment: On the Cover page, the footer text (e.g., "C哥出品") MUST be visually centered with its icon, forming a cohesive capsule or unit. It must NOT be right-aligned or touching the slide border.
3. Universal Actionability: Ensure ALL content is actionable. For tools, include URLs. For concepts, explain "how to use it". For mistakes, show "what to do instead". Don't just present information; give the user a way to act on it.
4. Pain Point Visualization: Don't just show "Before vs. After". Show the Process of the mistake (e.g., "Manual Deletion -> Waste of Time").
5. Workflow: Focus on the New AI-enabled workflow. Don't waste space on obsolete manual workflows unless contrasting specific pain points. Use Chinese terms (e.g., "提示词" instead of "Prompt").

Style Guide & Reference

⚠️ CRITICAL WARNING — COMMON FAILURE MODE: The most frequent mistake is generating a dark-background cover (e.g., dark navy #1e3a5f or #0f2340 gradient) instead of the correct white-background cover with a right-side blue arrow.

STRICT RULE:

1. The slide background MUST be fill="#ffffff" (White).
2. NEVER use a dark gradient as the full slide background.
3. The blue accent is ONLY the right-side arrow polygon (<path d="M 900 0 L 1200 0 L 1200 600 L 900 600 L 660 300 Z" fill="url(#arrowGrad)"/>).
4. Always verify your cover matches references/example_cover.svg exactly before saving.

You must generate the SVG code directly. To maintain a consistent modern business-tech aesthetic, you MUST STRICTLY refer to the example SVG files in references/ directory (e.g., references/example_content.svg). Do not invent your own styles if a reference exists.

• Aspect Ratio: 2:1 (1200x600)
• Colors:
  • Primary: Royal Blue (#3b82f6, #2563eb)
  • Accents: Light Blue, Green, Orange, Purple (used for column cards)
  • Background: White with subtle geometric shapes (e.g., light blue circles or polygons in the corners)
• Typography: Sans-serif (Microsoft YaHei, PingFang SC)
• Layouts:
  • Cover: Left-aligned title and subtitle. CRITICAL TITLE RULES:
    1. The cover has two lines of text: the top line (subtitle/pre-title) and the bottom line (main title).
    2. Font Sizes: The top line MUST have a SMALLER font size (e.g., 32px, gray color .subtitle). The bottom line MUST have a LARGER font size (e.g., 60px to 80px, prominent color .title).
    3. Content Split: The text must be readable from top to bottom. The bottom line MUST contain the core keywords and be the main focus. If the full title is long, put the context/introductory part in the top line, and the core subject in the bottom line. The top line should generally NOT be longer than the bottom line.
    4. Layout: You MUST calculate the text length of the main title to ensure it does not overlap with the blue arrow background on the right.
    5. The cover MUST include the "C哥出品" text and its corresponding base64 icon at the bottom left.
  • Content: Title at the top left. Content divided into 1 to 4 columns. Each column should look like a card with a subtle shadow and a colored top border.
  • Back Cover: Centered "谢谢观看" (Thank You) or similar closing text. CRITICAL: It MUST ONLY have the main "谢谢观看" text. It MUST NOT have any subtitle, English translation, or extra text below it. It MUST include the "C哥出品" text and its corresponding base64 icon at the bottom left. The Back Cover template is distinct from the Cover template.

Note on "C哥出品" Icon: The base64 string for the "C哥出品" icon is embedded in references/example_cover.svg. To extract it instantly, run this one-liner in PowerShell (from the workspace root):

$svg = Get-Content ".ai\skills\svg-ppt-maker\references\example_cover.svg" -Raw; ([regex]::Match($svg, 'data:image/png;base64,([A-Za-z0-9+/=]+)')).Groups[1].Value

Copy the output and use it directly as the href value: <image href="data:image/png;base64,PASTE_HERE" .../>. The icon dimensions are width="120" height="40", positioned at the bottom-left of the slide (e.g., x="40" y="548").

SVG Self-Check Checklist (自检清单)

MANDATORY: Before finalizing each SVG slide, run through this checklist mentally:

1. 优先浅色背景：在设计卡片、表格行、信息块时，优先使用浅色背景（如 #f8fafc、#eff6ff、#fff7ed、#f0fdf4 等），搭配深色字体，从根本上规避深色背景导致的文字对比度不足问题。只有在需要强调或视觉区分时才使用深色背景块，且必须确保内部文字为白色。
2. 深色背景 → 浅色字体：凡是背景色为深色（如 #1e40af、#1e3a5f、#dc2626、#0284c7、#ea580c 等深色系），其内部所有文字的 fill 必须为浅色（#ffffff 或接近白色）。严禁在深色背景内使用深色字体（如 #bfdbfe、#7c2d12、#7f1d1d、#0c4a6e 等）。
3. 浅色背景 → 深色字体：浅色背景（如 #eff6ff、#fff7ed、#fef2f2）内使用深色字体（如 #1f2937、#374151）。
4. 对比度检查：每个文字元素的 fill 颜色与其所在矩形/背景的 fill 颜色必须有足够对比度，确保可读性。
5. CSS 类覆盖陷阱（CRITICAL）：SVG <style> 中定义的 CSS 类（如 .node-body { fill: #374151; }）优先级高于 HTML 属性写法 fill="#ffffff"，会将其覆盖为灰色，导致深色背景上的文字不可见。正确做法：凡是需要覆盖 CSS 类 fill 的文字，必须使用 style="fill:#ffffff" 内联样式写法，而非 fill="#ffffff" 属性写法。例如：
   • ❌ 错误：<text class="node-body" fill="#ffffff">文字</text>（CSS 类会覆盖 fill 属性，文字变灰）
   • ✅ 正确：<text class="node-body" style="fill:#ffffff">文字</text>（内联 style 优先级最高，文字保持白色）
   • 排查方法：生成 SVG 后，检查所有深色背景上的文字，若其 CSS 类在 <style> 中定义了 fill 颜色，则必须改用 style="fill:..." 写法。
6. 无推广内容：SVG 内容中严禁出现"关注公众号"、"扫码关注"等任何推广性文字。
7. 结束页固定：最后一页必须直接复制 references/example_end.svg，不得自行创作。

Layout Patterns (排版模式)

对比表格（Comparison Table）

当需要展示两个概念的多维度对比时，使用三列结构：行标签列 | 左侧概念列 | 右侧概念列。

关键规范：

• 行标签列独立：每一行的维度标签（如"工作方式"、"记忆能力"）必须放在独立的第一列，严禁与内容文字共用同一 <text> 坐标，否则会产生文字重影。
• 三列分隔线：用两条垂直 <line> 明确划分三列边界，配合水平分隔线形成清晰网格。
• 交替行背景：奇数行用 #f8fafc，偶数行用 #ffffff，增强可读性。
• 列头颜色区分：左侧（弱势/普通）列头用暖色（如 #fef2f2 背景 + #dc2626 文字），右侧（优势/推荐）列头用冷色（如 #eff6ff 背景 + #1d4ed8 文字）。
• 底部总结行：在表格下方用小卡片展示"适用场景"等总结信息，与表格主体用分隔线隔开。

Content & Terminology Rules

1. Concrete Examples & Visual Structures: PPTs must NOT be purely abstract. For complex concepts (e.g., "Feedback Loops", "Architectures", "Mechanisms"), you MUST provide concrete, real-world examples directly on the slide.
   • Visual Logic: If a concept is a loop (e.g., feedback loop), the SVG layout MUST visually represent a loop (e.g., circular arrows, connected nodes forming a cycle). Do not just use linear columns for cyclical concepts.
   • Example Integration: The concrete example must be integrated into the visual structure (e.g., showing how a specific user action flows through the loop).
2. Visual Diagrams for Relationships/Processes: For relational concepts (e.g., the relationship between four core components) or process flows, you MUST use visual diagrams (shapes, arrows, flowcharts, overlapping circles, etc.) to represent their logic and sequence. DO NOT just use simple bulleted lists for these concepts.
3. Chinese-First Terminology: All PPTs targeting Chinese users must use Chinese terminology primarily.
   • The first time a concept appears, you can include the English term in parentheses for assistance.
   • Exception: If an English term is universally used in the Chinese context (e.g., "MCP", "API"), keep it in English.
   • Example: Use "智能体" instead of "Agent".

Narration Script (解说词)

You must generate a scripts.js file that contains the narration for each slide.

• Strict Alignment: The narration MUST perfectly align with the content shown on the SVG slide. If the slide shows a specific example or a 3-step process, the script MUST explain that exact example and those exact 3 steps. Do not introduce disconnected concepts in the script that are missing from the slide.
• The narration must comprehensively explain the PPT content without just reading the text on the slides.
• It must include ALL the rich details from the user's provided reference materials, ensuring no details are lost. This is for a detailed course, not just a brief overview. The script must be extensive and thorough.
• 口语化、深度与长度（CRITICAL）：
  • 解说词必须是自然口语，像真人讲课一样流畅，禁止出现分点论述（如"第一、第二"）、小标题冒号（如"核心要点："）、Markdown 格式符号（如 **、-、\n\n）。
  • 每页解说词写成一段连续的文字，不换行、不分段，方便演讲者直接朗读，避免翻页。
  • 长度强制要求：每页解说词必须达到 150～300 字，严禁少于 150 字。解说词的字数必须远多于对应 SVG 幻灯片上的文字总量，否则视为不合格。
  • 深度要求：解说词不能只是复述幻灯片上的文字，必须对每个概念进行展开解释，说清楚"为什么"和"怎么理解"。要用比喻、类比、举例等方式帮助听众加深理解（例如：把某个技术概念比作日常生活中的场景）。
  • 自检标准：生成解说词后，必须自问："如果听众只听这段解说，不看幻灯片，他们能完全理解这页的核心内容吗？"如果答案是否，则必须重写。
• 禁止内容：解说词中严禁出现"关注公众号"、"扫码"、"点赞"、"转发"等任何推广性内容。
• The format of scripts.js must be a global JavaScript object named slideScripts, where keys are slide numbers (1, 2, 3...) and values are the HTML/text narration content.

Example scripts.js:

const slideScripts = {
    1: '大家好，欢迎来到本次课程。今天我们将深入探讨智能体的核心概念，看看它为什么正在重塑整个 AI 应用格局。',
    2: '先说最核心的定义。智能体不只是回答问题，它会主动规划、执行、调用工具，直到把任务完成。我们可以用一个公式来概括：智能体等于大模型加规划能力加记忆系统加工具调用，这四个组件缺一不可。',
    // ...记得使用单引号包裹
};

注意：scripts.js 中的解说词一定要使用单引号包裹，避免其中的双引号影响语法正确性！！

Back Cover (结束页)

CRITICAL: The last slide MUST always use the fixed template from references/example_end.svg. Do NOT create a custom back cover SVG. Copy the file directly:

Copy-Item ".ai\skills\svg-ppt-maker\references\example_end.svg" -Destination "path\to\output\N.svg" -Force

Where N is the last slide number. This ensures a consistent, branded ending across all presentations.

Tools

assets/viewer_template.html

A template for the HTML viewer. Replace {{TOTAL_SLIDES}} with the actual number of slides generated. The viewer supports fullscreen mode and automatically loads scripts.js to display the narration at the bottom without obstructing the SVG.

CRITICAL — NEVER write index.html from scratch. You MUST always read assets/viewer_template.html first (using the Read tool), then replace {{TOTAL_SLIDES}} and save as index.html. Writing a custom viewer from memory is strictly forbidden and will produce an inconsistent result.

Important Note on PowerShell Replacement: When replacing {{TOTAL_SLIDES}} in PowerShell, do NOT use the pipeline directly with -replace as it may cause encoding or formatting issues (like outputting only </html>). Instead, read the file into a variable, perform the replacement, and then write it back:

$content = Get-Content .ai\skills\svg-ppt-maker\assets\viewer_template.html -Raw
$content = $content -replace '\{\{TOTAL_SLIDES\}\}', '5'
Set-Content path\to\output\index.html -Value $content -Encoding UTF8

Example

To generate a presentation:

1. Propose the outline to the user.
2. Wait for user confirmation.
3. Create output directory: New-Item -ItemType Directory -Force -Path "temp\<topic-slug>".
4. Extract base64 icon via the one-liner PowerShell command and keep it in memory.
5. Generate 1.svg, 2.svg, etc., directly using the Write tool, pasting the cached base64 icon string into each slide that needs it.
6. Copy back cover: Copy-Item ".ai\skills\svg-ppt-maker\references\example_end.svg" -Destination "temp\<topic-slug>\N.svg" -Force.
7. Generate scripts.js with detailed narration.
8. Create the viewer: MANDATORY — Use the Read tool to read assets/viewer_template.html into memory first. Then replace {{TOTAL_SLIDES}} with the actual slide count using the safe PowerShell method, and save as index.html. NEVER write index.html from scratch or from memory.