ppt-design

Category: Content & Multimedia | Uploader: Phlegonlabs | Downloads: 0 | Version: v1.0（Latest）

Design presentation slides, infographic pages, and PPT-style visuals as 1600x900 HTML slides with optional PPT export. Use when the agent needs to pick or explain a slide style, recommend styles based on content, generate one or more static HTML slides, support `background_mode` paper or white for compatible light styles, or render finished slides into a high-fidelity image-based PPTX.

Changelog: Source: GitHub https://github.com/Phlegonlabs/Powerpoint-fancy-design

Directory Structure

Current level: tree/main/

📁 assets/
- 📄 style-preview-a.png 118.5 KB
- 📄 style-preview-b.png 73.6 KB
- 📄 style-preview-c.png 74.0 KB
- 📄 style-preview-d.png 82.9 KB
- 📄 style-preview-e.png 264.3 KB
- 📄 style-preview-f.png 105.7 KB
- 📄 style-preview-g.png 64.6 KB
- 📄 style-preview-h.png 145.5 KB
- 📄 style-preview-i.png 98.5 KB
- 📄 style-preview-j.png 66.2 KB
- 📄 style-preview-zh-a.png 116.1 KB
- 📄 style-preview-zh-b.png 80.1 KB
- 📄 style-preview-zh-c.png 83.4 KB
- 📄 style-preview-zh-d.png 85.4 KB
- 📄 style-preview-zh-e.png 240.6 KB
- 📄 style-preview-zh-f.png 102.9 KB
- 📄 style-preview-zh-g.png 73.7 KB
- 📄 style-preview-zh-h.png 144.9 KB
- 📄 style-preview-zh-i.png 94.8 KB
- 📄 style-preview-zh-j.png 74.0 KB
- 📄 style-preview-zh-tw-a.png 123.3 KB
- 📄 style-preview-zh-tw-b.png 83.8 KB
- 📄 style-preview-zh-tw-c.png 89.4 KB
- 📄 style-preview-zh-tw-d.png 90.6 KB
- 📄 style-preview-zh-tw-e.png 245.2 KB
- 📄 style-preview-zh-tw-f.png 105.8 KB
- 📄 style-preview-zh-tw-g.png 77.2 KB
- 📄 style-preview-zh-tw-h.png 150.5 KB
- 📄 style-preview-zh-tw-i.png 101.5 KB
- 📄 style-preview-zh-tw-j.png 75.3 KB
📁 cases/
- 📁 templates/
  - 📄 five-slide-generic.md 905 B
  - 📄 five-slide-generic.zh.md 834 B
  - 📄 README.md 1.1 KB
  - 📄 ten-slide-generic.zh.md 1.7 KB
📁 references/
- 📄 background-modes.md 1.3 KB
- 📄 bilingual-typography.md 3.4 KB
- 📄 deck-markdown-template.md 616 B
- 📄 geometry-preserve.md 1.8 KB
- 📄 html-review-checklist.md 2.7 KB
- 📄 layout-prototypes.md 8.5 KB
- 📄 presentation-layout-rules.md 5.2 KB
- 📄 presentation-quality-rubric.md 1.5 KB
- 📄 safe-zone.md 3.2 KB
- 📄 style-selector.md 3.2 KB
📁 scripts/
- 📁 geometry_stress_test/
  - 📄 build.mjs 2.9 KB
  - 📄 page_specs.mjs 7.8 KB
  - 📄 renderers.mjs 8.2 KB
  - 📄 shell.mjs 10.4 KB
- 📁 public_stage_cases/
  - 📄 build.mjs 5.6 KB
  - 📄 page_specs.mjs 11.5 KB
- 📁 slide_engine/
  - 📄 audit.mjs 13.9 KB
  - 📄 deck_files.mjs 1.9 KB
  - 📄 layout_selection.mjs 4.9 KB
  - 📄 polish.mjs 3.4 KB
  - 📄 presentation_quality.mjs 10.0 KB
  - 📄 public_stage_renderers.mjs 3.4 KB
  - 📄 public_stage_shell.mjs 2.0 KB
  - 📄 renderers.mjs 27.5 KB
  - 📄 safe_zone.mjs 92 B
  - 📄 shell.mjs 35.1 KB
  - 📄 styles.mjs 18.1 KB
  - 📄 task_artifacts.mjs 1.4 KB
  - 📄 validation.mjs 908 B
- 📁 style_previews/
  - 📄 build.mjs 1.6 KB
  - 📄 data.mjs 1.2 KB
  - 📄 localized_copy.json 28.1 KB
  - 📄 render.mjs 3.3 KB
  - 📄 styles.json 22.7 KB
