Magazine Web Ppt

What This Skill Does

Generate a single-file HTML horizontal-swipe PPT with the following visual style:

Hybrid style of e-magazine + e-ink
WebGL fluid/contour/dispersion background (visible on hero page)
Serif titles (Noto Serif SC + Playfair Display) + sans-serif body text (Noto Sans SC + Inter) + monospaced metadata (IBM Plex Mono)
Lucide linear icons (no emojis)
Horizontal left/right page turning (keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC for index)
Smooth theme interpolation: Colors and shaders transition smoothly when flipping to the hero page

The aesthetics of this skill are neither "business PPT" nor "consumer internet UI" — it looks like Monocle magazine combined with code.

When to Use

Suitable scenarios:

Offline sharing / internal industry talks / private sessions
AI new product launches / demo days
Speeches with strong personal style
Web-based slides that "can be done once without page-turning tools"

Unsuitable scenarios:

Large sections of tabular data, overlapping charts (use regular PPT)
Training courseware (insufficient information density)
Needs multi-person collaborative editing (this is static HTML)

Workflow

Step 0 · Choose Direction (Mandatory First Step)

Before asking 6 clarification questions, let the user choose one of 5 magazine directions first. Each direction packages "theme color / recommended layout / chrome style / recommended number of slides" — choosing a direction answers half of the clarification questions.

Open

references/styles.md

, copy the entire section to show users the 1-line summary of the 5 directions, then ask them to choose:

1. Monocle Editorial · International Magazine Style ✦ Default
2. WIRED Tech · Data + Engineering
3. Kinfolk Slow · Slow Living / Humanities
4. Domus Architectural · Architecture / Sense of Space
5. Lab / Reference · Academic + Craft Manual

If the user says "I don't know, recommend one" — default to Monocle Editorial, as it has the lowest failure rate. If the user mentions "AI / benchmark / tech launch" — recommend WIRED; "reading / private sharing / social media" — recommend Kinfolk; "design / architecture / portfolio" — recommend Domus; "research / academic / methodology" — recommend Lab.

After choosing the direction, create or update

项目记录.md

(Project Record.md) in the project directory, and write the direction + theme color + audience + duration on the first line (template at the end of

styles.md

). Do not change the direction halfway — changing it will invalidate all previous work.

Step 1 · Requirement Clarification (Mandatory Before Starting)

If the user has provided a complete outline + images, skip directly to Step 2.

If the user only provides a theme or vague idea, align requirements with these 6 questions before starting. Do not start writing slides based on guesses — once the structure is wrong, the cost of later revisions is very high:

6 Clarification Questions

Question 5 is already answered in Step 0 when choosing the direction (direction → theme color). Leave Question 5 blank in the following 5 questions.

#	Question	Why Ask
1	Who is the audience? What is the sharing scenario? (internal industry / commercial launch / demo day / private session)	Determines language style and depth
2	What is the sharing duration?	15 minutes ≈ 10 pages, 30 minutes ≈ 20 pages, 45 minutes ≈ 25-30 pages (recommended range for each direction is in `styles.md` )
3	Are there any original materials? (documents / data / old PPT / article links)	Base on materials if available; build the structure if not
4	Are there any images? Where to place them?	See "Image Guidelines" below
5	~~Which theme color set do you want?~~	✓ Answered in Step 0 via direction selection
6	Are there any hard constraints? (must include XX data / cannot include YY)	Avoid rework

Outline Assistance (If User Has No Outline)

Use the "narrative arc" template to build the skeleton, then fill in content:

Hook       → 1 page   : Present a contrast / question / hard data to grab attention
Context    → 1-2 pages : Explain background / who you are / why you're talking about this
Core       → 3-5 pages : Core content, interspersed with Layout 4/5/6/9/10
Shift      → 1 page   : Break expectations / propose new perspectives
Takeaway   → 1-2 pages : Golden quote / suspense question / action recommendation

