SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsmagazine-web-ppt

magazine-web-ppt

Office & productivity

View repository

Updated 10-15 23:40

About this skill

Magazine Web Ppt

What this Skill does

Generate asingle-file HTMLhorizontal page-turning PPT, with a visual tone of:

  • Digital magazine + e-inkhybrid style
  • WebGL fluid / contour lines / dispersion background(visible on the hero page)
  • Serif headings (Noto Serif SC + Playfair Display) + sans-serif body text (Noto Sans SC + Inter) + monospace metadata (IBM Plex Mono)
  • Lucide linear icons(no emoji)
  • Horizontal left-right page turning(keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC index)
  • Smooth theme interpolation: colors and shader transition smoothly when turning to the hero page

The aesthetic of this skill is not "business PPT", nor "consumer internet UI"—it is like Monocle a magazine after code has been pasted onto it.

When to use

Suitable scenarios：

  • Offline sharing / internal industry talks / private salons
  • AI new product launch / demo day
  • Presentations with a strong personal style
  • Web-based slides that need to be "done in one go, without page-turning tools"

Unsuitable scenarios：

  • Large blocks of tabular data, chart overlays (use regular PPT)
  • Training courseware (insufficient information density)
  • Needs multi-person collaborative editing (this is static HTML)

Workflow

Step 0 · Choose Direction (Direction · the mandatory first step)

Before asking the 6 clarifying questions, first have the user choose one of the 5 magazine directions. Each direction packages "theme color / recommended layout / chrome style / recommended slide count", so choosing a direction answers half of the clarifying questions.

Open references/styles.md,copy the whole section overshow the user the 1-line summary of the 5 directions, then have them choose:

1. Monocle Editorial · 国际杂志风 ✦ 默认
2. WIRED Tech · 数据 + 工程
3. Kinfolk Slow · 慢生活 / 人文
4. Domus Architectural · 建筑 / 空间感
5. Lab / Reference · 学术 + 工艺手册

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

After choosing the direction, create or update in the project directory 项目记录.md, with the first line clearly stating direction + theme color + audience + duration (template see styles.md end).Do not change direction throughout—changing midway = everything before is wasted.

Step 1 · Requirement clarification (mandatory before starting)

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

If the user has only given a topic or a vague idea, use these 6 questions to align one by one before starting. Do not start writing slides based on guesses—once the structure is set wrong, the cost of later rework is very high:

6-question clarification checklist

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

# Question Why ask
1 Who is the audience? What is the sharing scenario?(internal to the industry / business launch / demo day / private gathering) Determines the language style and depth
2 Sharing duration? 15 minutes ≈ 10 pages, 30 minutes ≈ 20 pages, 45 minutes ≈ 25-30 pages (for the recommended range of each direction, see styles.md)
3 Is there any source material?(document / data / old PPT / article link) If there is material, build on it; if not, help him build it
4 Are there any images? Where are they placed? See "Image conventions" below for details
5 Which theme color set do you want? ✓ Already determined by the direction in Step 0
6 Are there any hard constraints?(must include XX data / must not include YY) Avoid rework

Outline assistance (if the user has no outline)

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

钩子(Hook)       → 1 页   : 抛一个反差 / 问题 / 硬数据让人停下来
定调(Context)    → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个
主体(Core)       → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插
转折(Shift)      → 1 页   : 打破预期 / 提出新观点
收束(Takeaway)   → 1-2 页 : 金句 / 悬念问题 / 行动建议

Narrative arc + page count planning + theme rhythm table (see layouts.md),After the three tables are alignedthen proceed to Step 2.

It is recommended to save the outline as 项目记录.md or 大纲-v1.md, to facilitate subsequent iteration.

Image conventions (inform the user)

Before starting, make it clear to the user:

  • Folder location:项目/XXX/ppt/images/ under (same level as index.html )
  • Naming convention:{页号}-{语义}.{ext}, for example 01-cover.jpg / 03-figma.jpg / 05-dashboard.png
    • Zero-pad page numbers for easy sorting
    • Use English for semantics, short, specific, and corresponding to the content
  • Specification recommendations:
    • Single image ≥ 1600px wide (to avoid blurriness on large screens)
    • JPG for photos/screenshots, PNG for transparent UI/charts
    • Keep the total size within 10MB (affects page-turning smoothness)
  • How to replace: keepoverwrite with the same nameis the most reliable (no need to change paths in the HTML); if the file name changes, remember to search globally for images/旧名 and change it to the new name
  • What if there are no images: align with the user; you can first use placeholder color blocks to generate the structure and add images later; but you must inform them that for image-text mixed-layout pages such as layout 4/5/10, the visual effect cannot be verified without images

