| name | creating-slides |
| description | 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. |
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:
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
- When an image is the main visual anchor, make it part of the layout rather than a tiny corner illustration. It should usually occupy about one third to one half of the main content area.
- Slides without images still need a strong visual anchor, such as a chart, matrix, color block, large number, geometric decoration, card grid, or flow diagram. Avoid pages with only a title and sparse body text.
- 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.
Content-related images may also be used as local section backgrounds to add depth. Put an independent overlay layer above the background image and keep text/cards in a separate foreground layer. Do not apply opacity to a container that also holds text.
<div
class="relative"
style="background-image:url('images/xxx.jpg');
background-size:cover;background-position:center;"
>
<div class="absolute inset-0" style="background:rgba(14,20,32,0.60);"></div>
<div class="relative z-10"></div>
</div>
Use background images selectively. Avoid repeating the same full-image treatment on most consecutive slides; alternate with charts, cards, diagrams, or clean graphic pages.
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;
font-family:
"Noto Sans SC",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"PingFang SC",
,
,
sans-serif;
}
{
: ;
: ;
}
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-Evolution-Report",
"slides_array": [],
"slide_images_content": "",
"todo_list": ""
})
result = tool.call('create_slide_project', {
"project_path": "Product-Launch",
"slides_array": ["cover.html", "product-intro.html", "key-features.html"],
"slide_images_content": """# Slide Image Library
## Project Info
- Search topic: Product Launch
- Collected at: 2025-01-22 10:30:00
- Total images: 5
## Image Categories
### Cover / Hero
- Index: 1
- Size: 1920x1080px (16:9, horizontal)
- Visual Analysis: Modern tech product close-up, white background, professional lighting
- Use Case: Cover hero image
- Search Keywords: product hero image modern technology
""",
"todo_list": """# Slide Production Plan
## Project Info
- Project name: Product Launch
- Theme: New product release and feature showcase
- Pages: 3
- Keywords: product, technology, innovation
## Content Outline
### Cover (cover.html)
Display product name and hero visual
### Product Introduction (product-intro.html)
Introduce product background and core value
### Key Features (key-features.html)
Showcase the three core product features
"""
})
Create Single Slide Page
from sdk.tool import tool
result = tool.call('create_slide', {
"file_path": "ChatGPT-Evolution-Report/OpenAI-Milestones.html",
"content": """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OpenAI Milestones</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 Milestones</h1>
<p class="text-3xl text-gray-600">Key moments in AI development</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(`Container bottom overflow: ${Math.round(y+height)} > ${maxHeight}`);
}
}
return issues.length > 0 ? issues.join(', ') : 'Layout check passed';
""",
"insert_after_slide": ""
})
result = tool.call('create_slide', {
"file_path": "ChatGPT-Evolution-Report/Development-Timeline.html",
"content": """...""",
"max_width": 1920,
"max_height": 1080,
"analysis_js": ,
:
})
result = tool.call(, {
: ,
: ,
: ,
: ,
: ,
:
})
Search Image Materials
from sdk.tool import tool
result = tool.call('image_search', {
"topic_id": "ChatGPT-Evolution-Report",
"requirements_xml": """<requirements>
<requirement>
<name>Musk Portrait</name>
<query>Elon Musk portrait professional</query>
<visual_understanding_prompt>Verify this is a clear portrait of Elon Musk</visual_understanding_prompt>
<requirement_explanation>Need a professional portrait photo of Musk for the person introduction page</requirement_explanation>
<expected_aspect_ratio>3:4</expected_aspect_ratio>
<count>3</count>
</requirement>
<requirement>
<name>ChatGPT Interface</name>
<query>ChatGPT interface screenshot 2025</query>
<visual_understanding_prompt>Confirm this is a real ChatGPT interface screenshot</visual_understanding_prompt>
<requirement_explanation>Need a real ChatGPT interface screenshot to showcase product features</requirement_explanation>
<expected_aspect_ratio>16:9</expected_aspect_ratio>
<count>5</count>
</requirement>
<requirement>
<name>Tech Background</name>
<query>AI technology abstract background</query>
<visual_understanding_prompt>Assess whether this is suitable as a technology-themed background</visual_understanding_prompt>
<requirement_explanation>Need an abstract tech-style background image for slide backgrounds</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-Research",
"requirements_xml": """<requirements>
<requirement>
<name>ChatGPT History</name>
<query>ChatGPT development history 2025</query>
<limit>10</limit>
</requirement>
<requirement>
<name>GPT-4 Breakthroughs</name>
<query>OpenAI GPT-4 technical breakthroughs</query>
<limit>10</limit>
<time_period>month</time_period>
</requirement>
<requirement>
<name>Commercialization</name>
<query>ChatGPT commercialization progress</query>
<limit>10</limit>
</requirement>
</requirements>"""
})
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:
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
magic.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 read- 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
- 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 retrievalread_webpages_as_markdown - Read high-value webpage contentcreate_slide_project - Create slide projectcreate_slide - Create individual slide pageimage_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
- 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:
- Use standard Markdown image format:
- filename serves as image alt text and also as filename when downloading
- filename must include file extension, e.g., .jpg, .png, .webp, etc.
- 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
- Core word: Most direct topic word
- Qualifier: Core word + attribute/function/scenario
- Combination: Multiple related elements combined
- 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):
- "Musk Weibo", "Musk comments Chinese", "Musk social media China"
Search international news images about Musk:
- "Elon Musk", "Musk Tesla", "Musk 2025"
Search WeChat function interface:
- "WeChat app", "WeChat interface", "WeChat Pay"
Search international reports about WeChat:
- "WeChat", "WeChat China", "WeChat report"
Search Tesla Shanghai factory (mixed):
- "Tesla Shanghai", "Tesla Shanghai Gigafactory", "Tesla China factory"
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:
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:
- Use list_dir tool to get complete project folder hierarchy, determine reasonable adjustment plan
- View magic.project.js file in slide project, understand slides array content
- 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.
