Skills

creating-slides

Installation
SKILL.md

Creating Slides Skill

Provides complete HTML slide creation capabilities, including project creation, content design, technical specifications, workflows, and best practices.

Core Capabilities

  • Project Creation - Create complete slide project structure
  • Page Creation - Create slide pages conforming to specifications
  • Content Research - Obtain reference materials and data
  • Image Search - Batch search high-quality image materials
  • Data Analysis - Support Python scripts for data analysis and processing
  • Project Management - Support editing, refactoring, moving, and renaming slide projects

Code Execution Method (Critical)

All Python code examples in this skill must be executed via the run_sdk_snippet tool in Agent environment.

Correct example:

# Correct! Must use run_sdk_snippet to execute
run_sdk_snippet(
    python_code="""
from sdk.tool import tool
result = tool.call('create_slide_project', {
    "project_path": "my-project",
    "slides_array": []
})
"""
)

All code blocks in this document starting with from sdk.tool import tool follow this rule: pass them via the python_code parameter of run_sdk_snippet for execution.

Default Requirements

When user has no explicit requirements, follow these defaults:

  • Page count: Determine appropriate page count based on content, each page ≤100 lines of code
  • Content density: One key point per page, text ≤150 words, images ≤1
  • Slide mindset: 1920×1080 fixed canvas, prioritize horizontal layout, avoid vertical overflow
  • Business minimalist style, follow font size specifications, Tailwind mandatory priority

Technical Specifications

Size and Implementation

  • Fixed size: 1920px×1080px, strictly no overflow, width and height must be explicitly set in html and body tags
  • Implementation: HTML + CSS + JavaScript
  • Static fixed page: Same effect on any device size, no adaptation, responsive design prohibited
  • Must include <script src="slide-bridge.js"></script> at bottom of page for inter-page communication

CSS Frameworks and Resources

Technical Constraints

  • File generation: Only generate static HTML files
  • Responsive design prohibited: Strictly no media queries, pages don't change with screen size
  • Content overload prohibited: Avoid excessively long text, too many list items, oversized images; split into multiple pages when single page has too much content
  • Dynamic effects prohibited: Page switching controlled by outer system, single pages focus on static display; disable transition, keyframes, dynamic data display animations; disable sound effects, only keep static visuals (CSS hover, shadows, gradients, borders and other style effects can be used normally)
  • Don't use server-side code, local file resources, complex interactive features
  • Unless user requests, don't use unverified external images
  • JavaScript code inline at <body> bottom, CSS inline in <head>, SVG graphics inline directly
  • Chart implementation: Charts, dashboards and any ECharts-supported content must use ECharts implementation, prohibited to write HTML, CSS, SVG code yourself

Tailwind Mandatory Specification

  • Maximize use of Tailwind classes: Layout flex/grid, spacing p-/m-, font size text-, colors text-/bg-, decoration rounded-/shadow-*, etc.
  • Minimize custom CSS: Limited to complex gradients, pseudo-elements and other scenarios Tailwind cannot implement

Font Size Specification (1920×1080 canvas requires large fonts)

  • Page main title: 64-72px (text-6xl/7xl) - Prefer 64px and above
  • Section title/Card main title: 40-52px (text-5xl) - Don't go below 40px
  • Subtitle/Card subtitle: 30-36px (text-3xl/4xl) - Prefer 32px and above
  • Body text/List item: 22-26px (text-2xl) - Minimum 22px, prefer 24px
  • Auxiliary label: 20px (text-xl) - Only for tiny labels
  • Strictly prohibit 18px (text-lg) and below, unless user explicitly requires
  • Principle: Prefer large fonts with less content split into more pages, not small fonts cramming into one page

Visual Hierarchy

Font size contrast (main title differs from body by 3-4 levels) + weight contrast (title font-bold/black) + color contrast (title text-gray-900, body text-gray-600/700) + spatial contrast (important elements mb-8/10/12) + decorative elements (number labels, color blocks, vertical bars)

Design Principles

Content Design Mindset

  • One key point per page: Each slide conveys only one core message, maintain focused attention
  • Information hierarchy: Establish clear information hierarchy through font size, color depth, spatial position, create depth through shadows and transforms
  • Visual expression: Use FontAwesome or Emoji icons to enhance visual expression