- 📁 template_style_cases/
  - 📄 build.mjs 4.7 KB
  - 📄 layout_selection.mjs 70 B
  - 📄 page_specs.mjs 12.2 KB
  - 📄 shell.mjs 56 B
- 📁 twitter_style_cases/
  - 📄 build.mjs 4.3 KB
  - 📄 layout_selection.mjs 70 B
  - 📄 page_specs.mjs 12.3 KB
  - 📄 renderers.mjs 64 B
  - 📄 shell.mjs 56 B
  - 📄 styles.mjs 65 B
  - 📄 validation.mjs 66 B
- 📄 audit_twitter_style_cases.mjs 7.7 KB
- 📄 build_geometry_stress_test.mjs 2.2 KB
- 📄 build_public_stage_cases.mjs 3.9 KB
- 📄 build_review_sheets.mjs 4.6 KB
- 📄 build_template_style_cases.mjs 3.1 KB
- 📄 build_twitter_style_cases.mjs 2.7 KB
- 📄 check_shared_engine_usage.mjs 1.6 KB
- 📄 check_source_line_limits.mjs 1.4 KB
- 📄 export_ppt.mjs 2.9 KB
- 📄 generate_style_previews.mjs 37 B
- 📄 render_slides.mjs 2.4 KB
📁 skills/
- 📁 ppt-design/
  - 📁 references/
    
    📄 background-modes.md 1.3 KB
    
    📄 bilingual-typography.md 3.4 KB
    
    📄 deck-markdown-template.md 616 B
    
    📄 geometry-preserve.md 1.8 KB
    
    📄 html-review-checklist.md 2.7 KB
    
    📄 layout-prototypes.md 8.5 KB
    
    📄 presentation-layout-rules.md 5.2 KB
    
    📄 presentation-quality-rubric.md 1.5 KB
    
    📄 safe-zone.md 3.2 KB
    
    📄 style-selector.md 3.2 KB
  - 📁 scripts/
    
    📄 export_ppt.mjs 2.9 KB
    
    📄 render_slides.mjs 2.4 KB
  - 📁 styles/
    
    📄 style_a.md 7.2 KB
    
    📄 style_b.md 6.4 KB
    
    📄 style_c.md 6.0 KB
    
    📄 style_d.md 5.8 KB
    
    📄 style_e.md 6.1 KB
    
    📄 style_f.md 6.8 KB
    
    📄 style_g.md 5.6 KB
    
    📄 style_h.md 8.3 KB
    
    📄 style_i.md 6.1 KB
    
    📄 style_j.md 6.9 KB
  - 📄 SKILL.md 16.0 KB
📁 styles/
- 📄 style_a.md 7.2 KB
- 📄 style_b.md 6.4 KB
- 📄 style_c.md 6.0 KB
- 📄 style_d.md 5.8 KB
- 📄 style_e.md 6.1 KB
- 📄 style_f.md 6.8 KB
- 📄 style_g.md 5.6 KB
- 📄 style_h.md 8.3 KB
- 📄 style_i.md 6.1 KB
- 📄 style_j.md 6.9 KB
📄 .gitattributes 66 B
📄 .gitignore 64 B
📄 CLAUDE.md 1.9 KB
📄 package-lock.json 8.0 KB
📄 package.json 1.1 KB
📄 README.md 13.4 KB
📄 README.zh-TW.md 12.2 KB
📄 README.zh.md 12.2 KB
📄 RELEASE_NOTES_v0.1.0.md 2.5 KB
📄 RELEASE_NOTES_v0.2.0.md 3.0 KB
📄 RELEASE_NOTES_v0.2.1.md 2.6 KB
📄 RELEASE_NOTES_v0.3.0.md 2.3 KB
📄 SKILL.md 16.0 KB

SKILL.md

---
name: ppt-design
description: Design presentation slides, infographic pages, and PPT-style visuals as 1600x900 HTML slides with optional PPT export. Use when the agent needs to pick or explain a slide style, recommend styles based on content, generate one or more static HTML slides, support `background_mode` paper or white for compatible light styles, or render finished slides into a high-fidelity image-based PPTX.
version: 0.3.0
---

# PPT Design

Design each slide as a standalone 1600x900 HTML file, then export to PPT only when the user asks for it.

In this repo, the executable slide contract lives in `./scripts/slide_engine/`.
The shared JS manifest and shared renderers are the runtime source of truth.
Files in `./styles/style_[a-j].md` remain human-facing design references and must stay manually aligned with that executable manifest.

