magazine-web-ppt

Files (12)

• LICENSE
• README.en.md
• README.md
• README.pt-BR.md
• SKILL.md
• example-slides.html · assets/
• template.html · assets/
• checklist.md · references/
• components.md · references/
• layouts.md · references/
• styles.md · references/
• themes.md · references/

SKILL.md (first lines)

# 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 · Pick a direction (Direction · the mandatory first step)

**Before asking the 6 clarifying questions, first let the user pick one of the 5 magazine directions**. Each direction packages up its "theme color / recommended layouts / chrome style / recommended slide count," and picking a direction answers half the clarifying questions.

Open `references/styles.md`, **copy the whole section over** to show the user the 1-line summary of the 5 directions, then let them choose:

```
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
```

If the user says "I don't know, you recommend": **default to Monocle Editorial**, because it has the lowest failure probability. If the user mentions "AI / benchmark / technical launch": recommend WIRED; "reading / private / social circle": recommend Kinfolk; "design / architecture / portfolio": recommend Domus; "research / academic / methodology": recommend Lab.

After picking a direction, create or update `项目记录.md` (Project Record) in the project folder, with the first line clearly stating direction + theme color + audience + duration (see the template at the end of `styles.md`). **Do not change direction at any point**: switching midway = everything before is wasted.

### Step 1 · Clarify intent (**do before starting**)

**If the user has already given a complete outline + images**, you can skip straight to Step 2.

**If the user only gave a topic or a vague idea**, align on these 6 questions one by one before starting. Don't begin writing slides based on guesses: once the structure is wrong, later rework is very costly:

#### 6-question clarifying checklist

> Question 5 is already answered when you pick a direction in Step 0 (direction → theme color). In the 5 questions below, just leave question 5 blank.

| # | Question | Why ask it |
|---|------|-----------|
| 1 | **Who is the audience? Sharing scenario?** (internal industry / commercial launch / demo day / private salon) | determines the language style and depth |
| 2 | **Talk duration?** | 15 min ≈ 10 pages, 30 min ≈ 20 pages, 45 min ≈ 25-30 pages (see each direction's recommended range in `styles.md`) |
| 3 | **Any source material?** (documents / data / old PPT / article links) | with material, build on it; without, help them build |
| 4 | **Any images? Where are they?** | see the "Image convention" below |
| 5 | ~~**Which theme color do you want?**~~ | ✓ already decided by the direction in Step 0 |
| 6 | **Any hard constraints?** (must include XX data / must not show YY) | avoids rework |

#### Outline assistance (if the user has no outline)

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

```
Hook       → 1 page   : throw out a contrast / question / hard number that makes people stop
Context    → 1-2 pages : explain the background / who you are / why this topic
Core       → 3-5 pages : the core content, interleaving Layouts 4/5/6/9/10
Shift      → 1 page    : break the expectation / propose a new view
Takeaway   → 1-2 pages : a punchline / a suspenseful question / a call to action
```

Narrative arc + page-count plan + theme rhythm table (see `layouts.md`); **align all three tables** before moving to Step 2.

It's best to save the outline as `项目记录.md` (Project Record) or `大纲-v1.md` (Outline v1) for later iteration.

#### Image convention (tell the user)

Make these clear to the user before starting:

- **Folder location**: under `项目/XXX/ppt/images/` (sibling to `index.html`)
- **Naming convention**: `{page number}-{semantic}.{ext}`, e.g. `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`
  - Pad the page number with zeros for easy sorting
  - Use English for the semantic part, short, specific, matching the content
- **Spec recommendations**:
  - Each image ≥ 1600px wide (avoid blur on large screens)
  - JPG for photos/screenshots, PNG for transparent UI/charts
  - Keep total size under 10MB (affects paging smoothness)
- **How to replace**: **same-name overwrite** is the most stable (no need to change the path in the HTML); if the filename changes, remember to globally search `images/oldname` and change it to the new name
- **What if there are no images**: align with the user; you can generate the structure with placeholder color blocks first and fill in the images later, but tell them that image-text mix pages like layouts 4/5/10 can't have their visuals verified without images

### Step 2 · Copy the template

Copy `assets/template.html` to the target location (usually `项目/XXX/ppt/index.html`), and create an `images/` folder as a sibling, ready to receive images.

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

`template.html` is a **complete, runnable** file: CSS, WebGL shader, paging JS, font/icon CDNs are all preset; only inside `<main id="deck">` are there 3 example slides (cover, act divider, blank filler page).

#### 2.1 · Placeholders you must change (**easy to miss**)

Right after copying, change the placeholders below, or the browser tab will show awkward text like "[必填] replace with the PPT title":

| Location | Original | Change to |
|------|------|--------|
| `<title>` | `[必填] 替换为 PPT 标题 · Deck Title` | the actual deck title (e.g. `一种新的工作方式 · Luke Wroblewski`) |

The first thing to do every time you finish copying template.html: grep for "[必填]" to confirm everything is replaced.

From jhy0285/monofield, Apache-2.0.

More from jhy0285/monofield