Guizang PPT Skill · Web PPT / Image Assets / Covers

A web-based PPT skill designed for Agent environments like Claude Code and Codex, capable of generating single-file HTML horizontal-flip PPTs, presentation images, and multi-platform covers.

It comes with two visual systems:

• Style A: Editorial × E-Ink. Inspired by Monocle with code, suitable for storytelling, opinions, sharing, and personal style expression.
• Style B: Swiss International Style. Grid-based, single high-saturation accent color, right angles, hairline rules, extreme font size contrast, suitable for facts, products, analysis, and methodology.

Preview

Old Theme · Style A Editorial

New Theme · Style B Swiss International

Use Cases

✅ Suitable for: offline talks / internal industry speeches / private sharing sessions / AI product launches / demo days / presentations with strong personal style

❌ Not suitable for: large tables of data / training materials (insufficient information density) / collaborative editing (static HTML)

Core Capabilities

• 🖋 Dual visual systems: Editorial for narrative, Swiss for factual presentation
• 📐 Horizontal left-right flip: keyboard ← → / scroll wheel / touch swipe / bottom dots / ESC index
• 🧩 Style A 10 layouts: cover, chapter, data poster, text-image, image grid, pipeline, comparison, etc.
• 🧱 Style B 22 locked layouts: Cover, Statement, KPI Tower, Loop Diagram, Duo Compare, Image Hero, Closing Manifesto, etc.
• 🎨 Theme color presets: Style A 5 e-ink themes, Style B 4 Swiss high-saturation accent colors
• 🖼 Optional Codex image generation: Use GPT-Image 2.0 / GPT-M 2.0 to generate documentary photos, infographics, flowcharts, system diagrams, UI scenarios, inserted at template proportions
• 📰 Multi-platform covers: Generate 21:9 WeChat header, 1:1 share card, 3:4 Xiaohongshu, 16:9 video cover using the same visual rules
• 📴 Low-performance static mode: Press B to disable WebGL/canvas animations, falling back to static backgrounds
• 📄 Single-file HTML: No build step, no server needed, open directly in browser

How It Works

1. Choose style — Style A Editorial or Style B Swiss International
2. Clarify requirements — 7 questions: style, audience, duration, materials, image/screenshot needs, theme color, hard constraints
3. Copy template — assets/template.html for Style A, assets/template-swiss.html for Style B
4. Fill content — Create a topic rhythm table, then pick, paste, and edit text from the corresponding layout skeletons
5. Optional image generation — In Codex, ask if user wants to generate images using GPT-Image 2.0 / GPT-M 2.0, then insert at page proportions
6. Self-check — Reference references/checklist.md, all P0 issues must pass; for Swiss style, also run the layout validator
7. Preview — Open in browser
8. Iterate — Adjust font size, height, spacing via inline styles

What You Need to Provide

• Article, Markdown, or material files
• Clear style preference (Style A or Style B)
• Additional requirements for images, screenshots, or covers
• Optional: theme color, page count, audience, etc.

What You Get

• A single-file HTML horizontal-flip PPT that opens directly in a browser for presentation
• On-demand PPT images (documentary photos, infographics, flowcharts, UI scenarios, etc.)
• Multi-platform covers (21:9 WeChat header, 1:1 share card, 3:4 Xiaohongshu, 16:9 video cover, etc.)

Example Requests

Describe your needs to the agent, for example:

Create an 8-page Swiss-style PPT based on this article, need 3 images that match the template slot proportions.

Turn this product analysis document into an editorial-style PPT, focusing on narrative and storytelling.

Based on the theme of this PPT, create two covers: a 21:9 WeChat header and a 1:1 share card, keeping the visual consistent.

Redesign these product screenshots into unified 16:10 PPT images, preserving key information and without adding footers or titles.

Selection Guide

Style A Editorial

• Suitable for storytelling, opinions, sharing, personal style
• 5 theme color presets (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune)

Style B Swiss International

• Suitable for facts, products, analysis, methodology
• 4 theme color presets (Klein Blue IKB, Lemon Yellow, Lemon Green, Safety Orange)
• 22 locked layouts with strict validation; custom page structures are not allowed

Theme Color Presets

Custom hex values are not allowed; only presets can be selected.

Style A Editorial Themes

Preview	Theme	Core Colors & Suitable Scenarios
	🖋 Ink Classic	#0a0a0b / #f1efea. Universal default, business presentations, safest choice when unsure.
	🌊 Indigo Porcelain	#0a1f3d / #f1f3f5. Technology, research, AI, product launches.
	🌿 Forest Ink	#1a2e1f / #f5f1e8. Nature, sustainability, culture, non-fiction.
	🍂 Kraft Paper	#2a1e13 / #eedfc7. Nostalgia, humanities, reading, history, literature.
	🌙 Dune	#1f1a14 / #f0e6d2. Art, design, creativity, fashion, gallery-like content.

To switch themes, replace the 6 variables in :root{} at the beginning of template.html; all other CSS uses var(--...).

Style B Swiss Themes

Preview	Theme	Accent Color & Suitable Scenarios
	🔵 Klein Blue IKB	#002FA7. Universal default, business presentations, AI products, methodology.
	🟡 Lemon Yellow	#FFD500. Youth, sports, retail, consumer goods, Y2K retro.
	🟢 Lemon Green	#C5E803. Ecology, sustainability, health, Gen Z brands.
	🟠 Safety Orange	#FF6B35. Warning, news, industry, sports, energy themes.

If the user says "Swiss-style PPT" without specifying a color, Klein Blue IKB is the default recommendation.

Notes

• Platform support: Claude Code and Codex are natively supported; local agents like Cursor are usable (need file read/write and shell command execution); WorkBuddy is being adapted; ordinary chatbots are not recommended (without file system and browser preview, it is difficult to reliably generate a complete deck).
• Limitations: Not suitable for large tables of data, training materials, or scenarios requiring collaborative editing.
• Low-performance static mode: Press B to disable WebGL/canvas animations, falling back to static backgrounds.
• Custom colors are not allowed: Only presets can be selected to maintain visual integrity.
• Image generation is optional: A PPT can be generated without images; the image generation process is only used when needed.
• Output is HTML: The core deliverable is HTML; PPTX export is not supported. If a PPTX is needed, it is recommended to convert the HTML page as a visual draft.

Core Design Principles

1. Restraint over flashiness — WebGL backgrounds only appear on hero pages
2. Structure over decoration — Information relies on font size, contrast, and grid whitespace, not shadows or floating cards
3. Images are first-class citizens — Images must align with the text content area, have stable proportions, and only crop the bottom; top and sides remain intact
4. Images as pure materials — Generated images should contain only the core photo/chart/UI, without PPT footers, titles, or labels
5. Rhythm through hero pages — Alternating hero/non-hero pages prevents fatigue
6. Low-performance fallback — Pressing B switches to static mode; dynamic effects must not become a readability burden
7. Unified terminology — "Skills" is used consistently, no mixing of Chinese and English
8. Swiss style must adhere to layouts — Style B prioritizes the original 22 layouts; do not invent non-existent pages for variety

Visual References

• Monocle magazine layouts
• YC Garry Tan "Thin Harness, Fat Skills"
• Massimo Vignelli / Helvetica Forever / Swiss International Style grid system
• 歸藏 (Guizang) offline presentation PPT series