## Workflow

1. Identify the topic, audience, and deliverable.
2. If the user provides a Markdown document, treat each `Page X` section as one slide unless the document clearly indicates a different page structure.
3. Read [style-selector.md](./references/style-selector.md) before choosing a style.
4. If the deck is in Chinese or mixed Chinese and English, read [bilingual-typography.md](./references/bilingual-typography.md).
5. Recommend 2-3 styles when the user has not already chosen one.
6. Explain each recommended style in plain language:
   - style name
   - one-line visual description
   - what kind of content it fits best
   - use English by default for these style explanations and recommendations
7. Confirm or infer `background_mode`:
   - default to `paper`
   - allow `white` only for compatible light styles
   - if the chosen style does not support `white`, say so and keep `paper` or recommend a compatible style
8. Read [background-modes.md](./references/background-modes.md).
9. Read [presentation-layout-rules.md](./references/presentation-layout-rules.md).
10. Read [html-review-checklist.md](./references/html-review-checklist.md).
11. When the deck is `client-facing` or `public-stage`, read [presentation-quality-rubric.md](./references/presentation-quality-rubric.md).
12. Read [layout-prototypes.md](./references/layout-prototypes.md). Classify each slide's content role and select a layout prototype before writing HTML. Do not repeat the same layout on consecutive slides.
13. Read [safe-zone.md](./references/safe-zone.md). Enforce content boundaries on every slide: all primary content must live inside the main frame area (`y = 108px` to `y = 804px`). Include chrome labels only on cover and closing slides when `chrome=bookend`.
14. If a slide contains strict tables, org charts, framework diagrams, or other geometry-sensitive structures, read [geometry-preserve.md](./references/geometry-preserve.md) before writing that slide.
15. Read the chosen style file in `./styles/style_[a-j].md` before writing HTML. Treat it as the design reference for mood, typography, and ornament logic; runtime behavior is enforced by the shared slide engine.
16. Preserve the chosen style's native whitespace, ornament density, contrast, and pacing. Do not normalize all styles toward the same layout density.
17. When the slide copy is Chinese or bilingual, follow the style's Chinese and English pairing guidance rather than reusing the English display font everywhere.
18. Recompose page content into slide hierarchy instead of preserving raw Markdown formatting literally, except when geometry-sensitive structure should be preserved.
19. Generate one HTML file per slide in `./outputs/html/`.
20. Review every generated HTML slide before delivery. Treat this as mandatory, not optional.
21. Fix layout, spacing, typography, hierarchy, and geometry issues found in review using the smallest change that keeps the slide true to the chosen style.
22. When `speaker_notes_mode` is enabled, generate a sidecar notes file for presenter use.
23. If the user wants PPT, render the HTML slides to PNG and package them into a PPTX.

For `public-stage` work, treat the flow as a task pipeline:

1. draft generation
2. polish pass
3. audit gate
4. render / export

Do not skip the polish pass and do not export before the audit gate passes.

## Inputs

Use these fields when the user provides them or when you need to make them explicit in your own reasoning:

- `input_markdown`: the source Markdown for the deck, ideally grouped by `Page 1`, `Page 2`, and so on
- `style`: `A-J` or a named style
- `background_mode`: `paper` or `white`
- `chrome`: `all`, `bookend`, or `none`
- `geometry_mode`: `auto`, `preserve`, or `recompose`
- `presentation_scenario`: `brand-launch`, `investor-board`, `client-pitch`, or `research-brief`
- `quality_tier`: `internal`, `client-facing`, or `public-stage`
- `speaker_notes_mode`: `none`, `outline`, or `full`
- `brand_profile`: brand lock settings for logo, footer, palette, and font policy
- `deliverable`: `html`, `ppt`, or `both`

Default behavior:

- `input_markdown`: infer page structure from headings when possible
- `style`: recommend candidates first when unspecified
- `background_mode`: `paper`
- `chrome`: `bookend`
- `geometry_mode`: `auto`
- `presentation_scenario`: `brand-launch`
- `quality_tier`: `public-stage`
- `speaker_notes_mode`: `outline`
- `deliverable`: `html`

Repo note:

- The bundled demo builders in `./scripts/build_template_style_cases.mjs` and `./scripts/build_twitter_style_cases.mjs` are fixed internal benchmark pipelines.
- They currently render with `chrome=bookend` and validate HTML before PNG/PPT export.
- They do not expose every skill input as a CLI flag.

## Style Selection