Step 2 · Copy the template

From assets/template.html copy one to the target location (usually 项目/XXX/ppt/index.html), and at the same time create a images/ folder at the same level to receive images.

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

template.html is afully runnablefile—CSS, WebGL shader, page-turning JS, and font/icon CDN are all preconfigured; only <main id="deck"> contains 3 example slides (cover, section divider, blank filler page).

2.1 · Required placeholder changes (easy to miss）

Immediately after copying, change the following placeholders, otherwise the browser Tab will show awkward text like "[Required] Replace with PPT title":

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

The first thing to do after copying template.html each time: grep for "[Required]" to confirm all replacements are complete.

2.2 · Select theme color (5 presets · customization not allowed)

This skill Only allow choosing one from 5 carefully curated presets, no user-defined hex values accepted—if the color scheme is wrong, the visuals instantly become ugly; protecting aesthetics matters more than giving freedom.

# Theme Suitable for
1 🖋 Ink Classic General / business release / default when you don't know what to choose
2 🌊 Indigo Porcelain Tech / research / data / tech launch events
3 🌿 Forest Ink Nature / sustainability / culture / nonfiction
4 🍂 Kraft Paper Nostalgia / humanities / literature / independent magazines
5 🌙 Dune Art / design / creativity / galleries

Operation:

  1. Recommend one based on the content theme, or directly ask the user which one to choose
  2. Open references/themes.md, find the :root block for the corresponding theme
  3. Replace entirely assets/template.html(copied version) at the beginning :root{ the lines marked with the "theme color" comment in the block (--ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint)
  4. All other CSS goes through var(--...), no other changes needed

Hard rules:

  • One deck uses only one theme; do not switch colors midway
  • Do not accept arbitrary hex values from the user—politely decline and show the 5 options to choose from
  • Do not mix and match (for example, using Ink Classic for ink and Dune for paper)—it will be completely jarring

Step 3 · Fill in content

3.0 · Pre-check: class names must be defined in template.html (most important）

This is the source of all generation problems. The skeleton in layouts.md uses many class names (h-hero / h-xl / stat-card / pipeline / grid-2-7-5 , etc.), if assets/template.html in <style> does not have the corresponding definition, the browser will fall back to default styles—large headings become sans-serif, data cards get crammed together, the pipeline blurs into one line, and images pile up at the bottom of the page.

Before writing any slide code:

  1. First Read assets/template.html(at least read to the end of the <style> block)
  2. Check against the Pre-flight list in layouts.md, confirm that every class you want to use exists in <style> exists in
  3. If a class is missing:In template.html's <style> add it in, do not rewrite it inline in every slide
  4. template.html is the only source of class names—do not invent new class names; if customization is needed, use style="..." inline

Common easily missed classes (must be confirmed to exist in advance): h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot

3.0.5 · Plan the theme rhythm (as important as the class pre-check)

Before choosing layouts, you must first list the theme class for each page (hero dark / hero light / light / dark) and write it into the document or draft for alignment. For detailed rules, see references/layouts.md the "Theme Rhythm Planning" section at the beginning.

Mandatory rules:

  • Each page section must carry one of light / dark / hero light / hero dark , do not write only hero
  • 3 or more consecutive pages with the same theme = visual fatigue, not allowed
  • 8 or more pages must have ≥1 hero dark + ≥1 hero light
  • The entire deck cannot have only light body pages; it must have dark body pages to create breathing room
  • Insert 1 hero page every 3-4 pages (cover/act cover/question/large quote)

Self-check after generation:grep 'class="slide' index.html List all themes, manually confirm the pacing is reasonable before delivering.

3.1 · Pick a layout

Don't write slides from scratch. Open references/layouts.md, which contains 10 ready-made layout skeletons, each a complete copy-pasteable <section> code block:

Layout Purpose
1. Opening cover Page 1
2. Section curtain cover Opening of each act
3. Big data poster Throw out hard data
4. Text left, image right (Quote + Image) Identity contrast / story
5. Image grid Multi-image comparison / screenshot evidence
6. Two-column pipeline (Pipeline) Workflow
7. Suspense closing / question page End of act / closing
8. Big quote page (Big Quote) Serif punchline / takeaway
9. Side-by-side comparison (Before / After) Old model vs new model
10. Mixed text and image layout (Lead Image + Side Text) Information-dense text-and-image page

Choose the corresponding layout, paste it over, and just change the copy and image paths.Be sure to complete the 3.0 pre-flight first。

3.2 · Image aspect ratio rules

Always usestandard ratios, don't use the original image's weird ratios (such as 2592/1798):

Scenario Recommended ratio
Text left, image right main image 16:10 or 4:3 + max-height:56vh
Image grid (multi-image comparison) Fixed height:26vh, don't use aspect-ratio
Small image left + text right 1:1 or 3:2
Full-screen key visual 16:9 + max-height:64vh
Mixed text-and-image small illustration 3:2 or 3:4

Images must never use align-self:end—it will slide to the bottom of the cell and be obscured by the browser toolbar. Use a grid container + align-items:start(already preset in the template) to make images stick to the top; if the left column should stick to the bottom, use flex column + justify-content:space-between。

Component details (fonts, colors, grids, icons, callouts, stat-cards, etc.) are in references/components.md。

Step 4 · Self-check against the checklist

After generating, be sure to open references/checklist.md, and check item by item. It summarizesall the pitfalls encountered during real iteration, and P0-level issues (emoji, images overflowing, title line breaks, font division of labor) must all pass.

A few items to pay special attention to:

  1. Large titles must use a serif font—if they display as sans-serif, 99% of the time the Step 3.0 pre-flight was not done,h-hero classes are missing in template.html
  2. In the image grid, only use height:Nvh, not aspect-ratio(it will overflow)
  3. Images must not pile up at the bottom of the page—don't use align-self:end, use grid + align-items:start(see Step 3.2)
  4. Images may only use standard ratios(16:10 / 4:3 / 3:2 / 1:1 / 16:9), don't copy the original image's weird ratios
  5. Chinese large titles ≤ 5 characters and nowrap(avoid 1 character per line)
  6. Use Lucide, not emoji
  7. Serif for titles, sans-serif for body text, monospace for metadata

Step 5 · Local preview

Just open it directly in the browser with index.html On macOS:

open "项目/XXX/ppt/index.html"

No local server needed. Images use relative paths images/xxx.png。

Step 6 · Iteration

Modify based on user feedback—the template's CSS is already highly parameterized; 90% of adjustments are just changing inline style (font size font-size:Xvw / height height:Yvh / spacing gap:Zvh）。

Resource file guide

magazine-web-ppt/
├── SKILL.md              ← 你正在读
├── assets/
│   ├── template.html     ← 完整的可运行模板（种子文件）
│   └── example-slides.html ← 9 页样例 deck（用于 Examples 预览）
└── references/
    ├── styles.md         ← 5 个 magazine 方向（Monocle / WIRED / Kinfolk / Domus / Lab）
    ├── components.md     ← 组件手册（字体、色、网格、图标、callout、stat、pipeline...）
    ├── layouts.md        ← 10 种页面布局骨架（可直接粘贴）
    ├── themes.md         ← 5 套主题色预设（只能选不能自定义）
    └── checklist.md      ← 质量检查清单（P0/P1/P2/P3 分级）

Recommended loading order：

  1. First read through SKILL.md(this file) to get the overall picture
  2. When choosing a direction in Step 0, read styles.md—each of the 5 directions has its theme colors + recommended layout + chrome style packaged
  3. After completing requirements clarification in Step 1, if the direction needs confirmation, read themes.md to check the palette details
  4. Before starting, Read assets/template.html 's <style> block—this is the sole source of class names; missing classes will cause the entire page's styles to break
  5. Read layouts.md to pick a layout (the top has a Pre-flight class name checklist and theme rhythm plan)
  6. When making detail adjustments, read components.md to look up components
  7. After generating, read checklist.md for self-check (the P0-0 rule at the top enforces pre-flight)

Core design principles (philosophy)

These principles were summarized from 5 rounds of iteration on the "one-person company" presentation. Violating any one of them will make the visual feel collapse.

  1. Restraint over showmanship — The WebGL background only shows through on the hero page; on ordinary pages it is almost invisible
  2. Structure over decoration — No shadows, no floating cards, no padding boxes; all information relies onlarge font sizes + font contrast + grid whitespace
  3. Content hierarchy is defined jointly by font size and font family — Largest serif = main title, medium serif = subtitle, large sans-serif = lead, small sans-serif = body, monospace = metadata
  4. Images are first-class citizens — Images are cropped only at the bottom, ensuring the top and left/right are intact; the grid uses height:Nvh fixed, do not use aspect-ratio to stretch
  5. Rhythm relies on hero pages — Alternating hero and non-hero pages is what keeps the eyes from getting tired
  6. Unified terminology — Skills are Skills; do not mix Chinese and English translations

Reference works

The visual tone of this skill references:

  • 歸藏 "One-Person Company: Organizations Folded by AI" presentation (2026-04-22, 27 pages)
  • Monocle magazine's layout
  • YC president Garry Tan's demo in the blog post "Thin Harness, Fat Skills"

You can treat them as style anchors.