Align the narrative arc + page count plan + theme rhythm table (see

layouts.md

), then proceed to Step 2.

It is recommended to save the outline as

项目记录.md

大纲-v1.md

(Outline-v1.md) for subsequent iterations.

Image Guidelines (Inform User)

Clarify the following to the user before starting:

Folder location: Under
```
项目/XXX/ppt/images/
```
(same level as
```
index.html
```
)
Naming convention:
```
{page-number}-{semantics}.{ext}
```
, e.g.,
```
01-cover.jpg
```
/
```
03-figma.jpg
```
/
```
05-dashboard.png
```
- Pad page numbers with zeros for sorting
- Use short, specific English semantics corresponding to content
Specification suggestions:
- Single image ≥ 1600px wide (avoid blurriness on large screens)
- JPG for photos/screenshots, PNG for transparent UI/charts
- Total size ≤ 10MB (affects page-turning smoothness)
How to replace: The safest way is to overwrite with the same name (no need to change paths in HTML); if the file name changes, remember to globally search for
```
images/old-name
```
and replace with the new name
What if no images? Align with the user: you can generate the structure with placeholder blocks first, then add images later; but inform the user that layout pages like 4/5/10 with mixed text and images cannot verify visual effects without images

Step 2 · Copy Template

Copy a copy from

assets/template.html

to the target location (usually

项目/XXX/ppt/index.html

), and create an

images/

folder at the same level to prepare for receiving images.

bash

mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"

template.html

is a fully runnable file — CSS, WebGL shader, page-turning JS, font/icon CDN are all pre-configured, only the

<main id="deck">

contains 3 sample slides (cover, chapter divider, blank filler page).

2.1 · Mandatory Placeholder Replacement (Easy to Miss)

Immediately replace the following placeholders after copying, otherwise the browser tab will display embarrassing text like "[Required] Replace with PPT Title":

Location	Original	Need to Change to
`<title>`	`[必填] 替换为 PPT 标题 · Deck Title`	Actual deck title (e.g., `A New Way of Working · Luke Wroblewski` )

First thing after copying template.html: grep for "[必填]" to confirm all placeholders are replaced.

2.2 · Select Theme Color (5 Presets · Customization Not Allowed)

This skill only allows choosing one of 5 carefully curated preset sets, and does not accept custom hex values from users — wrong color matching will instantly ruin the visual effect, so protecting aesthetics is more important than giving freedom.

#	Theme	Suitable For
1	🖋 Ink Classic	General / commercial launch / default when unsure
2	🌊 Indigo Porcelain	Tech / research / data / tech conferences
3	🌿 Forest Ink	Nature / sustainability / culture / non-fiction
4	🍂 Kraft Paper	Nostalgia / humanities / literature / independent magazines
5	🌙 Dune	Art / design / creativity / galleries

Operations:

Recommend a set based on content theme, or directly ask the user to choose
Open
```
references/themes.md
```
, find the
```
:root
```
block corresponding to the theme
Replace the entire section of lines marked with "theme color" comments (
```
--ink
```
/
```
--ink-rgb
```
/
```
--paper
```
/
```
--paper-rgb
```
/
```
--paper-tint
```
/
```
--ink-tint
```
) in the
```
:root{
```
block at the beginning of the copied
```
assets/template.html
```
Other CSS uses
```
var(--...)
```
, no other changes needed

Hard Rules:

Only use one theme set per deck, do not change colors halfway
Do not accept arbitrary hex values from users — politely decline and show the 5 sets for selection
Do not mix and match (e.g., take ink from Ink Classic and paper from Dune) — it will be completely inconsistent

Step 3 · Fill Content

3.0 · Pre-check: Class Names Must Be Defined in template.html (Most Important)

This is the source of all generation issues. The skeleton in layouts.md uses many class names (

h-hero

h-xl

stat-card

pipeline

grid-2-7-5

, etc.). If there is no corresponding definition in the

<style>