Read [style-selector.md](./references/style-selector.md) first.

When the user has not chosen a style:

- Recommend only 2-3 styles, not all 10.
- Match the recommendation to the content rather than to arbitrary taste words like "nice" or "cool".
- Explain what the style looks like and what kind of material it suits.
- Default the style recommendation language to English, even when the working conversation is in another language.
- Keep generated slide copy in the user's source language unless the user explicitly asks for translation.

Examples:

- Business report, finance, policy, research summary: bias toward `A`, `D`, or `I`.
- Brand story, culture, exhibition, philosophy, editorial: bias toward `B`, `E`, or `F`.
- Creative proposal, event, youth brand, campaign, entertainment: bias toward `C`, `G`, `H`, or `J`.

## Background Modes

Read [background-modes.md](./references/background-modes.md).

Apply these rules:

- `paper` keeps paper grain, print texture, and warm off-white stock when the style supports it.
- `white` switches the slide canvas to clean white and removes paper-specific texture, fold marks, and stock simulation.
- `white` does not remove style identity. Keep the typography, grid, ornament, contrast system, and non-paper decorative devices.
- `white` is supported only by styles `A`, `B`, `C`, `D`, `E`, `G`, and `J`.
- Styles `F`, `H`, and `I` are dark-native. Do not whitewash them.

## HTML Rules

- Create one file per slide: `slide_01.html`, `slide_02.html`, and so on.
- Keep the canvas fixed at `1600x900`.
- Use static HTML, CSS, and inline SVG only.
- Do not use JavaScript in the slide files.
- Do not use external images other than Google Fonts.
- Save outputs in `./outputs/html/`.
- Design for projection and presentation first, not for dense document reading.

Use this base structure unless the style file overrides a specific detail:

```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1600">
  <title>Slide Title</title>
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #e0e0e0;
      overflow: hidden;
    }
    .slide {
      position: relative;
      width: 1600px;
      height: 900px;
      overflow: hidden;
    }
    .slide::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 50;
      pointer-events: none;
    }
    .chrome-top, .chrome-bottom {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted, #999);
      z-index: 2;
    }
    .chrome-top { top: 28px; }
    .chrome-bottom { bottom: 24px; }
    .main-frame {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      top: 108px;
      bottom: 96px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="slide">
    <!-- Include chrome-top and chrome-bottom on cover and closing slides only when chrome=bookend -->
    <div class="chrome-top">
      <div class="style-id">STYLE A / Swiss International</div>
      <div class="meta-id">Cover</div>
    </div>
    <div class="chrome-bottom">
      <div class="meta-id">cover-swiss-rail</div>
      <div class="page-id">01 / 05</div>
    </div>
    <!-- Main content frame — present on EVERY slide -->
    <main class="main-frame">
      <!-- All primary content goes here -->
    </main>
  </div>
</body>
</html>
```

## Chrome Labels

Read [safe-zone.md](./references/safe-zone.md).

Apply these rules:

- `chrome=bookend`: show `.chrome-top` and `.chrome-bottom` on cover and closing slides only.
- `chrome=all`: show `.chrome-top` and `.chrome-bottom` on every slide.
- `chrome=none`: omit chrome labels entirely.
- The main content frame does not move when chrome visibility changes.

## Style Fidelity

Apply these rules on every slide:

- The shared engine manifest is the executable source of truth; the chosen style file is the human design reference.
- Preserve the style's native whitespace strategy. Minimal and editorial styles should stay restrained.
- Preserve ornament logic. Decorative rules, frames, and accents should support the composition, not dominate it.
- When fixing density or collisions, prefer content edits, card count changes, or local spacing adjustments over turning every style into the same template.
- A successful revision should still look unmistakably like the chosen style family.

## Presentation Typography

Read [presentation-layout-rules.md](./references/presentation-layout-rules.md).

Apply these rules on every slide:

- Prioritize legibility at presentation distance.
- Do not allow text blocks, labels, or numbers to collide with each other.
- Prefer fewer, larger text groups over many small annotations.
- Keep headline and body contrast obvious in size, weight, and spacing.
- If a slide is text-heavy, redesign the hierarchy instead of shrinking everything.
- If a slide contains table-like information, convert it into presentation-friendly structure unless the user explicitly requires a literal dense table.

For presentation use, apply the full typography scale from [presentation-layout-rules.md](./references/presentation-layout-rules.md). The eight roles and their hard minimums are:

