• Hybrid style of e-magazine + e-ink
• WebGL fluid/contour/dispersion background (visible on hero page)
• Serif titles (Noto Serif SC + Playfair Display) + sans-serif body text (Noto Sans SC + Inter) + monospaced metadata (IBM Plex Mono)
• Lucide linear icons (no emojis)
• Horizontal left/right page turning (keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC for index)
• Smooth theme interpolation: Colors and shaders transition smoothly when flipping to the hero page

• Offline sharing / internal industry talks / private sessions
• AI new product launches / demo days
• Speeches with strong personal style
• Web-based slides that "can be done once without page-turning tools"

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

Question 5 is already answered in Step 0 when choosing the direction (direction → theme color). Leave Question 5 blank in the following 5 questions.

styles.md

• Folder location: Under

  项目/XXX/ppt/images/

  (same level as

  index.html

  )
• Naming convention:

  {page-number}-{semantics}.{ext}

  , e.g.,

  01-cover.jpg

  /

  03-figma.jpg

  /

  05-dashboard.png

  • Pad page numbers with zeros for sorting
  • Use short, specific English semantics corresponding to content
• Specification suggestions:
  • Single image ≥ 1600px wide (avoid blurriness on large screens)
  • JPG for photos/screenshots, PNG for transparent UI/charts
  • Total size ≤ 10MB (affects page-turning smoothness)
• How to replace: The safest way is to overwrite with the same name (no need to change paths in HTML); if the file name changes, remember to globally search for

  images/old-name

  and replace with the new name
• What if no images? Align with the user: you can generate the structure with placeholder blocks first, then add images later; but inform the user that layout pages like 4/5/10 with mixed text and images cannot verify visual effects without images

1. Recommend a set based on content theme, or directly ask the user to choose
2. Open

   references/themes.md

   , find the

   :root

   block corresponding to the theme
3. Replace the entire section of lines marked with "theme color" comments (

   --ink

   /

   --ink-rgb

   /

   --paper

   /

   --paper-rgb

   /

   --paper-tint

   /

   --ink-tint

   ) in the

   :root{

   block at the beginning of the copied

   assets/template.html

4. Other CSS uses

   var(--...)

   , no other changes needed

• Only use one theme set per deck, do not change colors halfway
• Do not accept arbitrary hex values from users — politely decline and show the 5 sets for selection
• Do not mix and match (e.g., take ink from Ink Classic and paper from Dune) — it will be completely inconsistent

h-hero

h-xl

stat-card

pipeline

grid-2-7-5

<style>

assets/template.html

1. Read

   assets/template.html

   first (at least until the end of the

   <style>

   block)
2. Compare with the Pre-flight list in layouts.md to confirm each class you want to use exists in the

   <style>

   block
3. If a class is missing: Add it to the

   <style>

   block of template.html, do not rewrite it inline in each slide
4. template.html is the only source of class names — do not invent new class names; use

   style="..."

   inline for customization if needed

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

hero dark

hero light

light

dark

references/layouts.md

• Each page section must have one of

  light

  /

  dark

  /

  hero light

  /

  hero dark

  , do not only write

  hero

• More than 3 consecutive pages with the same theme = visual fatigue, not allowed
• Decks with 8+ pages must have ≥1

  hero dark

  + ≥1

  hero light

• The entire deck cannot only have

  light

  body pages, must have

  dark

  body pages to create visual breathing space
• Insert 1 hero page (cover/divider/question/big quote) every 3-4 pages

grep 'class="slide' index.html

references/checklist.md

1. Large titles must be serif fonts — if they display as sans-serif, 99% of the time Step 3.0 pre-check was not done and the

   h-hero

   class is missing in template.html
2. Only use

   height:Nvh

   in image grids, not

   aspect-ratio

   (it will cause overflow)
3. Images cannot pile up at the bottom of the page — do not use

   align-self:end

   , use grid +

   align-items:start

   (see Step 3.2)
4. Images can only use standard ratios (16:10 / 4:3 / 3:2 / 1:1 / 16:9), do not copy weird original ratios
5. Chinese large titles ≤ 5 characters and

   nowrap

   (avoid one character per line)
6. Use Lucide, not emojis
7. Titles use serif, body text uses sans-serif, metadata uses monospaced

magazine-web-ppt/
├── SKILL.md              ← You are reading this
├── assets/
│   ├── template.html     ← Complete runnable template (seed file)
│   └── example-slides.html ← 9-page sample deck (for preview)
└── references/
    ├── styles.md         ← 5 magazine directions (Monocle / WIRED / Kinfolk / Domus / Lab)
    ├── components.md     ← Component manual (fonts, colors, grids, icons, callouts, stats, pipelines...)
    ├── layouts.md        ← 10 page layout skeletons (can be directly pasted)
    ├── themes.md         ← 5 preset theme color sets (only selectable, not customizable)
    └── checklist.md      ← Quality checklist (P0/P1/P2/P3 grading)

1. First read

   SKILL.md

   (this file) to understand the overall picture
2. When choosing direction in Step 0, read

   styles.md

   — each of the 5 directions packages theme color + recommended layout + chrome style
3. After completing requirement clarification in Step 1, if direction needs confirmation, read

   themes.md

   to see color palette details
4. Read the

   <style>

   block of

   assets/template.html

   before starting — this is the only source of class names; missing classes will cause entire page styles to break
5. Read

   layouts.md

   to choose layouts (top has Pre-flight class name list and theme rhythm planning)
6. Read

   components.md

   to check components when adjusting details
7. Read

   checklist.md

   for self-check after generation (top P0-0 rules are mandatory pre-checks)

These principles are summarized from 5 iterations of "one-person company" sharing PPTs. Violating any of them will ruin the visual effect.

1. Restraint over flashiness — WebGL background only shows through on hero pages, almost invisible on regular pages
2. Structure over decoration — no shadows, no floating cards, no padding boxes; all information is defined by large font sizes + font contrast + grid white space
3. Content hierarchy is defined by both font size and font type — largest serif = main title, medium serif = subtitle, large sans-serif = lead, small sans-serif = body, monospaced = metadata
4. Images are first-class citizens — images are only cropped at the bottom to ensure top and left/right are complete; grids use fixed

   height:Nvh

   , do not use

   aspect-ratio

   to stretch
5. Rhythm relies on hero pages — alternating hero and non-hero pages prevents eye fatigue
6. Terminology consistency — Skills are Skills, do not mix Chinese and English translations

• Guizang's "One-Person Company: Organizations Folded by AI" sharing (April 22, 2026, 27 pages)
• Layouts of Monocle magazine
• The demo in YC President Garry Tan's blog "Thin Harness, Fat Skills"