block of

assets/template.html

, the browser will fall back to default styles — large titles become sans-serif, data cards are squeezed together, pipelines are blurred into one line, images pile up at the bottom of the page.

Before writing any slide code:

Read
assets/template.html
first (at least until the end of the
```
<style>
```
block)
Compare with the Pre-flight list in layouts.md to confirm each class you want to use exists in the
```
<style>
```
block
If a class is missing: Add it to the
<style>
block of template.html, do not rewrite it inline in each slide
template.html is the only source of class names — do not invent new class names; use
```
style="..."
```
inline for customization if needed

Common easily missed classes (must confirm existence in advance):

h-hero

h-xl

h-sub

h-md

lead

kicker

meta-row

stat-card

stat-label

stat-nb

stat-unit

stat-note

pipeline-section

pipeline-label

pipeline

step

step-nb

step-title

step-desc

grid-2-7-5

grid-2-6-6

grid-2-8-4

grid-3-3

grid-6

grid-3

grid-4

frame

frame-img

img-cap

callout

callout-src

chrome

foot

3.0.5 · Plan Theme Rhythm (Equally Important as Class Pre-check)

Before choosing layouts, you must list the theme class (

hero dark

hero light

light

dark

) for each page and write it in a document or draft for alignment. Detailed rules are in the "Theme Rhythm Planning" section at the beginning of

references/layouts.md

Mandatory Rules:

Each page section must have one of
```
light
```
/
```
dark
```
/
```
hero light
```
/
```
hero dark
```
, do not only write
```
hero
```
More than 3 consecutive pages with the same theme = visual fatigue, not allowed
Decks with 8+ pages must have ≥1
```
hero dark
```
+ ≥1
```
hero light
```
The entire deck cannot only have
```
light
```
body pages, must have
```
dark
```
body pages to create visual breathing space
Insert 1 hero page (cover/divider/question/big quote) every 3-4 pages

Self-check after generation:

grep 'class="slide' index.html

to list all themes, manually confirm the rhythm is reasonable before delivery.

3.1 · Choose Layout

Do not write slides from scratch. Open

references/layouts.md

, which contains 10 ready-made layout skeletons, each is a complete pasteable

<section>

code block:

Layout	Purpose
1. Opening Cover	Page 1
2. Chapter Divider	Opening of each act
3. Data Big Poster	Present hard data
4. Text Left, Image Right (Quote + Image)	Identity contrast / storytelling
5. Image Grid	Multi-image comparison / screenshot evidence
6. Two-column Pipeline	Workflow
7. Suspense Closure / Question Page	End of act / conclusion
8. Big Quote Page	Serif golden quote / takeaway
9. Side-by-side Comparison (Before / After)	Old mode vs new mode
10. Mixed Text and Image (Lead Image + Side Text)	Information-dense text-image page

Select the corresponding layout, paste it, then modify the copy and image paths. Be sure to complete Step 3.0 pre-check first.

3.2 · Image Ratio Guidelines