| Role | EN Min | CN Min |
|---|---|---|
| Display Title | `44px` | `40px` |
| Section Heading | `28px` | `28px` |
| Body | `22px` | `24px` |
| Table Header | `20px` | `22px` |
| Table Cell | `18px` | `20px` |
| Support Copy | `18px` | `20px` |
| Label / Caption | `16px` | `18px` |
| Page Number (chrome only) | `14px` | `14px` |

Do not shrink any role below its minimum. If content does not fit, reduce content, split the slide, or rebuild the hierarchy. When the chosen style is intentionally fancy or experimental, preserve the style but still protect legibility.

## Tables And Text-Heavy Content

Read [presentation-layout-rules.md](./references/presentation-layout-rules.md).

When the user asks for tables, comparisons, or many words:

- Default to redesigned comparison blocks, metric cards, timeline rows, or labeled columns instead of raw spreadsheet tables.
- Use a true table only when row-column comparison is the main point and simplifying it would lose meaning.
- Break large tables into multiple slides when needed.
- Highlight only the few values or row groups that matter.
- Maintain generous padding inside cells or cards so text never feels cramped.
- For dense content, prefer 3-6 major points per slide rather than squeezing everything into one page.

## Geometry-Sensitive Content

Read [geometry-preserve.md](./references/geometry-preserve.md) when a slide contains diagrams, framework maps, org charts, box-and-arrow structures, or strict tables.

Apply these rules:

- `geometry_mode=auto`: preserve geometry when box size, connector position, or table structure carries meaning.
- `geometry_mode=preserve`: keep the structural skeleton intact even if that means reducing copy or splitting the figure across slides.
- `geometry_mode=recompose`: reinterpret the content into slide-friendly cards or bands only when the user explicitly wants that.
- For geometry-sensitive slides, style changes surface treatment only. Do not distort the diagram's core proportions just to match a preferred layout prototype.
- Use explicit tracks, coordinates, or bounded box sizes for the diagram skeleton instead of leaving box proportions fully driven by text length.
- If content does not fit inside the diagram cleanly, shorten labels, split the figure, or move detail into notes. Do not compress the geometry until the structure becomes misleading.

## Mandatory HTML Review

Read [html-review-checklist.md](./references/html-review-checklist.md).

After generating each slide, perform a second-pass review before delivery:

1. Check for overlap, collision, clipping, and crowding.
2. Check that typography is large enough for presentation.
3. Check that text-heavy or table-heavy content has been reformatted for slides.
4. Check that geometry-sensitive diagrams or tables still preserve their intended proportions.
5. Check that the chosen style is still intact after readability adjustments.
6. When tools allow it, render the HTML and inspect the actual visual result instead of relying only on source review.
7. If exporting to PPT, confirm the rendered PNG aspect ratio matches the final PPT slide.
8. Revise the HTML if any item fails.

Never hand off first-draft HTML without this review pass.

## PPT Export

When the user wants `ppt` or `both`, use the bundled scripts:

1. Ensure dependencies are installed with `npm install`.
2. Render HTML slides to PNG:

```powershell
node .\scripts\render_slides.mjs --input .\outputs\html --output .\outputs\rendered
```

3. Build the PPTX:

```powershell
node .\scripts\export_ppt.mjs --input .\outputs\rendered --output .\outputs\ppt\deck.pptx
```

The PPT export is intentionally image-based for fidelity. Each slide becomes one full-bleed PNG inside a 16:9 deck.

## Quality Checks

- The chosen style matches the content type and tone.
- The user can understand why that style was chosen.
- `background_mode` is honored correctly.
- Compatible light styles can switch between `paper` and `white`.
- Incompatible dark styles reject `white` explicitly.
- Every slide remains visually coherent within one style family.
- Text does not overlap, collide, clip, or crowd nearby elements.
- Typography is large enough for projection and presentation use.
- Text-heavy and table-like content has been reformatted into stronger slide hierarchy where appropriate.
- A second-pass HTML review happened after generation, not only before.
- PPT pages preserve the HTML composition without cropping or scaling errors.
- Decorative blocks, especially dark or saturated ones, do not invade the primary reading zones unless that overlap is deliberate, padded, and presentation-safe.
- All primary content stays within the main frame area (`108px` to `804px` vertically).
- No text content appears in the top reserved zone (`0-96px`) or bottom reserved zone (`804-900px`) except chrome labels allowed by the current `chrome` mode.
- Consecutive slides use different layout prototypes.
- A 10-slide deck uses at least 5 distinct layout prototypes.
- Refinements preserve the original style instead of flattening all decks toward the same density or ornament pattern.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

ppt-design

Directory Structure

SKILL.md

Report

Notice