Image Requirements

  • Image ratio: 70% of slides must contain high-quality images, e.g., 7 out of 10 slides must contain images
  • Search keywords: Must contain at least one subject keyword, prohibited to use abstract, general, non-specific keywords
    • Search format: [Subject keyword] [Specific scene description]
    • Extract at least 1-3 subject keywords related to slide content
    • Keyword examples:
      • Correct: "IShowSpeed China tour Beijing Great Wall" Wrong: "Beijing Great Wall"
      • Correct: "Elon Musk portrait" Wrong: "Tech giant portrait"
      • Correct: "Zuckerberg astronomical talent poaching" (specific event) Wrong: "AI talent competition" (abstract, general, non-specific)
  • Prohibited to use placeholder images, must use high-quality images returned by image_search tool

Design Style

Default style: Minimalist business style

  • Primary colors: Black/white/gray (text-gray-*)
  • Accent colors: Orange/red/green/blue (max 1-2 per page)
  • Background: Mainly white/light gray, dark background for contrast
  • Prohibited: Excessive use of blue, purple, gradients

Style selection: Based on content theme and target audience, derive from minimalist business style, imitate popular PPT design styles including but not limited to:

  • Tech: Apple Keynote, Google Material Design, Microsoft Fluent Design
  • Business: McKinsey Consulting, Huawei Enterprise, Alibaba Enterprise
  • Consumer brands: Xiaomi, Netflix, Nike
  • Design-driven: Minimalism, Flat Design
  • Media publishing: TED Talks, National Geographic
  • Education academia: Stanford University, MIT

Layout Design Core Principles

  • Precise zoning planning: Precise zoning planning based on 1920×1080 canvas
  • Priority layout modes: Single column centered, left-right split, three-point grid, standard three-section, card-style, timeline (only horizontal timeline allowed), comparison split-screen and dashboard classic PPT layout modes
  • Especially recommend left-right split layout (like 60/40 or 50/50), fully utilize horizontal space, avoid vertical stacking causing height overflow
  • Zoning planning:
    • Header area: Fixed height about 10% (like h-24)
    • Middle content area: Occupies main space, can flexibly divide into 2×2, 3×3 grid, max 9-grid
    • Footer area: Fixed height about 5% (below h-16), images not allowed
  • Horizontal division: Max 6 columns per row, avoid overly fragmented division causing content crowding
  • Vertical infinite extension prohibited: Maximize horizontal space use, e.g., horizontal timeline not vertical timeline

Use predefined grid (grid-cols-2/3, grid-rows-2) with gap-4/6/8 unified spacing, flexibly control element space occupation through col-span-2, row-span-2, avoid pixel values defining grid size, use fr units or percentages; Flex layout uses TailwindCSS proportional width classes (w-1/2, w-1/3, w-2/3) prohibited hardcoded pixels, leverage flex-1, justify-between, items-center to achieve responsive layout and balanced content distribution.

Height Control Technique (Critical)

[Hard Requirement] Page height must strictly not exceed 1080px, this is a non-negotiable specification!

If content is too much for a single page, must split into multiple pages, absolutely not allowed to let single page exceed 1080px height.

Reasonable slide height control is extremely important. A simple effective approach is using Grid horizontal card layout, maximize horizontal space use, control similar left-right content amounts, aligned arrangement, overall neat typography.

During conception, page preceding elements should choose height-sensitive elements (usually need sufficient space), subsequent elements/content use height-insensitive elements (usually can adapt to remaining space, like charts), so only need to consider preceding element heights, set subsequent element/content heights to fill remaining height.

While ensuring page is visually full, absolutely don't cram too much readable substantive content in one page.

Please think through above points step by step during design, ensure perfect page layout and height control. Unless user has conflicting requirements, must default to this approach for page layout and height control.

Image Usage Technique

Images are very dangerous, hard-to-control elements in slide creation. Need to plan space with similar aspect ratio to place images, carry images through container elements, let images fill container. Container width and height should use relative units (like percentages, fr units) or Grid layout's automatic allocation mechanism, not fixed, often miscalculated pixel values, otherwise images often overflow canvas causing layout chaos.

Default Design Mindset

Slides overall have premium feel, use rich decorative elements, conform to industry mainstream aesthetic practices, but don't introduce too much complexity. Note slide height control and neat typography, don't cram too much content in one page, this is key.

