diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..a8f467e --- /dev/null +++ b/README.en.md @@ -0,0 +1,119 @@ +# Magazine Web PPT Β· Editorial-Style Web Slide Deck Skill + +A [Claude Code / Claude Agent Skills](https://agentskills.io/) skill that generates **single-file HTML horizontal-swipe decks** with an "**editorial magazine Γ— electronic ink**" aesthetic β€” picture *Monocle* with code stitched in. + +> Distilled by [Guizang](https://x.com/op7418) from offline talks like "One-Person Company: Organizations Folded by AI" and "A New Way of Working." Every pitfall hit during those decks is logged in `checklist.md`. + +![Magazine Web PPT preview](https://github.com/user-attachments/assets/5dc316a2-401c-4e37-9123-ea081b6ae470) + +## What you get + +- πŸ–‹ **Three-tier type system**: serif for headlines, sans-serif for body, mono for metadata +- 🌊 **WebGL fluid / dispersion backgrounds** β€” visible on hero pages, restrained on body pages +- πŸ“ **Horizontal swipe navigation**: ← β†’ arrows / scroll wheel / touch swipe / bottom dots / ESC for index +- 🎨 **5 curated theme presets**: Ink Classic / Indigo Porcelain / Forest Ink / Kraft Paper / Dune +- 🧩 **10 page layouts**: cover, act divider, big numbers, lead image + text, image grid, pipeline, hero question, big quote, before/after, image + text mix +- πŸ“„ **Single HTML file** β€” no build, no server, open directly in the browser + +## Fits / Doesn't fit + +**βœ… Fits**: offline talks, industry keynotes, private salons, AI product launches, demo day, presentations with strong personal voice + +**❌ Doesn't fit**: data-heavy tables, training decks (density too low), multi-user collaborative editing (static HTML) + +## Install + +### Option 1: Paste this to an AI (recommended) + +> Install the `guizang-ppt-skill` Claude Code skill for me. Steps: +> +> 1. Make sure `~/.claude/skills/` exists (create if not) +> 2. Run `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt` +> 3. Verify: `ls ~/.claude/skills/magazine-web-ppt/` should show `SKILL.md`, `assets/`, `references/` +> 4. Tell me when done. Later, saying things like "make me a magazine-style deck" will trigger this skill. + +Paste the block above into Claude Code / Cursor / any AI agent with shell access and it handles the install. + +### Option 2: Manual CLI + +```bash +git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt +``` + +### How to trigger it + +Once installed, Claude Code auto-detects the skill. Trigger phrases: + +- "Make me a magazine-style deck" +- "Generate a horizontal swipe deck" +- "Editorial magazine style presentation" +- "Electronic ink slides for my talk" + +## Workflow + +The skill is a structured 6-step flow; Claude walks you through each: + +1. **Clarify intent** β€” 6-question checklist: audience, duration, source material, images, theme, hard constraints +2. **Copy template** β€” `assets/template.html` β†’ project folder, update ``, swap theme vars +3. **Fill content** β€” pick from 10 layout skeletons, paste, edit copy (with class-name pre-flight + theme rhythm plan) +4. **Self-check** β€” match against `references/checklist.md`; P0 issues must all pass +5. **Preview** β€” open the HTML in a browser +6. **Iterate** β€” use inline styles to tune font size, height, spacing + +Full spec in [`SKILL.md`](./SKILL.md). + +## Directory + +``` +magazine-web-ppt/ +β”œβ”€β”€ SKILL.md ← main skill file: workflow, principles, common mistakes +β”œβ”€β”€ README.md ← Chinese README +β”œβ”€β”€ README.en.md ← this file +β”œβ”€β”€ assets/ +β”‚ └── template.html ← runnable seed HTML (CSS + WebGL + swipe JS pre-wired) +└── references/ + β”œβ”€β”€ components.md ← component catalog (type, color, grid, icons, callout, stat, pipeline) + β”œβ”€β”€ layouts.md ← 10 layout skeletons (paste-ready) + β”œβ”€β”€ themes.md ← 5 theme presets (pick, don't customize) + └── checklist.md ← quality checklist (P0 / P1 / P2 / P3 tiers) +``` + +## Theme presets + +Pick from `references/themes.md`. **Custom hex values are not allowed** β€” protecting the aesthetic matters more than freedom of choice. + +| Theme | Best for | +|------|---------| +| πŸ–‹ Ink Classic | general default, commercial launches, when in doubt | +| 🌊 Indigo Porcelain | tech / research / AI / technical keynotes | +| 🌿 Forest Ink | nature / sustainability / culture / non-fiction | +| πŸ‚ Kraft Paper | nostalgic / humanist / literary / indie zines | +| πŸŒ™ Dune | art / design / creative / gallery | + +Switching themes only requires replacing the 6 variables at the top of `template.html`'s `:root{}` block β€” all other CSS flows through `var(--...)`. + +## Core design principles + +1. **Restraint over flash** β€” WebGL backgrounds only bleed through on hero pages +2. **Structure over decoration** β€” information hierarchy via type size + typeface + grid whitespace, not shadows or floating cards +3. **Images are first-class citizens** β€” crop only from the bottom; top and sides stay intact +4. **Rhythm lives on hero pages** β€” hero / non-hero alternation keeps the eye from fatiguing +5. **Terms stay consistent** β€” Skills is Skills; no mix-and-match translations + +## Visual references + +- [*Monocle*](https://monocle.com) magazine layouts +- YC Garry Tan β€” "Thin Harness, Fat Skills" +- Guizang's offline talk deck series + +## Contributing + +Bugs, layout issues, new layout requests β€” Issues and PRs welcome. Prioritize: + +- Add new classes to `template.html` first; don't let `layouts.md` reference undefined classes +- Log pitfalls into `checklist.md` at the matching P0 / P1 / P2 / P3 tier +- New theme colors go into `themes.md` with a recommended use case + +## License + +MIT Β© 2026 [op7418](https://github.com/op7418) diff --git a/README.md b/README.md index bdc7d52..5880489 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Magazine Web PPT Β· η”΅ε­ζ‚εΏ—ι£Žη½‘ι‘΅ PPT Skill +> 🌏 **English version: [README.en.md](./README.en.md)** + δΈ€δΈͺ [Claude Code / Claude Agent Skills](https://agentskills.io/) ζŠ€θƒ½,η”¨δΊŽη”Ÿζˆ**单文仢 HTML ζ¨ͺ向翻鑡 PPT**,θ§†θ§‰εŸΊθ°ƒζ˜―"**甡子杂志 Γ— 甡子咨水**"——像 *Monocle* θ΄΄δΈŠδΊ†δ»£η ηš„ζ ·ε­γ€‚ > η”± [歸藏](https://x.com/op7418) 在"一人公司:θ’« AI ζŠ˜ε ηš„η»„η»‡"、"δΈ€η§ζ–°ηš„ε·₯δ½œζ–ΉεΌ"η­‰ηΊΏδΈ‹εˆ†δΊ«δΈ­ζ²‰ζ·€θ€Œζˆ,θΈ©θΏ‡ηš„ζ―δΈ€δΈͺ坑都写进了 `checklist.md`。