magazine-web-ppt

Files (10)

• LICENSE
• README.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

Generate a **single-file HTML** landscape presentation slide deck, with a visual tone of:

- **Digital Magazine + E-Ink** hybrid style
- **WebGL fluid / contour line / chromatic dispersion background** (visible on hero slides)
- **Serif Title (Noto Serif SC + Playfair Display) + Sans-serif Body (Noto Sans SC + Inter) + Monospace Metadata (IBM Plex Mono)**
- **Lucide linear icons** (avoid emojis)
- **Horizontal side-scrolling navigation** (keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC index)
- **Theme smooth interpolation**: colors and shader transition smoothly when scrolling to a hero page

The aesthetics of this skill is not "business PPT", nor "consumer internet UI" — it resembles *Monocle* magazine with code applied.

## When to Use

**Suitable Scenarios**:
- Offline sharing / industry internal keynote / private seminar
- AI new product launch / demo day
- Presentations with strong personal style
- Needs web-based slides that "render in one go without a paging control"

**Unsuitable Scenarios**:
- Large table data, chart overlays (use traditional PPT)
- Training courseware (insufficient information density)
- Requires multi-person collaborative editing (this is a static HTML)

## Workflow

### Step 0 · Choose Direction (Direction · Mandatory First Step)

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

Open `references/styles.md`, **copy the entire section** to show the user the 5 directions' 1-line summaries, then let them choose:

```
1. Monocle Editorial · International Magazine Style ✦ Default
2. WIRED Tech · Data + Engineering
3. Kinfolk Slow · Slow Living / Humanities
4. Domus Architectural · Architecture / Spatial Feel
5. Lab / Reference · Academic + Craftsmanship Manual
```

If the user says "I don't know, please recommend" — **recommend Monocle Editorial by default**, because it has the lowest failure probability. If the user mentions "AI / benchmark / tech release" — recommend WIRED; "reading / private sharing / moments" — recommend Kinfolk; "design / architecture / portfolio" — recommend Domus; "research / academic / methodology" — recommend Lab.

After picking a direction, create or update `Project Records.md` (project-records.md) in the project directory; write the direction + theme color + audience + duration on the first line (see end of `styles.md` for template). **Do not change directions midway** — changing halfway means starting all over again.

### Step 1 · Requirements Clarification (Mandatory Before Starting)

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

**If the user only provides a topic or a vague idea**, align with them using these 6 questions one by one before proceeding. Do not start writing slides based on guesses — once the structure is defined incorrectly, the cost of later revision is extremely high:

#### 6-Question Clarification Checklist

> Question 5 has been answered during the Step 0 direction selection (direction → theme color). Among the 5 questions below, Question 5 can be left blank.

| # | Question | Why ask |
|---|------|-----------|
| 1 | **Who is the audience? Sharing context?** (Internal industry / commercial launch / demo day / private session) | Determines language style and depth |
| 2 | **Presentation duration?** | 15 minutes ≈ 10 pages, 30 minutes ≈ 20 pages, 45 minutes ≈ 25-30 pages (recommended range for each direction is in `styles.md`) |
| 3 | **Is there any raw material?** (Document / data / old PPT / article link) | If raw material is present, build based on it; otherwise, assist in constructing |
| 4 | **Are there images? Where are they?** | See "Image Conventions" below for details |
| 5 | ~~**Which theme color palette do you want?**~~ | ✓ Already determined in Step 0 by direction selection |
| 6 | **Are there hard constraints?** (must include XX data / must not show YY) | Avoid rework |

#### Outline Assistance (if the user does not have an outline)

Build the skeleton using the "Narrative Arc" template, then fill in the content:

```
Hook       → 1 page : present a contrast / question / hard data to captivate attention
Context    → 1-2 pages : explain background / who you are / why this talk matters
Body (Core)       → 3-5 pages : core content, interleaved with Layouts 4/5/6/9/10
Shift      → 1 page : disrupt expectations / present a fresh perspective
Takeaway   → 1-2 pages : golden quote / open question / call to action
```

Narrative arc + page planning + theme rhythm table (see `layouts.md`), **align these three tables** before proceeding to Step 2.

It is recommended to save the outline as `Project-Record.md` or `Outline-v1.md` for subsequent iterations.

#### Image Conventions (inform the user)

Clarify to the user before starting:

- **Folder location**: under `Project/XXX/ppt/images/` (in the same directory as `index.html`)
- **Naming Convention**: `{page_number}-{semantics}.{ext}`, e.g., `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`
  - Pad page numbers with zero for easy sorting
  - Semantics in English; short, concrete, and aligned with content
- **Specification Suggestions**:
  - Single image ≥ 1600px wide (avoids blurriness on large screens)
  - JPG for photos/screenshots, PNG for transparent UI/charts
  - Control total size under 10MB (affects slide transition smoothness)
- **How to replace**: keeping the **same name overwrite** is most stable (no need to change paths in HTML); if filename changed, remember to globally search and replace `images/old_name` with new name
- **What if there are no images**: Align with the user; you can first use placeholder color blocks to generate structure and fill in actual images later; but inform them that text-image mixed layout pages like layout 4/5/10 cannot verify visual effects without images

### Step 2 · Copy Template

Copy one from `assets/template.html` to the target location (usually `project/XXX/ppt/index.html`), and create an `images/` folder in the same directory to receive images.

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

`template.html` is a **fully functional, runnable** file — CSS, WebGL shader, page flipping JS, and font/icon CDNs are all preset, and only inside `<main id="deck">` are 3 example slides (cover, section divider, blank fill page).

#### 2.1 · Mandatory Placeholders to Modify (**Easy to Miss**)

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

| Location | Original | To be changed to |
|------|------|--------|
| `<title>` | `[Required] Replace with PPT title · Deck Title` | Actual deck title (e.g. `A New Way of Working · Luke Wroblewski`) |

First task after copying template.html: grep for "[Required]" to confirm all are replaced.

From galyarderlabs/galyarder-design, Apache-2.0.

More from galyarderlabs/galyarder-design