ECharts Configuration Requirements

  • All ECharts charts must ensure echarts.init() only after HTML content and CSS styles are fully parsed (window.onload). Note: window.onload, not DOMContentLoaded.
  • When page contains ECharts charts, must listen to window.resize event. When resize triggers, call resize() method on all charts.
  • Chart containers should fully utilize available space, reserve margins to ensure complete text display.

Multi-axis alignment:

  • Ensure same-direction axes have consistent tick counts to avoid grid line misalignment.
  • Use min, max, interval parameters to achieve tick alignment.

Visual requirements:

  • Keep axes, grid lines, labels aligned.
  • Avoid text overlap and dense data display issues.
  • Harmonious and unified color scheme, reasonable layout not obscuring key data.

Data Analysis Processing

When scenarios involve data analysis, write Python scripts for analysis:

  • Python scripts are solely for data analysis processing, not data visualization. Use ECharts for visualization. Strictly prohibited to write chart rendering code in Python scripts.
  • For data files like Excel, CSV, use read_files to read first 10 lines to understand structure, then use Python scripts for data analysis.
  • For Excel files with multiple sheets or large size, always use Python scripts for analysis. First use script to view data structure and sheet structure, then perform analysis.
  • Python script processing results should be refined. Script's role is to calculate and distill core data, not return large amounts of process data, typically hundreds to thousands of characters, max 5000 characters.
  • Follow latest mainstream Python programming practices. Ensure code robustness, aim for one-time successful execution.

Slide HTML Template

Reference the following template to create slide pages. Each page is an independent HTML file, style should be consistent but can have appropriate variations, comments are for your understanding only, omit in actual development.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Slide Title</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"/>
    <style>
        html, body {
            width: 1920px;
            height: 1080px; /* DO NOT set height or max-height, allow extreme cases to exceed */
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            /* more styles can be added here... */
        }

        .slide-container {
            width: 1920px;
            height: 1080px;
            /* padding: Adjust according to design needs */
            /* more styles can be added here... */
        }
    </style>
</head>
<body>
    <div class="slide-container">
        <!-- Page content goes here -->
    </div>
    <!--
    IMPORTANT: This script must be included in every generated slide page.
    Simply copy this line as-is - no need to read or understand the script content.
    It enables keyboard navigation and title synchronization with the parent page.
    -->
    <script src="slide-bridge.js"></script>
</body>
</html>

Quick Start

Reminder: All code examples below must be executed via run_sdk_snippet(python_code="..."). Refer to the "Code Execution Method" section at the top of this document.

Create Slide Project

from sdk.tool import tool

# 创建空项目（后续逐页添加）
result = tool.call('create_slide_project', {
    "project_path": "ChatGPT发展报告",
    "slides_array": [],
    "slide_images_content": "",
    "todo_list": ""
})

# 创建完整项目（带配图和大纲）
result = tool.call('create_slide_project', {
    "project_path": "产品发布会",
    "slides_array": ["封面.html", "产品介绍.html", "核心功能.html"],
    "slide_images_content": """# 幻灯片图片素材库

## 项目信息
- 搜索主题：产品发布会
- 采集时间：2025-01-22 10:30:00
- 图片总数：5

## 图片分类

### 封面/主图

![product-hero.jpg](https://example.com/image1.jpg)
- Index: 1
- Size: 1920x1080px (16:9, horizontal)
- Visual Analysis: 现代科技产品特写，白色背景，专业灯光
- Use Case: 封面主图
- Search Keywords: product hero image modern technology
""",
    "todo_list": """# 幻灯片制作任务规划

## 项目信息
- 项目名称：产品发布会
- 主题：新产品发布与功能介绍
- 页数：3
- 关键词：产品、科技、创新

## 内容大纲
### 封面 (封面.html)
展示产品名称和主视觉

### 产品介绍 (产品介绍.html)
介绍产品背景和核心价值

### 核心功能 (核心功能.html)
展示产品的三大核心功能
"""
})

Create Single Slide Page

from sdk.tool import tool