Always use standard ratios, do not use weird original ratios (e.g.,

2592/1798

Scenario	Recommended Ratio
Main image for Text Left, Image Right	16:10 or 4:3 + `max-height:56vh`
Image Grid (multi-image comparison)	Fixed `height:26vh` , no aspect-ratio
Small left image + right text	1:1 or 3:2
Full-screen main visual	16:9 + `max-height:64vh`
Small illustration for mixed text and image	3:2 or 3:4

Never use
align-self:end
for images — it will slide to the bottom of the cell and be blocked by the browser toolbar. Use grid container +

align-items:start

(pre-configured in template) to make images stick to the top; if you want the left column to stick to the bottom, use flex column +

justify-content:space-between

Component details (fonts, colors, grids, icons, callouts, stat-cards, etc.) are in

references/components.md

Step 4 · Self-check Against Checklist

After generation, be sure to open

references/checklist.md

and check item by item. It summarizes all pitfalls encountered in real iteration processes, and P0-level issues (emojis, image overflow, title line breaks, font division) must all pass.

Several key points to pay special attention to:

Large titles must be serif fonts — if they display as sans-serif, 99% of the time Step 3.0 pre-check was not done and the
```
h-hero
```
class is missing in template.html
Only use
height:Nvh
in image grids, not
aspect-ratio
(it will cause overflow)
Images cannot pile up at the bottom of the page — do not use
```
align-self:end
```
, use grid +
```
align-items:start
```
(see Step 3.2)
Images can only use standard ratios (16:10 / 4:3 / 3:2 / 1:1 / 16:9), do not copy weird original ratios
Chinese large titles ≤ 5 characters and
nowrap
(avoid one character per line)
Use Lucide, not emojis
Titles use serif, body text uses sans-serif, metadata uses monospaced

Step 5 · Local Preview

Just open

index.html

directly in the browser. On macOS:

bash

open "项目/XXX/ppt/index.html"

No local server is needed. Images use relative paths

images/xxx.png

Step 6 · Iteration

Modify based on user feedback — the template's CSS is highly parameterized, 90% of adjustments are changing inline styles (font size

font-size:Xvw

/ height

height:Yvh

/ gap

gap:Zvh

Resource File Overview

magazine-web-ppt/
├── SKILL.md              ← You are reading this
├── assets/
│   ├── template.html     ← Complete runnable template (seed file)
│   └── example-slides.html ← 9-page sample deck (for preview)
└── references/
    ├── styles.md         ← 5 magazine directions (Monocle / WIRED / Kinfolk / Domus / Lab)
    ├── components.md     ← Component manual (fonts, colors, grids, icons, callouts, stats, pipelines...)
    ├── layouts.md        ← 10 page layout skeletons (can be directly pasted)
    ├── themes.md         ← 5 preset theme color sets (only selectable, not customizable)
    └── checklist.md      ← Quality checklist (P0/P1/P2/P3 grading)

Recommended loading order:

First read
```
SKILL.md
```
(this file) to understand the overall picture
When choosing direction in Step 0, read
styles.md
— each of the 5 directions packages theme color + recommended layout + chrome style
After completing requirement clarification in Step 1, if direction needs confirmation, read
```
themes.md
```
to see color palette details
Read the
<style>
block of
assets/template.html
before starting — this is the only source of class names; missing classes will cause entire page styles to break
Read
```
layouts.md
```
to choose layouts (top has Pre-flight class name list and theme rhythm planning)
Read
```
components.md
```
to check components when adjusting details
Read
```
checklist.md
```
for self-check after generation (top P0-0 rules are mandatory pre-checks)

Core Design Principles (Philosophy)

These principles are summarized from 5 iterations of "one-person company" sharing PPTs. Violating any of them will ruin the visual effect.

Restraint over flashiness — WebGL background only shows through on hero pages, almost invisible on regular pages
Structure over decoration — no shadows, no floating cards, no padding boxes; all information is defined by large font sizes + font contrast + grid white space
Content hierarchy is defined by both font size and font type — largest serif = main title, medium serif = subtitle, large sans-serif = lead, small sans-serif = body, monospaced = metadata
Images are first-class citizens — images are only cropped at the bottom to ensure top and left/right are complete; grids use fixed
```
height:Nvh
```
, do not use
```
aspect-ratio
```
to stretch
Rhythm relies on hero pages — alternating hero and non-hero pages prevents eye fatigue
Terminology consistency — Skills are Skills, do not mix Chinese and English translations

Reference Works

The visual style of this skill references:

Guizang's "One-Person Company: Organizations Folded by AI" sharing (April 22, 2026, 27 pages)
Layouts of Monocle magazine
The demo in YC President Garry Tan's blog "Thin Harness, Fat Skills"

You can use them as style anchors.

magazine-web-ppt

NPX Install

Tags

SKILL.md Content (Chinese)