SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsspace-multi-design-ppt

space-multi-design-ppt

Design & creation

View repository

Updated 10-16 09:30

About this skill

Space Multi Design PPT

Turn any content into slides with top-tier brand design language. Core idea: rather than relying on a凭空发挥的"好看", use getdesign.md to pull the precise design specifications of 62 real brands (specific values for colors, fonts, spacing, corner radius, shadows), and use these tokens to drive HTML slide rendering, ensuring the style is credible and consistent.

Workflow Overview

进度清单（逐项勾选）：
- [ ] Step 1: 接收并分析内容
- [ ] Step 2: 风格决策 + 输出格式确认（HTML / PPTX）⚠️ 必须
- [ ] Step 3: 拉取品牌 DESIGN.md 并提取设计 token
- [ ] Step 4: 生成大纲（简短确认）
- [ ] Step 5A（HTML 模式）: 逐页生成 HTML → 合成 deck.html
- [ ] Step 5B（PPTX 模式）: python-pptx 原生构建 → soffice 渲染 QA
- [ ] Step 6: 交付与总结

Language Rules: All communication with the user and the slide copy language follow the user's input language (if the user writes in Chinese, everything is in Chinese, with technical terms and brand names kept in English).

Step 1: Receive and analyze content

The content may be: pasted text, a file (md/docx/pdf/txt), or a topic ("help me make a PPT about XX").

  1. If it is a file, read the content; if it is only a topic, first confirm the key points with the user or research and fill in the content yourself
  2. Analyze the content and derive:
    • Core message(one sentence) and 3-5 supporting points
    • Audience(executives/technical/general/public/investors/learners)
    • Content signals(used for style matching, see Step 2)
    • Suggested page count: <1000 words → 5-8 pages; 1000-3000 words → 8-15 pages; >3000 words → 12-20 pages
  3. For deep analysis methods, see references/outline-guide.md(information hierarchy, audience fit, visual opportunities)

Step 2: Style decision + output format confirmation ⚠️ Required

Output format: must ask the user before production

Unless the user has already clearly stated what format they want ("make a PPT file", "output pptx", "give me HTML"), ask before starting production (can be combined with the style recommendation into one message):

Option Features Suitable for
HTML slides Pixel-level accurate brand reproduction (best for gradients/fonts/details), full-screen browser presentation, single-file sharing Online presentations, pursuing visual effects
PPTX Natively editable (real text boxes and shapes, text and colors can be changed), compatible with PowerPoint/Keynote/WPS Needs secondary editing, formal business occasions, handoff to others
Both First finalize the HTML, then produce the PPTX The safe choice when unsure

When the user says "both", proceed in the order HTML → PPTX, finalize the content once and render twice.

Case A: The user has specified a style → use it directly, skip the recommendation

When the user says "use Stripe style", "make it feel like Apple", "that Notion kind", compare against references/brand-registry.md to find the slug and go directly to Step 3. Mixing is supported ("Notion color scheme + Linear typography" → pull both slugs).

Case B: The user has not specified → show 5+1 recommendations

Based on the content signals from Step 1, from references/brand-registry.md select from the matching tags 5 brand styles that best match the content，show it to the user in the chat (each introduced in one sentence), and attach item 6 "Smart Match":

根据你的内容，我推荐以下设计风格：

1. **Stripe** — 紫色渐变 + 300 字重优雅排版，金融科技质感
2. **Linear** — 超级极简 + 精准间距 + 紫色点缀，效率工具气质
3. **Vercel** — 黑白精准 + Geist 字体，开发者极简美学
4. **Notion** — 暖色极简 + 衬线标题，柔和知识感
5. **Claude** — 赭石强调色 + 编辑级排版，温暖智识感

6. **智能匹配** — 我根据内容气质直接选择最合适的风格（含混搭）

回复编号或品牌名即可，也可以直接说其他品牌（共支持 62 个）。