result = tool.call('create_slide', {
    "file_path": "ChatGPT发展报告/OpenAI里程碑.html",
    "content": """<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>OpenAI 里程碑</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"/>
    <style>
        html, body {
            width: 1920px;
            height: 1080px;
            font-family: 'Noto Sans SC', sans-serif;
        }
        .slide-container {
            width: 1920px;
            height: 1080px;
        }
    </style>
</head>
<body>
    <div class="slide-container bg-gradient-to-br from-blue-50 to-white flex items-center justify-center">
        <div class="text-center">
            <h1 class="text-7xl font-bold text-gray-900 mb-8">OpenAI 里程碑</h1>
            <p class="text-3xl text-gray-600">人工智能发展的重要节点</p>
        </div>
    </div>
    <script src="slide-bridge.js"></script>
</body>
</html>""",
    "max_width": 1920,
    "max_height": 1080,
    "analysis_js": """
const issues = [];
const container = document.querySelector('.slide-container');
if (container) {
    const {x, y, width, height} = container.getBoundingClientRect();
    if (y + height > maxHeight) {
        issues.push(`容器底部溢出: ${Math.round(y+height)} > ${maxHeight}`);
    }
}
return issues.length > 0 ? issues.join(', ') : '布局检查通过';
""",
    "insert_after_slide": ""
})

# 第二页
result = tool.call('create_slide', {
    "file_path": "ChatGPT发展报告/发展历程.html",
    "content": """...""",
    "max_width": 1920,
    "max_height": 1080,
    "analysis_js": """...""",
    "insert_after_slide": "OpenAI里程碑.html"
})

# 第三页
result = tool.call('create_slide', {
    "file_path": "ChatGPT发展报告/技术突破.html",
    "content": """...""",
    "max_width": 1920,
    "max_height": 1080,
    "analysis_js": """...""",
    "insert_after_slide": "发展历程.html"
})

Search Image Materials

from sdk.tool import tool

result = tool.call('image_search', {
    "topic_id": "ChatGPT发展报告",
    "requirements_xml": """<requirements>
    <requirement>
        <name>马斯克肖像</name>
        <query>Elon Musk portrait professional</query>
        <visual_understanding_prompt>分析图片是否为马斯克本人的清晰肖像照</visual_understanding_prompt>
        <requirement_explanation>需要马斯克的专业肖像照片，用于人物介绍页面</requirement_explanation>
        <expected_aspect_ratio>3:4</expected_aspect_ratio>
        <count>3</count>
    </requirement>
    <requirement>
        <name>ChatGPT界面</name>
        <query>ChatGPT interface screenshot 2025</query>
        <visual_understanding_prompt>确认是否为ChatGPT的真实界面截图</visual_understanding_prompt>
        <requirement_explanation>需要ChatGPT的真实使用界面截图，展示产品功能</requirement_explanation>
        <expected_aspect_ratio>16:9</expected_aspect_ratio>
        <count>5</count>
    </requirement>
    <requirement>
        <name>科技背景</name>
        <query>AI technology abstract background</query>
        <visual_understanding_prompt>分析是否适合作为科技主题的背景图</visual_understanding_prompt>
        <requirement_explanation>需要抽象的科技风格背景图，用于幻灯片背景</requirement_explanation>
        <expected_aspect_ratio>16:9</expected_aspect_ratio>
        <count>3</count>
    </requirement>
</requirements>"""
})

Web Content Retrieval

from sdk.tool import tool

# 搜索网页
search_result = tool.call('web_search', {
    "topic_id": "ChatGPT研究",
    "requirements_xml": """<requirements>
    <requirement>
        <name>ChatGPT发展</name>
        <query>ChatGPT发展历程 2025</query>
        <limit>10</limit>
    </requirement>
    <requirement>
        <name>GPT-4突破</name>
        <query>OpenAI GPT-4 技术突破</query>
        <limit>10</limit>
        <time_period>month</time_period>
    </requirement>
    <requirement>
        <name>商业化</name>
        <query>ChatGPT商业化进程</query>
        <limit>10</limit>
    </requirement>
</requirements>"""
})

# 读取高价值网页（这个工具需要单独查看文档）
# read_result = tool.call('read_webpages_as_markdown', {...})

Core Tools and Parameters

create_slide_project - Create Slide Project

Parameter Required Type Description
project_path Yes string Project relative path (folder name), e.g., "ChatGPT-Development-Report"
slide_count No number Slide page count, default 0 (empty project or determined by slides_array)
slides_array Yes array List of slide filenames, can be empty array []
slide_images_content No string Image material library content (Markdown format), empty means not creating file
todo_list No string Task planning content (Markdown format), empty means not creating file

Tool Functions:

  • Create project folder structure
  • Auto-generate index.html (presentation controller)
  • Auto-generate magic.project.js (project config)
  • Auto-generate slide-bridge.js (inter-page communication script)
  • Create images/ folder
  • If slide_images_content is provided, automatically download images to images/ folder

