Slide/PPT creation skill that provides complete slide creation, editing, and management capabilities. Use when users need to create slides, make presentations, edit slide content, or manage slide projects. CRITICAL - When user message contains [@slide_project:...] mention, you MUST load this skill first before any operations.
Provides complete HTML slide creation capabilities, including project creation, content design, technical specifications, workflows, and best practices.
<!--zh ## 核心能力 -->All Python code examples in this skill must be executed via the run_skills_snippet tool in Agent environment.
Correct example:
# Correct! Must use run_skills_snippet to execute
run_skills_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_skills_snippet for execution.
When user has no explicit requirements, follow these defaults:
<script src="slide-bridge.js"></script> at bottom of page for inter-page communication<script> tag)<body> bottom, CSS inline in <head>, SVG graphics inline directlyFont 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)
[Subject keyword] [Specific scene description]Default style: Minimalist business style
Style selection: Based on content theme and target audience, derive from minimalist business style, imitate popular PPT design styles including but not limited to:
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.
[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.
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.
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.
Multi-axis alignment:
Visual requirements:
When scenarios involve data analysis, write Python scripts for analysis:
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>
Reminder: All code examples below must be executed via
run_skills_snippet(python_code="..."). Refer to the "Code Execution Method" section at the top of this document.
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
## 图片分类
### 封面/主图
- Index: 1
- Size: 1920x1080px (16:9, horizontal)
- Visual Analysis: 现代科技产品特写，白色背景，专业灯光
- Use Case: 封面主图
- Search Keywords: product hero image modern technology
""",
"todo_list": """# 幻灯片制作任务规划
## 项目信息
- 项目名称：产品发布会
- 主题：新产品发布与功能介绍
- 页数：3
- 关键词：产品、科技、创新
## 内容大纲
### 封面 (封面.html)
展示产品名称和主视觉
### 产品介绍 (产品介绍.html)
介绍产品背景和核心价值
### 核心功能 (核心功能.html)
展示产品的三大核心功能
"""
})
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"
})
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>"""
})
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', {...})
| 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:
index.html (presentation controller)magic.project.js (project config)slide-bridge.js (inter-page communication script)images/ folderslide_images_content is provided, automatically download images to images/ folder| 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:
analysis_js for quality checkinsert_after_slideanalysis_js Instructions:
function() declaration)maxWidth, maxHeightreturn for resultinsert_after_slide Instructions:
"" for first page, filename to insert after| 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:
| 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/yearSlide 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:
index.html is the core controller of presentation system, containing:
create_slide_project tool auto-generates index.html and magic.project.js files, no need to read these filesmagic.project.js stores project config, including slides array defining slide page path listslide-bridge.js is inter-slide communication script, auto-generated by create_slide_project tool, no need to readPrimary Tools (use when creating slides):
web_search - Internet content retrievalread_webpages_as_markdown - Read high-value webpage contentcreate_slide_project - Create slide projectcreate_slide - Create individual slide pageimage_search - Batch search image materialsProhibited Tools (don't use when creating slides):
shell_exec with mkdir - create_slide_project auto-createsExceptions:
Creating Pages: Always use create_slide
create_slide = file writing + quality check + auto-registrationEditing Pages:
create_slide to recreateProject Initialization: Use create_slide_project
mkdir directoriesmagic.project.js and slide-bridge.jscreate_slide_project completes all initialization in one goCore Concept: Folder containing magic.project.js = Frontend recognizes as Magic Project
magic.project.js Operation Constraints:
Frontend Rendering Differentiation:
User Operations:
Project Types: type options include audio, slide, etc. Entire folder called "super deliverable".
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
- 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}
- 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
- Index: 3
[Each image follows same format, use standard Markdown image syntax with sequential numbering...]
### Product/Content Display Images
- Index: N
[Continue with same format, ensure index increments sequentially...]
### Icon/Decorative Images
- Index: N+1
[Continue with same format, ensure index increments sequentially...]
Important Notes:
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 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:
slides Array Characteristics:
[] (empty project), add page paths later via edit_fileModification Examples: Use edit_file tool to modify slides array content:
Note: Ensure valid JSONP syntax after modification (valid JavaScript code)
When using image_search tool, query keywords must be diversified, try 2-3 different keyword combinations for each requirement.
Judge language based on search intent and information source, try multilingual combinations:
Search iPhone official images:
Search Chinese netizens' comments about Musk (screenshots):
Search international news images about Musk:
Search WeChat function interface:
Search international reports about WeChat:
Search Tesla Shanghai factory (mixed):
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.
If user has no special requirements, follow this workflow step by step to complete slide creation task:
Call create_slide_project, it will help you complete the following in one go:
Page-by-page creation workflow:
for each slide:
Step 1: Image selection and usage
Step 2: Page creation
If user requests editing slides, reference the following workflow:
0. Locate target file (when user specifies by page number/index)
1. Workflow reference
2. Edit method selection
3. Tool usage principles
If user requests modifying slide file names or paths, reference the following workflow:
Users have terminology to describe actions for specified pages:
Example: Refactor[@file_path:filename]
If user doesn't specify page, ask for clarification, proceed after user confirmation.