Requirements:

  • The 5 recommendations musttruly match the content(don't recommend Ferrari for tech product content, don't recommend Binance for children's education content), based on the match tags for each brand in the registry
  • For the one-sentence introduction, use the style description from the registry, highlighting "what visual effect you'll get by choosing it"
  • When the user selects "Smart Match", pick the single best-fitting brand (or a mix of 2),tell the user what was selected and whythen continue
  • Keep recommendations fresh: when match scores are close, rotate them; don't recommend the same 5 every time

Step 3: Pull DESIGN.md and extract tokens

mkdir -p /tmp/design-md-tmp/<slug> && cd /tmp/design-md-tmp/<slug> && npx -y getdesign@latest add <slug> 2>&1
cat /tmp/design-md-tmp/<slug>/DESIGN.md

Extract from DESIGN.md and record (recommended to write into the working directory design-tokens.md for reference):

  • Colors: background / surface / primary and secondary text / accent color / borders
  • Typography: font-family, type scale, font weight, line height, letter spacing (if the brand font is unavailable, note the closest Google Fonts / system font fallback)
  • Spacing and corner radius: base unit, component radius
  • Shadows: box-shadow at each level
  • Vibe keywords: degree of whitespace, contrast intensity, decorative tendency

Strictly follow the specific values in the spec——if the spec says rgba(0,0,0,0.95) then don't write #000, and for letter spacing -2.125px don't round. This is the essential difference between this skill and "throwing together a good-looking PPT."

When mixing: use the primary brand as the skeleton, extract the specified dimensions (color/typography/layout) from the secondary brand to blend in, and note the source in the deck comments.

Fallback: when npx fails (no network / no Node), use the style description for that brand in references/brand-registry.md as the design direction, and tell the user this is an approximate reproduction.

Step 4: Generate the outline

Generate according to references/outline-guide.md generate outline.md: cover + content pages + back cover, with each page annotated: title (narrative-style, state conclusions rather than labels), key points, layout type, visual elements.

Show the outlinebrieflyto the user for confirmation (no need to go word by word; just list page numbers + each page's title). If the user has no objections or says "just go ahead", continue; returning users who have already confirmed the process once can skip this.

Step 5A: HTML mode —— generate HTML slides page by page

Output directory structure:

design-slide/{topic-slug}/
├── source.md            # 原始内容
├── design-tokens.md     # 提取的品牌 token
├── outline.md
├── slides/              # HTML 模式：每页独立 1280×720
│   ├── 01-cover.html
│   ├── 02-{slug}.html ...
├── deck.html            # HTML 模式交付物
├── build_pptx.py        # PPTX 模式：构建脚本（留档便于改版）
├── {topic-slug}.pptx    # PPTX 模式交付物
└── {topic-slug}.pdf     # 按需

Each page is an independent 1280×720 HTML. Production specs (dimensions, overflow prevention, layout templates, token application methods) are detailed in references/slide-html-guide.md——Must-read before generating the first page。

Content quality rules (see outline-guide for details):

  • Each page covers only one point; titles are narrative ("Usage doubled in 6 months" rather than "Key Data")
  • Data must cite sources; no placeholders; no AI boilerplate (things like "let's explore together")
  • The back cover is not "Thank you for watching"; it must have a call to action or a memorable point

After all individual pages are complete, run the composition script to package slides/ into a single-file deck with keyboard paging, fullscreen presentation, and a page number indicator:

python3 <SKILL_DIR>/scripts/build_deck.py design-slide/{topic-slug}/slides --output design-slide/{topic-slug}/deck.html --title "标题"

deck.html supports: ←/→/space to page, F for fullscreen, G for grid overview, URL hash to locate page numbers.

When PDF is needed, prioritize the Chromium screenshot route (scripts/export_deck.py --pdf, which depends on playwright); if it cannot be installed, suggest the user print from their browser.

Step 5B: PPTX mode — native build with python-pptx

Required reading references/pptx-native-guide.md before starting. Core principles:

  • Native first: Build text boxes and shapes directly with python-pptx (users can edit them afterward); do not take the "paste HTML screenshots into PPT" route — that requires Chromium (often impossible to install in a sandbox), and the result is not editable
  • Token mapping: px→pt multiply by 0.75; colors/corner radius/spacing follow design-tokens.md; brand gradient backgrounds are pre-generated as PNGs with PIL and inserted
  • Font safety: Use Office built-in fonts like Calibri/Arial for body text, Calibri Light may be used for large headings; Chinese must explicitly set the ea font (Microsoft YaHei)
  • Visual QA is mandatory: soffice convert to PDF → pdftoppm convert to images → review page by page, fix overflow/overlap/edge-hugging before delivery (one round of fixes is enough; do not iterate endlessly)
  • Browser preview: Keep the PDF converted from the final PPTX via soffice that has passed visual QA as the official preview file. PPTX is for editing, PDF is for opening in a browser; both must come from the same final PPTX.

Step 6: Delivery

Show the delivered files (deck.html and/or .pptx), and summarize: the brand style used and key tokens, page count, and how to use them (HTML: open and press F for fullscreen; PPTX: can be edited directly in PowerPoint). Ask whether they need: adjustments to individual pages, re-rendering with a different style (swap tokens, reuse structure), or an additional format.

Cowrite one-click Slide mode

When the task comes from the Slide button at the top of Cowrite, and provides a page ID, a confirmed output format, and a "smart match" style:

  1. Treat the format and style confirmation in Step 2 as already done; do not ask again
  2. The user has authorized one-click generation: after automatically generating the outline, proceed directly to production; do not pause to wait for outline confirmation
  3. Use cowrite_get_page to read the current complete Markdown, ignoring existing Slide result links
  4. For HTML output, only upload deck.htmlin the end; for PPTX output, also upload the final .pptx and the .pdf
  5. converted from that file and passing QA. Intermediate files must be written to a local temporary writable directory, not to the plugin installation cache
  6. Use cowrite_upload_asset to upload the final file, then re-read the page revision
  7. Use cowrite_insert_after to insert the final address after the first heading: in PPTX mode, insert two links at once, "browser preview PDF" and "download editable PPTX"; in HTML mode, insert one link
  8. Insert only one set of delivery links; do not change a single word of the page's original content; on revision conflict, re-read and retry once

Optional: AI image mode

When the user explicitly asks for "illustration-style/hand-drawn-style image slides" and the current runtime provides Codex built-in image_gen tool, use the image generation pipeline: see references/image-mode.md. Defaultnotuse this mode; HTML mode text is precise and editable. Do not call external image APIs or CLIs.

Error handling quick reference

Problem Handling
npx getdesign fails Approximate it using a registry style description; inform the user
Brand is not among the 62 List the 3 closest alternative brands for the user to choose from
PPTX is needed but playwright/Chromium cannot be installed No impact — PPTX is built natively with python-pptx and does not depend on a browser
soffice is unavailable (PPTX QA) Skip rendering QA, rely on coordinate self-checks (leave a 10% margin in box dimensions), and tell the user to self-check as recommended
Content is too long (>5000 characters) Recommend splitting into multiple decks or focusing on a single main thread
Brand font cannot be loaded Use the fallback font in registry/DESIGN.md and explain in a comment