create_slide - Create Slide Page

Parameter Required Type Description
file_path Yes string Slide file path (relative to working directory), e.g., "project-name/page.html"
content Yes string Complete HTML content
max_width Yes number Expected max width (usually 1920)
max_height Yes number Expected max height (usually 1080)
analysis_js Yes string Layout analysis JavaScript function body (without function declaration)
insert_after_slide Yes string Insert position: "" for first page, filename to insert after that file

Tool Functions:

  • Write HTML file
  • Load via browser and execute analysis_js for quality check
  • Detect layout issues, height overflow, image stretch, small fonts
  • Auto-update slides array based on insert_after_slide

analysis_js Instructions:

  • Function body content (without function() declaration)
  • Can access maxWidth, maxHeight
  • Use return for result
  • Focus on detecting element overflow

insert_after_slide Instructions:

  • "" for first page, filename to insert after
  • Auto-updates slides array

image_search - Batch Search Images

Parameter Required Type Description
topic_id Yes string Search topic identifier for deduplication
requirements_xml Yes string XML format search requirements configuration

requirements_xml Format: Each <requirement> contains:

  • name - Requirement name (required)
  • query - Search keywords (required)
  • visual_understanding_prompt - Visual analysis prompt (required)
  • requirement_explanation - Requirement explanation (required)
  • expected_aspect_ratio - Expected aspect ratio, e.g., 16:9, 9:16, 1:1 (required)
  • count - Image count (optional, default 20, max 50)

Key Principles:

  • Each requirement must provide clear search keywords
  • Keywords must include subject words, prohibit pure generic terms
  • Choose language based on search intent (Chinese/English/mixed)
  • Visual analysis cannot assess clarity, only content

web_search - Web Search

Parameter Required Type Description
topic_id Yes string Search topic identifier for deduplication
requirements_xml Yes string XML format search requirements configuration

requirements_xml Format: Each <requirement> contains:

  • name - Requirement name (required)
  • query - Search keywords (required)
  • limit - Result count (optional, default 10, max 20)
  • offset - Pagination offset (optional, default 0)
  • language - Search language (optional, default zh-CN)
  • region - Search region (optional, default CN)
  • time_period - Time range (optional): day/week/month/year

Project Architecture

Slide projects use separated architecture design:

Project Name/
├── index.html          # Presentation controller - handles page navigation, keyboard control, scaling adaptation
├── magic.project.js    # Project config - stores slides array and other config info
├── slide-bridge.js     # Inter-slide communication script
├── images/             # Image resource folder
├── Slide Page 1.html   # Specific slide page
├── Slide Page 2.html   # Specific slide page
└── ...

Architecture Working Principles:

  1. index.html is the core controller of presentation system, containing:
    • Navigation logic: handles keyboard events, page switching
    • Display engine: iframe loading, 16:9 scaling adaptation
    • create_slide_project tool auto-generates index.html and magic.project.js files, no need to read these files
  2. magic.project.js stores project config, including slides array defining slide page path list
  3. slide-bridge.js is inter-slide communication script, auto-generated by create_slide_project tool, no need to read
  4. Each HTML file in project root is a completely independent slide page:
    • Self-contained design: independent styles, content, scripts
    • Standard size: based on 1920×1080 design
  5. Each slide project must be a complete self-contained project, therefore:
    • Slide pages prohibited from referencing images or resources outside project folder. All images must be stored in images folder, otherwise cannot render correctly
    • User-uploaded images need to be copied to images folder via shell_exec(command="cp src_path dst_path") command to be correctly referenced

Tool Usage Principles

Tool Restrictions for Slide Creation

Primary Tools (use when creating slides):

  • web_search - Internet content retrieval
  • read_webpages_as_markdown - Read high-value webpage content
  • create_slide_project - Create slide project
  • create_slide - Create individual slide page
  • image_search - Batch search image materials

