Fixed design constraints in place of open template selection
guizang-ppt-skill replaces master-template selection with fixed design systems; most AI presentation tools provide many fill-in templates that tend toward similar SaaS landing-page styles. This Skill limits generation to two visual systems that AI follows by specification, without freely configurable user settings. It lives in ~/.claude/skills/guizang-ppt-skill/ as Markdown specifications, HTML templates, layout references and a validation script for Claude Code or Codex to generate presentations with fixed design systems.
It provides two visual systems that cannot be mixed: Style A combines electronic magazine and e-ink aesthetics, with large serif headings, restrained whitespace and WebGL fluid backgrounds only on Hero slides, for humanistic narratives, industry observations and personal views. Style B uses Swiss International Style with only sans-serif type, a 12-column grid, one highly saturated anchor color, square corners, hairlines and 22 locked layouts for technical products, data reports and engineering or design talks. Class naming deliberately differs between the systems; h-hero is serif in A and sans-serif in B, and a presentation must use one system without switching after selection.
Output is always one HTML file with horizontal navigation by keyboard, wheel, touch or bottom dots; no build or server is required, and double-clicking opens full-screen playback in a browser. The B key enables a static low-power mode, disabling WebGL and effects for slower meeting-room computers. Design principles prioritize restraint over spectacle, structure over decoration, hierarchy through type and size instead of color, and images as first-class content.
Clarify requirements
Copy template
Choose layouts
Fill content
Quality checks
Local preview
Iterate
Restraint takes priority over showmanship, and structure over decoration. Hierarchy comes from type and size, not color.
Local installation of the Skill
Use npx skills to install SKILL.md, templates, layout references and the validation script together. Trigger it with a natural-language request to Claude Code, such as "Turn this article into an 8-page Swiss-style presentation."
# Install with one line using the official skills CLI(recommended)
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skillManual git clone installation
Alternatively, clone the repo directly into Claude Code's skills directory; use the corresponding skills path for Codex. The content is data files only, Markdown, HTML and a .mjs validation script, with no compilation step.
git clone https://github.com/op7418/guizang-ppt-skill.git \
~/.claude/skills/guizang-ppt-skillVisual systems and production workflow
guizang-ppt-skill combines two visual systems, more than thirty ready-made layout blocks, preset themes, image-generation rules, screenshot frames, a Swiss validator and a single-file playback runtime. The cards describe each module's responsibilities.
Visual system · 01
Style A
Electronic magazine × e-ink
Large serif headings, restrained whitespace and WebGL fluid/contour/dispersion backgrounds only on Hero slides. For humanistic narratives, industry observations and personal views.
Visual system · 02
Style B
Swiss International
Only sans-serif type, a 12-column grid, one saturated anchor color, square corners and hairlines. For technical products, data reports and engineering or design talks.
Layouts · 03
Style A · 10 版式
Narrative layouts
Ready-made covers, chapter openers, data cards, image grids, pipelines, large quotes, comparisons and mixed layouts.
Layouts · 04
Style B · S01–S22
Locked layouts
22 registered layouts require data-layout="Sxx" on every slide. Locked mode prohibits unlisted custom layouts to preserve the grid.
Themes · 05
9 個主題預設
Fixed palettes
Five Style A themes and four Style B themes. Swiss anchor colors are limited to IKB blue, lemon yellow, lime green and safety orange; arbitrary hex values are prohibited.
Runtime · 06
橫向翻頁引擎
Single-file playback
Keyboard, wheel, touch and bottom-dot navigation; ESC opens the overview. No build, server or dependencies.
Runtime · 07
B 鍵 · 靜態模式
Low-power playback
On slow meeting-room computers, press B to disable WebGL and Motion effects while keeping slide navigation without dropped frames.
Images · 08
image-prompts.md
Codex image generation
Choose placement and ratio before selecting one of seven types, including documentary photography, magazine infographics and flowcharts. Standard ratios only; no cartoons / 3D / neon.
Covers · 09
多平台封面
Multi-platform covers
Export the same content as WeChat Official Account 21:9 covers, 1:1 square cards, Xiaohongshu 3:4 covers and 16:9 video covers.
Assets · 10
screenshot-backgrounds
Screenshot frames
9 CleanShot-style frame sets place product screenshots into slides while retaining layout proportions and whitespace rhythm.
Quality · 11
validate-swiss-deck.mjs
Swiss validator
Check Style B statically for sans-serif type, one accent color, no gradients/shadows/rounded corners and complete layout registration.
Quality · 12
checklist.md
P0–P3 quality checks
Record issues from five iterations, including type hierarchy, image placement, ratios and bottom whitespace. Confirm every item before completion.
Talk duration, page count and narrative structure
The Skill first asks how long the talk lasts because duration determines slide density. Without an outline, it uses the fixed narrative sequence 鉤子 → 背景 → 核心 → 轉折 → 收束.
| Talk duration | Suggested pages | Pacing |
|---|---|---|
| About 15 minutes | ≈ 10 頁 | One main argument with few branches; alternate Hero/non-Hero slides to avoid fatigue |
| About 30 minutes | ≈ 20 頁 | Expand the core over 3–5 pages and add a clear transition page |
| About 45 minutes | ≈ 25–30 頁 | Multiple core sections divided by chapter openers; close over 1–2 pages |
| Default structure without an outline | 鉤子(1p) → 背景(1–2p) → 核心(3–5p) → 轉折(1p) → 收束(1–2p) |
Configuration points in SKILL.md and references
guizang-ppt-skill is by op7418 (Guizang) and is listed on aggregators including Trendshift and SkillsLLM. These tips come from SKILL.md and references; following them in order can avoid most common layout problems.
Choose Style A or Style B first
Style A or B is the mandatory first of seven requirements questions because it determines template, layout and theme files. Decide before starting to avoid rework from mismatched classes.
Source · Official SKILL.md · Step 1
Read the template <style> before writing slides
Step 3.0 checks that every class you intend to use exists in the template <style>. A missing class breaks the layout. Do not write class names from memory.
Source · Official SKILL.md · Step 3.0
Copy layout blocks instead of writing slides from scratch
Style A's 10 layouts are in references/layouts.md; Style B's 22 are in references/layouts-swiss.md. Copy a whole <section> and replace content for faster work without breaking the grid.
Source · Official SKILL.md · Step 3.1
Every Swiss slide requires data-layout
Style B is locked; every slide requires data-layout="Sxx", and normal sections cannot introduce P23/P24 or unlisted layouts. Enable experimental layouts only on explicit user request.
Source · Official swiss-layout-lock.md
Use image height instead of aspect-ratio
Style A image grids use fixed height:26vh, never aspect-ratio. Images must never touch the slide bottom; use align-items:start grids. This is the most common source of broken layouts.
Source · Official SKILL.md · Step 3.2
Choose image placement and ratio before type
image-prompts.md requires choosing placement and ratio first, then one of seven types, including documentary photography, magazine infographics and flowcharts. Use standard ratios only; no cartoons, 3D, neon or SaaS-template appearance.
Source · Official references/image-prompts.md
Run the Swiss validator before completion
Run node scripts/validate-swiss-deck.mjs before finishing Style B. It statically detects serif remnants, multiple accent colors, gradients, shadows, rounded corners and missing data-layout; it is more reliable than visual inspection.
Source · Official scripts/validate-swiss-deck.mjs
Offline effects with motion.min.js
The repo includes 64KB assets/motion.min.js as a Motion One offline fallback, providing entrance animations without a network. Presentations remain complete during meeting-room network outages.
Source · Official repo · assets/
Article-to-presentation seven-step workflow
Use an article on AI Agent trends for a 30-minute technical talk: clarify requirements, choose Style B, copy the Swiss template, apply a theme, fill registered layouts, generate three illustrations with Codex, run the validator and preview locally.
$ You ›
Turn article.md into a presentation for a 30-minute technical talk, with a few images.
claude: Claude ›
Before starting, I need to settle a few things. The first question is mandatory:
hl: Q1 / Style A(electronic magazine) or Style B(Swiss)?
Technical talk with data and architecture → I recommend Style B.
hl: Q2 / Audience and occasion?Q3 / Duration?Q4 / Any source material?
hl: Q5 / How should images be handled?Q6 / Theme color?Q7 / Hard constraints?
$ You ›
Style B. For engineers, 30 minutes, with article.md as the source,
use 3 images, an IKB blue theme, and no large sets of tables.
claude: Claude ›
Understood. 30 minutes ≈ 20 slides, following the narrative arc:
Hook → Background → Core → Transition → Closing.
> mkdir -p talks/ai-agent/ppt/images
> cp SKILL_ROOT/assets/template-swiss.html \
> talks/ai-agent/ppt/index.html
· Cover SWISS-COVER-ASCII · data-layout marked
· Core 6 slides:S04 / S09 / S15 / S22 …
· Closing SWISS-CLOSING-ASCII
images/01-cover.jpg · 21:9 · Documentary photography
images/06-pipeline.png · 16:10 · Flowchart
images/14-system.png · 16:10 · System relationship diagram
$ You › Run the Swiss validator
> node scripts/validate-swiss-deck.mjs talks/ai-agent/ppt/index.html
hl: WARN · Slide 9 title has 6 characters without nowrap
ok: PASS · All 20 slides passed · 0 violation
> open talks/ai-agent/ppt/index.html
ok: Single-file output · No dependencies · ← → Navigate slides · Press B for low-power mode
Input an article and output a single HTML file that follows the layout specifications and can be presented offline.
Workflow mechanisms
First lock specifications with seven questions, then generate using fixed layouts. The selected Style cannot change, every page carries data-layout and the validator runs a static check before completion, producing reproducible consistency.
Template CSS is parameterized: ninety percent of visual adjustments only require changing inline font-size:Xvw, height:Yvh and gap:Zvh, refining a correct structure without rewriting layouts.
Uses and limits of talk-oriented presentations
Five directions for customization and team standardization
The Skill contains data files only: Markdown specifications, HTML templates, layout references and a .mjs validation script, with no compilation. All files can be read and edited for standardized team use without application code. The MIT license allows free forking.
Advanced settings
1. Refine themes within preset constraints. Open references/themes.md or references/themes-swiss.md and adjust existing preset :root variables. Avoid arbitrary hex values to retain layout harmony.
2. Use the S08 map component. Read references/swiss-map-component.md for maps in Swiss presentations. S08 includes a MapLibre extension without needing your own map-library integration.
3. Standardize screenshot frames. The 9 CleanShot-style frame sets in assets/screenshot-backgrounds/ can standardize product demos and be reused across presentations.
4. Add validation to the workflow. Put node scripts/validate-swiss-deck.mjs into publication checks or CI to check Swiss rules automatically and reduce manual review.
5. Maintain your checklist. The repo's checklist.md comes from five iterations by the author. Append your team's layout issues to adapt it to your use cases.
Three further readings
① SKILL.md: Complete seven-step workflow, two visual systems and design principles. ② references/checklist.md: P0–P3 quality checks and layout issues accumulated through five iterations. ③ references/layouts-swiss.md: Style B's 22 registered layouts and experimental-layout documentation.
A fixed design system, locked layouts and automatic validation produce consistent, reproducible results.