magazine-web-ppt

1# Magazine Web Ppt
2 
3## What this skill does
4 
5Generates a **single-file HTML** horizontal-swipe deck with a visual tone of:
6 
7- A **electronic magazine + electronic ink** hybrid style
8- A **WebGL fluid / contour / dispersion background** (visible on hero pages)
9- **Serif headlines (Noto Serif SC + Playfair Display) + sans-serif body (Noto Sans SC + Inter) + monospace metadata (IBM Plex Mono)**
10- **Lucide line icons** (no emoji)
11- **Horizontal left/right paging** (keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC index)
12- **Smooth theme interpolation**: when you flip to a hero page, the colors and shader transition softly
13 
14This skill's aesthetic is not "corporate PPT," nor "consumer-internet UI": it looks like *Monocle* magazine after code was stitched onto it.
15 
16## When to use
17 
18**Suitable scenarios**:
19- Offline talks / internal industry talks / private salons
20- AI new-product launches / demo day
21- Talks with a strong personal style
22- A web version of slides that you "make once, with no paging tool needed"
23 
24**Unsuitable scenarios**:
25- Long stretches of tabular data, stacked charts (use a regular PPT)
26- Training courseware (information density too low)
27- Multi-person collaborative editing (this is static HTML)
28 
29## Workflow
30 
31### Step 0 · Infer a direction; ask only when comparison is requested
32 
33Infer one of the 5 magazine directions from the brief, audience, content, and
34known context. Each direction packages its theme color, recommended layouts,
35…