slide-template
GitHub管理幻灯片模板,支持通过代码获取、按描述创建自定义模板、从PPTX文件转换或从现有项目提取模板,并严格遵循元数据规范。
Trigger Scenarios
Install
npx skills add dtyq/magic --skill slide-template -g -y
SKILL.md
Frontmatter
{
"name": "slide-template",
"description": "Use when the user asks to create slides with a specific style, wants to use or inspect a slide template by code, wants to see platform-provided slide template options before creating, describes a custom template style, provides a PPTX\/PPT file to convert into a platform template, or wants to extract a template from an existing Super Magic slide project."
}
Slide Template Manager
Use this skill to retrieve platform templates by exact code, create a custom template from a style description, extract one from a PPTX/PPT file, or extract one from an existing Super Magic slide project.
Template Metadata
Every downloaded or generated template package should use template.json as the metadata entry. Current template packages use the HTML slide template project format:
schema_version: fixed to"1.0".template_id:PPT-xxxxformat.category_code: optionalPPT-CATE-xxxxformat from the platform category list. It may be omitted when classification is maintained outside the template.label.zh_CN,label.en_US,description.zh_CN, anddescription.en_US: display metadata.files.theme_css,files.slides_dir, andfiles.images_dir: shared CSS, reusable slide pages, and local assets.files.visual_specis optional in a draft and should be added after the visual spec is generated.slides[].file,slides[].title,slides[].layout, andslides[].description: reusable page index and default order.source.kind:original,converted, orderived, with a 1920x1080 canvas.
Do not write or rely on legacy fields such as name, template_dir, package_type, slides[].slots, slides[].source_slide, slides[].best_for, or slides[].risks. Use the paths declared by template.json; do not assume a fixed directory layout beyond the metadata.
Template Source
- This skill does not bundle built-in templates. Do not read, list, or copy templates from
<skill_dir>/assets/templates/. - Platform templates are external resources identified by exact template
code. - Template
codemust come from a platform-provided template list, a user selection, a user-provided value, or explicit upstream context. Do not invent codes, rewrite casing, or map old local directory names to codes. - If the user asks to see templates and no platform template list or code is available in context, ask the user to select a template in the UI or provide the template code. Do not fabricate local options.
Decision
- Explicit template
code: install the template package withinstall_slides_template, then inspect the installed template files. - Platform template list is available but no template is selected: recommend 3-5 suitable options with
ask_user. Each option must include name, short description, and exactcode, plus "no template/default style". - User only describes scenario/topic/audience without enough visual specs and no platform template list is available: ask for a platform template code or confirm no template/default style.
- User provides a PPTX/PPT/presentation template file or URL and asks to convert it into a platform template: read
references/pptx-template-workflow.mdand follow the PPTX Template Workflow first. - User provides an existing Super Magic slide project directory that contains
magic.project.jswithtype: "slide"and asks to convert or extract it into a reusable template: readreferences/project-template-workflow.mdand follow the Project Template Workflow. Do not modify the source project, and do not create the final ZIP until the user confirms. - User describes a concrete visual style (colors, materials, layout, decorative elements, and visual keywords): generate a custom template first, then use it.
- Editing/fixing/refactoring existing slides does not trigger template selection unless the user asks for a new PPT/project.
Platform Template Retrieval
When a template code is selected and you need to read the template package, first call install_slides_template through Code Mode, then inspect the installed directory.
from sdk.tool import tool
result = tool.call("install_slides_template", {
"code": template_code
})
installed_directory = result.data["installed_directory"]
After receiving installed_directory:
- Use the returned
installed_directory; the tool extracts the package into a temporary directory to avoid occupying workspace storage. - Read
template.jsonfrominstalled_directoryfirst. - Read all available resources declared by
template.jsonthat are useful for the deck:- Always read
files.theme_csswhen present. - Read
files.visual_specfor design rules, typography, layout types, chart rules, and image guidance when present. - Read representative
slides[].filefiles or representative HTML files underfiles.slides_dir, when present.
- Always read
- Treat
theme.cssas the authoritative CSS. Treattemplate.json,visual-spec.md, andslides/*.htmlas complementary sources for reusable layouts, edit hints, components, composition patterns, visual rhythm, and asset references. - Read image paths or assets only when needed for the target deck.
- Do not link to installed template files from generated slides. Copy the required CSS and assets into the PPT project after
create_slide_project.
PPTX-Derived Template Contract
This skill owns the template package contract and conversion/refinement guidance. It may describe how a PPTX-derived template should signal reuse intent, but detailed page-by-page slide authoring belongs to the slide creation agent.
Identify a PPTX-derived template with these rules:
- Strong signal:
template.json.source.kindis"converted"andtemplate.json.source.fileends with.pptx,.ppt,.potx,.pot, or.ppsxcase-insensitively. - Medium signal:
visual-spec.md, the template description, or the package notes explicitly say the template was converted from PPTX/PPT. - Weak signals such as absolute-positioned HTML,
data-slot*attributes, local image-heavy pages, or page-level converted styles can support the decision, but must not trigger PPTX-derived handling by themselves.
When a template is PPTX-derived, preserve and document this reuse contract:
- Treat
slides/*.htmlas concrete page masters, not loose visual inspiration. - Make page selection possible through specific
template.json.slides[].title,layout, anddescription; descriptions should mention visible structure, content areas, image/chart/table roles, and notable constraints. - Keep
data-slot,data-slot-type, anddata-slot-rolein slide HTML as downstream editing hints, but do not addtemplate.json.slides[].slots. - Preserve source DOM structure, page-level CSS, local asset references, image/SVG/chart containers, absolute positioning, typography hierarchy, color system, and visual elements unless they are broken, sensitive, or clearly renderer-only noise.
- Document locked elements and editable boundaries in
visual-spec.md, especially backgrounds, decorative images, textures, hero visuals, SVGs, shapes, page positioning, typography scale, palette, text fitting, content-image replacement, and chart-data replacement. - Template-preserving reuse does not bypass sanitization. Logos, QR codes, screenshots, real-person photos, internal dashboards, and other ambiguous sensitive assets still require user confirmation before final packaging.
Template Application Workflow
- Resolve the selected template code from user choice or upstream context. If there is no exact code, ask for it or proceed with no template if the user confirms.
- Call
install_slides_templatewith the exact code, then useresult.data["installed_directory"]. - Read
template.jsonfrom the installed directory, then read the available resources it declares (theme_css,visual_spec,slides_dir,images_dir, andslides[].file) before creating slide pages. - Decide whether the package is PPTX-derived using the rules above. If yes, preserve the PPTX-derived template contract for downstream slide creation.
- Before writing slides, summarize internally: package resources, palette roles, typography, layout inventory, reusable components, slot/page patterns, composition rules, asset dependencies, adaptation rules, and whether the selected package is PPTX-derived.
- Create the slide project with
create_slide_project. - Copy
theme.cssand any required assets from the installed template into the PPT project. Keep all slide references local to that project. - Each slide HTML must include the local CSS:
<link rel="stylesheet" href="theme.css" />
- For PPTX-derived templates, downstream slide creation should apply the template-preserving contract instead of treating converted pages as loose style references.
- For non-PPTX-derived templates, load
creating-slidesand generate slides. Keep every slide fixed at 1920x1080; do not use responsive design. Use only the installed template's CSS variables, components, dedicated layout patterns, chart colors, and image guidance inferred from the template package. If no installed layout fits, compose the page from template components, decorations, and layout helpers instead of generic centered text. - Each slide should have one clear visual anchor, such as an image area, chart, matrix, large number, color block, or template-specific decoration.
- Use
data-slot,data-slot-type, anddata-slot-rolefrom slide HTML as editing hints when present, but do not expect slot metadata intemplate.json.
Image Rules
- First decide whether the page needs images. Use images for visual layouts, cover/section/closing pages, specific person/product/scene/case, or sparse text.
- Skip image search for dense comparison, card grid, timeline/process, data dashboard, or chart pages.
- When the selected template includes local image or illustration assets and the target slide needs an image, or the user has not provided a required image, inspect and reuse suitable assets from the template first. Prefer these assets for decorative illustrations, cover/section visuals, backgrounds, motifs, and style-consistent placeholders.
- Use
image_searchonly after checking template assets, or when the slide needs a factual photo, specific person/product/place, screenshot, brand mark, or another exact image the template cannot supply. Try at least 2 content-relevant keyword groups and include style keywords inferred from the installed template. - If search results are poor, use
generate_imagesand save output under the PPT projectimages/folder. - Apply template style only to creative illustrations (concept visuals, atmosphere, decorative or abstract images). Do not stylize factual photos, real people, real places, products, history/science references, brand marks, screenshots, QR codes, or data graphics.
- Images should occupy meaningful visual space; do not use them as tiny icons.
- Images can be used as local section backgrounds with an overlay when they support the content and template style.
- If a slide skips images, use a non-image visual anchor instead of leaving sparse text floating in empty space.
- Do not repeat the same background-image treatment on most consecutive slides.
Custom Template Workflow
Use when the user describes a style in text, provides screenshots, or provides an existing template package. Read <skill_dir>/references/custom-template-workflow.md and follow it before generating custom template files.
PPTX Template Workflow
Use when the user provides a presentation file such as .pptx, .ppt, .potx, .pot, .ppsx, a WPS presentation, or a URL to a presentation template and asks to convert it into this platform's reusable template format. Read <skill_dir>/references/pptx-template-workflow.md, then call convert_pptx_to_slide_template. After the tool returns, keep working: analyze the converted content, write visual-spec.md, sanitize obvious sensitive content, confirm ambiguous sensitive assets through ask_user, refine template.json, theme.css, images/, and slides/*.html, run lightweight QA, then ask whether to package the refined draft as the final template ZIP. Do not call the old raw HTML renderer tool or run this skill's old PPTX extraction scripts.
Project Template Workflow
Use when the user provides an existing Super Magic slide project directory that contains magic.project.js with type: "slide" and asks to convert or extract it into a reusable platform template. Read <skill_dir>/references/project-template-workflow.md and follow it before creating template draft files.
Style Specificity & Template Scope
theme.cssmust only contain template-specific styles: color variables, background decorations, typography, template components, and visual helpers. It must NOT contain structural layout properties (padding, flex, grid) on framework-level selectors like.slide-container..slide-containerintheme.cssshould only set: dimensions (width/height),position,overflow,box-sizing, and template-specific backgrounds/colors. Layout properties (padding,margin,display: flex,flex-direction) must be defined in each slide page's own<style>block.- Page-level
<style>in each slide HTML has higher specificity thantheme.cssby nature of source order (page styles load aftertheme.css). If needed, use more specific selectors (e.g.,.slide-container.my-page) to ensure page styles override template defaults. - When writing slide pages, always define layout (padding, flex, grid) directly in the page
<style>rather than relying ontheme.css, to avoid cross-page style conflicts.
Output
- Platform template workflow output: a complete template package generated through
creating-slides, using template files installed throughinstall_slides_template. - Built-in local template workflow output: none; local bundled templates are no longer supported.
- Custom workflow output: a complete template package generated through
creating-slides. - PPTX template conversion output: first create a draft template folder containing
template.json, optionalmagic.project.js,theme.css,images/, andslides/*.html; use the model to analyze the converted visual style, writevisual-spec.md, sanitize obvious sensitive content, confirm ambiguous sensitive assets throughask_user, refine the folder, run lightweight QA, then ask the user whether to create the final sibling<template-id>-template.zip. If a ZIP is created, excludemagic.project.jsand unconfirmed sensitive assets. - Project template conversion output: first create a new standalone draft template folder containing
template.json,visual-spec.md,theme.css,images/, and deduplicatedslides/*.html; sanitize sensitive content and ask the user throughask_userbefore keeping ambiguous sensitive assets such as logos or internal screenshots. Only after user confirmation, create the sibling<template-id>-template.zip. - Preview images may be generated by a script from
slides/*.html, but they must be stored in build or publishing artifacts and must not be included in the template ZIP. - Do not paste raw HTML in chat.
Version History
-
f9973c5
Current 2026-08-20 03:38
重构为基于外部平台代码的模板管理机制,移除内置模板硬编码,引入严格的template.json元数据规范及PPTX转换工作流。
- 41d7ef4 2026-07-25 09:29


