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

If the user says "I don't know, you recommend" or provides no direction cue:
**default to Monocle Editorial** without asking, because it has the lowest
failure probability. If the user mentions "AI / benchmark / technical launch":
choose WIRED; "reading / private / social circle": choose Kinfolk; "design /
architecture / portfolio": choose Domus; "research / academic / methodology":
choose 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 · Resolve intent

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

Infer the checklist below from the brief, project metadata, supplied content,
and conversation. If a missing answer would materially change the deck and no
safe default exists, ask only those unresolved fields in one consolidated
question form. Do not ask the checklist one by one.

#### 6-question clarifying checklist

> Direction and theme color are inferred in Step 0 unless the user explicitly
> asks to compare options.

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

From hiktan44/open-design-app, Apache-2.0.