Magazine Web Ppt

What this skill does

Generates a single-file HTML horizontal-swipe deck with a visual tone of:

• A electronic magazine + electronic ink hybrid style
• A WebGL fluid / contour / dispersion background (visible on hero pages)
• Serif headlines (Noto Serif SC + Playfair Display) + sans-serif body (Noto Sans SC + Inter) + monospace metadata (IBM Plex Mono)
• Lucide line icons (no emoji)
• Horizontal left/right paging (keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC index)
• Smooth theme interpolation: when you flip to a hero page, the colors and shader transition softly

This skill's aesthetic is not "corporate PPT," nor "consumer-internet UI": it looks like Monocle magazine after code was stitched onto it.

When to use

Suitable scenarios:

• Offline talks / internal industry talks / private salons
• AI new-product launches / demo day
• Talks with a strong personal style
• A web version of slides that you "make once, with no paging tool needed"

Unsuitable scenarios:

• Long stretches of tabular data, stacked charts (use a regular PPT)
• Training courseware (information density too low)
• Multi-person collaborative editing (this is static HTML)

Workflow

Step 0 · Infer a direction; ask only when comparison is requested

Infer one of the 5 magazine directions from the brief, audience, content, and known context. Each direction packages its theme color, recommended layouts, chrome style, and slide count. Use the closest fit and continue without asking.

Only when the user explicitly asks to see or compare direction options, open references/styles.md and present the 1-line summaries in one direction-cards question form:

1. Monocle Editorial · International magazine style ✦ default
2. WIRED Tech · Data + engineering
3. Kinfolk Slow · Slow living / humanist
4. Domus Architectural · Architecture / sense of space
5. Lab / Reference · Academic + craft manual