Prohibited Tools (don't use when creating slides):

  • File writing tools - No quality checks
  • File editing tools - Only when user explicitly requests partial edits
  • shell_exec with mkdir - create_slide_project auto-creates

Exceptions:

  • Non-slide tasks (e.g., "write Python script"), can use other file tools
  • User explicitly requests partial edits, can use file editing tools

Tool Selection Principles

Creating Pages: Always use create_slide

  • create_slide = file writing + quality check + auto-registration
  • Don't use file writing tools (no quality checks)

Editing Pages:

  • Small-scale (≤100 chars): Use file editing tools
  • Large-scale (>100 chars): Use create_slide to recreate

Project Initialization: Use create_slide_project

  • Don't manually mkdir directories
  • Don't manually create magic.project.js and slide-bridge.js
  • create_slide_project completes all initialization in one go

Magic Project Mechanism

Core Concept: Folder containing magic.project.js = Frontend recognizes as Magic Project

magic.project.js Operation Constraints:

  • Format is JSONP (not JSON), generated by dedicated tools (e.g., setup_audio_project)
  • Never create this file directly
  • Allowed to edit and modify parameters inside (e.g., metadata.speakers)

Frontend Rendering Differentiation:

  • Regular folder: Shows folder icon, click to expand file list
  • Magic Project: Shows project icon, click to open dedicated panel (loads index.html visualization interface)

User Operations:

  • Click project icon: Open project panel (not entering folder, not opening index.html file)
  • Click arrow next to project name: Expand to see internal raw files (like expanding regular folder)

Project Types: type options include audio, slide, etc. Entire folder called "super deliverable".

Tool Parameter Format Specifications

create_slide_project Parameter Formats

slide_images_content Format Requirements

The slide_images_content parameter should contain complete slide-images.md file content, formatted as follows:

# Slide Image Material Library

## Project Information
- Search Topic: ChatGPT Evolution and Technological Breakthroughs
- Collection Time: 2025-01-22 10:30:00
- Total Images: 15

## Image Categories

### Cover/Hero Images

![{filename.png}]({image URL})
- Index: 1
- Size: {width}x{height}px ({ratio}, {horizontal/vertical/square})
- Visual Analysis: {AI analysis result, excluding size info, describe in detail with minimum words, at least 50 characters}
- Use Case: {recommended usage scenario}
- Search Keywords: {keywords used}

![{filename.png}]({image URL})
- Index: 2
- Size: {width}x{height}px ({ratio}, {horizontal/vertical/square})
- Visual Analysis: {AI analysis result, excluding size info, describe in detail with minimum words, at least 50 characters}
- Use Case: {recommended usage scenario}
- Search Keywords: {keywords used}

### Background Images

![{filename.png}]({image URL})
- Index: 3
[Each image follows same format, use standard Markdown image syntax with sequential numbering...]

### Product/Content Display Images

![{filename.jpg}]({image URL})
- Index: N
[Continue with same format, ensure index increments sequentially...]

### Icon/Decorative Images

![{filename.jpg}]({image URL})
- Index: N+1
[Continue with same format, ensure index increments sequentially...]

Important Notes:

  1. Use standard Markdown image format: ![filename](url)
  2. filename serves as image alt text and also as filename when downloading
  3. filename must include file extension, e.g., .jpg, .png, .webp, etc.
  4. filename should prioritize user's preferred language, be concise and clear, e.g., "trump-assassination-attempt.jpg", "chatgpt-viral-phenomenon.png", "tesla-q4-earnings.jpg"

todo_list Format Requirements

The todo_list parameter should contain complete slide-todo.md file content for recording slide content planning and task breakdown.

Recommended format:

# Slide Production Task Planning

## Project Information
- Project Name: ChatGPT Development Report
- Theme: ChatGPT Evolution and Impact Analysis
- Pages: 10
- Key Keywords: ChatGPT, OpenAI, GPT-4, Artificial Intelligence

## Content Outline
### Cover (OpenAI Milestones.html)
Introduce OpenAI's important development nodes and breakthrough achievements

### Table of Contents (AI Revolution Timeline.html)
Display key time points and milestone events in artificial intelligence development

### GPT Series Evolution (GPT-4 Technological Breakthrough.html)
Detail GPT-4's technical innovations and performance improvements compared to previous generations

### Commercialization Process (ChatGPT Business Miracle.html)
Analyze how ChatGPT reached billion-level user scale in short time
...

magic.project.js Format Description (slide type)

magic.project.js is a JSONP format project configuration file that defines slide project structure and page list.

File Structure:

window.magicProjectConfig = {
  "version": "1.0.0",
  "type": "slide",
  "name": "Project Name",
  "slides": [
    "cover.html",
    "contents.html",
    "content-page.html"
  ]
};
window.magicProjectConfigure(window.magicProjectConfig);

Field Descriptions:

  • version: Configuration file version number, fixed as "1.0.0"
  • type: Project type, fixed as "slide" (slide type)
  • name: Project name, usually folder name
  • slides: Slide page path array, relative to project root, defines page order

slides Array Characteristics:

  • Array elements are strings, each string is a relative path to an HTML file
  • Array order is the slide playback order
  • Can be empty array [] (empty project), add page paths later via edit_file
  • Frontend loads and navigates slide pages based on this array

Modification Examples: Use edit_file tool to modify slides array content:

  • Add page: Append new file path to end of array
  • Remove page: Remove specified path from array
  • Adjust order: Rearrange array element order

Note: Ensure valid JSONP syntax after modification (valid JavaScript code)

image_search Keyword Strategy

Basic Principles

When using image_search tool, query keywords must be diversified, try 2-3 different keyword combinations for each requirement.

Keyword Language Selection Principles

Judge language based on search intent and information source, try multilingual combinations:

  • Search foreign websites/international reports → Use English or original language
  • Search local websites → Use local language
  • Uncertain about source → Mix multiple languages for comprehensive results
  • Same topic can use different languages to get different perspectives

Search Strategy Framework

  1. Core word: Most direct topic word
  2. Qualifier: Core word + attribute/function/scenario
  3. Combination: Multiple related elements combined
  4. Variant: Synonym/abbreviation/colloquialism/multilingual variant

Search Examples

Search iPhone official images:

  • "iPhone", "iPhone 17 Pro Max", "iPhone official"

Search Chinese netizens' comments about Musk (screenshots):

  • "马斯克", "马斯克微博", "马斯克评论"

Search international news images about Musk:

  • "Elon Musk", "Musk Tesla", "Musk 2025"

Search WeChat function interface:

  • "微信", "微信界面", "微信支付"

Search international reports about WeChat:

  • "WeChat", "WeChat China", "WeChat report"

Search Tesla Shanghai factory (mixed):

  • "Tesla Shanghai", "特斯拉上海", "Tesla 上海工厂"

Wrong Examples (Avoid)

  • Use "collaboration software" → Too generic, should use "Figma", "Figma collaboration" etc.
  • Use "database tool" → No subject, should use "Notion database", "Airtable" etc.
  • Prohibit generic searches: No using only generic industry terms (software/platform/tool), pure function terms (payment/chat), pure adjectives (modern/advanced)

Keyword Diversification Principles

  • From core to specific: Subject name → Subject+attribute → Subject+scenario+time
  • Try different expressions: Choose language based on source/abbreviation/full name/multilingual variants
  • Combine different elements: Subject/action/time/location
  • At least 2-3 different angles per requirement

Create Specific Slide Workflow

If user requests creating specific slides or requests imitating/referencing to generate slides, reference partial workflow of complete creation workflow to flexibly complete user's creation needs.

Best Practices

1. Use create_slide_project to Create Project

  • When user has no image requirements: slide_images_content can be empty
  • When user already provided images: No need to use image_search tool to search images, instead use visual_understanding tool to analyze image info, write image info into slide_images_content per format requirements
  • When user already provided outline or specific text: No need to use web_search tool to search webpages, directly extract todo_list content

2. Directly Use create_slide to Create Slides

  • Create slides based on user-provided information
  • Insist on using create_slide tool, use analysis_js to analyze layout
  • Don't use file writing tools

3. Special Handling for Imitate/Reference Scenarios

  • Remember to copy original images: Copy original images to new project's images folder, ensure complete slide project architecture
  • Use shell_exec(command="cp src_path dst_path") command to copy images

Complete Creation Workflow

If user has no special requirements, follow this workflow step by step to complete slide creation task:

1. Internet Search

  • Understand task description and user needs
  • Round 1 search (required): Generate 3 keyword sets for web_search tool, search relevant pages
  • Round 2 search (optional): If search results differ from expectations (common in current events scenarios), generate 3+ keyword sets again, conduct second round search with web_search
  • Select high-value pages, eliminate duplicates and irrelevant pages. If user doesn't specify count, default to 5 high-value pages, use read_webpages_as_markdown to get high-value page content

2. Image Search and Content Planning

  • Batch image search: Use image_search tool to batch search image materials, default minimum batch search 5+ requirements at once, all different, covering large, medium, small, horizontal, vertical various sizes or different scenarios for later use, set topic_id to project name (ensure deduplication)
  • One-time batch search: Speculate various types of image needs potentially needed later, initiate batch search in one go, common examples: search background large images, character portraits, product close-ups, icons in different sizes and scenarios
  • Avoid duplicates: Don't repeatedly use visual analysis on similar content images, ensure similar content images only used once
  • Content planning: Based on user needs and reference materials, analyze and plan slide content:
    • Analyze user specific needs and background
    • Extract core content points from reference files
    • Determine slide page count (determine appropriate page count based on content)
    • Identify target audience and usage scenarios
    • Choose appropriate design style: Select most suitable style direction from design style list based on content theme
  • Prepare content: Prepare complete slide_images_content and todo_list content
  • User requirements priority: If user has explicit other image requirements, prioritize user requirements

3. Project Initialization

Call create_slide_project, it will help you complete the following in one go:

  • Create project folder and skeleton structure
  • Auto-generate slide-images.md and slide-todo.md files
  • Auto-download image materials to images folder
  • Create all necessary project files and structure

4. Slide Content Development

Page-by-page creation workflow:

for each slide:

  • Step 1: Image selection and usage

    • Container analysis: First analyze width-height ratio and size design of image container in current page layout
    • Select high-definition, professional, highly relevant to content theme and matching aspect ratio images
    • Only allow using local images, prohibit using external images, avoid hotlink protection, image loading failures, etc.

  • Step 2: Page creation

    • Before creation, think about height control, follow design principles and constraints
    • Determine insert position: first page insert_after_slide="", subsequent use previous filename
    • Use create_slide, leverage analysis_js to analyze layout
    • Serious issues: fix at most once, if unresolved continue next page
    • Unless partial edits, always use create_slide, don't use other file tools
    • User requests partial edits: can use file editing tools
    • Ensure reasonable layout, complete content, good visuals

5. Project Delivery

  • Provide project summary
  • Explain file structure and functional features

Edit Slide Workflow

If user requests editing slides, reference the following workflow:

0. Locate target file (when user specifies by page number/index)

  • Read slides array from magic.project.js in project
  • Determine target file path by index (0-based)
  • Example: User says "modify page 10", read slides[9] to get file path

1. Workflow reference

  • Reference partial workflow of complete creation workflow to flexibly complete user's editing needs

2. Edit method selection

  • Less than 100 characters: use file editing tools
  • Otherwise: use create_slide to recreate

3. Tool usage principles

  • Avoid file writing tools
  • create_slide includes file writing and quality checks
  • Complete in one go, avoid multiple calls

Move or Rename Slide Workflow

If user requests modifying slide file names or paths, reference the following workflow:

  1. Use list_dir tool to get complete project folder hierarchy, determine reasonable adjustment plan
  2. View magic.project.js file in slide project, understand slides array content
  3. Use shell_exec(command="mv old_path new_path") command to move or rename files, use edit_file to update slides array in magic.project.js

Flexible Project Management

  • Empty project creation: create_slide_project supports creating empty projects (slides_array=[]), can add slides page by page
  • Dynamic adjustment: slides array in magic.project.js can be modified anytime via edit_file to change page list and order
  • Use cases: Build page by page from scratch, migrate from existing PPT, dynamically adjust pages
  • File naming: Prohibited from adding sequence numbers to filenames (e.g. 01_xxx.html), order is managed by slides array and unrelated to filenames

PPTX File Processing Rules

  • Cannot directly process pptx files, but can use Python scripts to export each page of pptx as an image, then use visual understanding tools to analyze image information
  • Cannot read and extract materials from pptx
  • Cannot directly modify pptx, when user gives a pptx for optimization, need to inform them and ask if they accept creating a new online slide
  • HTML slides can be exported as PDF or pptx in the user interface, exported files cannot be re-edited
  • When user requests exceed capabilities, need to inform them in plain language

User Terminology

Users have terminology to describe actions for specified pages:

  • Refactor: Think and review content in design principles, redesign and recombine page with completely different layout design
  • Fix: Think and review height control techniques, image usage techniques, etc., and fix issues in page

Example: Refactor[@file_path:filename]

If user doesn't specify page, ask for clarification, proceed after user confirmation.

Related skills

More from dtyq/magic

Installs
13
Repository
dtyq/magic
GitHub Stars
4.8K
First Seen
Mar 21, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykWarn