paper-collage-ppt

Xiaoer Deck Styles · Xiaoer Deck Styles

Turn an outline or article into a web PPT with a complete visual language. Currently supports Xiaoer Paper-cut Style, Curious Jelly 3D, Playful Lab 3D, and Xiaoer Geometric Style; each style has its own independent templates, assets, animations, and design constraints, and you cannot just change colors to pretend it is another style.

Step 0 · Choose a style

If the user has already specified a style, go directly into the corresponding workflow; if not, give two choices:

Xiaoer Paper-cut Style — warm, handmade, narrative, entry assets/template.html, then continue with Step 1–7 below.
Curious Jelly 3D — young, bright, design-oriented, entry styles/haoqi-3d/demo.html. First read styles/haoqi-3d/README.md and styles/haoqi-3d/PPTX_EXPORT_PROTOCOL.md; decide the number of pages based on the user's content, and do not copy the example's 20-page count. You may create new Three.js models, text, particles, or import GLTF, and register 3D objects that need to be independently editable in PowerPoint according to the protocol.
Playful Lab 3D — crazy, character-driven, commercial advertising feel, entry styles/playful-lab-3d/demo.html. First read that directory's SKILL.md、design-tokens.json and references/; assign red, blue, and green personalities to the content, mix soft rubber, plush, clay, and laboratory props, keep it original, and export editable PPTX according to the protocol.
Xiaoer Geometric Style — calm, orderly, commanding, entry styles/geo-collage/demo.html. First read styles/geo-collage/SKILL.md and references/grid-layouts.md; paste entire sections from the 20 grid layouts and change the copy, and follow the "Five Iron Rules of Hard Edges" (zero shadow, zero gradient, zero rounded corners / grid interlocking / whitespace as blocks / geometric families ≤4 / at least one bleed). The same color palette can also produce Xiaohongshu 3:4 cards and WeChat official account layouts.

When the user wants to see the effect first, open style-gallery.html. When adding other styles, follow styles/README.md. When the user wants to use Curious 3D for a WeChat official account, read styles/haoqi-3d/wechat/SKILL.md, and execute according to the WeChat components, images, and checklist it references.

Workflow B: Curious Jelly 3D

Plan the number of pages according to audience, duration, and amount of information; there is no fixed page count, and the 20-page example is not an output requirement.
From styles/haoqi-3d/demo.html inherit the visual system and runtime, add or remove according to the content PAGES。
Freely create the Three.js objects required by the theme. For each THREE.Object3D that needs to be moved, scaled, or deleted separately in PPTX, call registerPptx3D(object, id, { pages }); if the group is edited as a whole, register a Group; if the parts are edited separately, register them separately.
Keep the exact copy as real HTML under #txt , and place ordinary assets in #stk or #txt; do not bake text into 3D images or backgrounds.
After previewing and checking all pages, by default also export editable PPTX:

python3 scripts/export-haoqi-pptx-editable.py path/to/deck.html \
  -o path/to/deck-editable.pptx --scheme plus

Verify that the PPTX page count is exactly the same as the page count reported by the HTML runtime; confirm that real text boxes, independent image objects, and native shapes exist, and re-render representative pages to check the visuals.
Also deliver deck.html and deck-editable.pptxNote: WebGL materials and lighting are part of the background; the registered 3D subject is a transparent independent object, and the text and structure remain editable in PowerPoint.

For the detailed protocol and extension examples, see styles/haoqi-3d/PPTX_EXPORT_PROTOCOL.md。

Workflow A: Xiaoer Paper-Cut Style

Turn an outline or article into a single-file web PPT in the "paper-cut collage" style: all content is like cut paper pieces pasted one by one onto the paper surface, and when turning pages they are "pasted" on frame by frame (stop-motion feel). Pages that need visuals are paired with handcrafted paper-art illustrations generated by nano.

Lineage: The visual system comes from paper-collage-ad(paper-cut advertising video skill)'s battle-tested recipe—the "live-action paper-art diorama" aesthetic, restrained color palette, warm light and shadows; the engineering skeleton draws on guizang-ppt-skill 's single-file HTML approach. Two hard lessons are inherited directly: ① AI-rendered text is always garbled, so all precise content must be real HTML; ② craft correctness ≠ good-looking, the aesthetic layer (light/color/hierarchy/negative space) must never be omitted.

When to use / not use

Suitable: sharing sessions, courses, product stories, handmade/lifestyle themes, any talk that wants to be "warm, handmade, memorable"; converting WeChat public account articles into a script. Not suitable: large tables/dense charts (use a regular PPT), serious business reports (the style is too playful), occasions that require multi-person collaborative editing.

Workflow

Step 1 · Align (before starting, at most 3 questions)

If the user provides a complete outline/article → skip directly to Step 2. If only a topic is given → ask at most 3 questions: ① Who is it for, and on what occasion? ② Duration (to determine page count: 10 minutes ≈ 8-10 pages, 20 minutes ≈ 12-16 pages)? ③ Is there existing material/hard constraints? Make reasonable assumptions for the rest and explain them in your reply.

Step 2 · Outline and pacing

Build the skeleton along a narrative arc: hook → tone-setting → main body → turn → conclusion (for page-count allocation see the end of references/layouts.md ). At the same time, listthe background-color rhythm for each page(field / deep / ink), with the rules in layouts.md "Page Rhythm Planning"—no 3 consecutive pages with the same background color, and one deep-background breathing page every 3-4 pages. Give the outline + rhythm table to the user for confirmation before starting to write the HTML.

Step 3 · Set the initial theme (14 art-history color schemes, built-in skin switching + sliders)

Read the references/themes.md master table, and recommend based on the content's characterthe initial theme, then change the template's <body class="tN"> to the corresponding number—the 14 sets of variables and the "✂ Style" skin-switching panel in the lower-left corner are all built into the template, so the audience/user can switch with one click at any time (the dark-field for dark themes is handled automatically by the script).Custom hex values are not accepted, and mixing is not allowed; if the user provides a reference image → extract colors element by element and add them as t15+ (the method is at the beginning of themes.md).

Step 4 · Copy the template + fill in the layout

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

template.html is fully runnable, with 7 built-in example pages showcasing all the craft. Then:

Immediately replace <title> and other [必填] placeholders
Open references/layouts.md, choose from the 20 layout skeletonsaccording to the outline, and paste the whole section to change the copy—do not write slides from scratch, and do not invent new class names
The rules for paper-piece craft (hand-cut outlines/pin wrapping/cut-out words/torn edges/mountain views/data-drop entrances) are at the top of layouts.md in "The Five Ironclad Rules of Handmade Feel" and references/paper-craft-css.md six ironclad rules, to be followed when writing each page
Fine-tuning only changes inline style (vw/vh units)

Step 5 · Add illustrations (optional)

Decide the color scheme first, then generate illustrations:After the layout is done, have the user try out all 14 themes in real time using the skin-switching panel at the bottom left, settle on the final theme, and then generate the illustrations — the illustration palette is baked in at generation time and won't follow skin changes. This order ensures the images and layout always stay in the same color family. Then read references/image-prompts.md, and use nano-image-generator to generate according to the seven-part "realistic paper-craft diorama" recipe. Key points: the cover is a centered poster-style with no image placed on it; illustrations mainly go in L5 left-text-right-image/section covers; generate the first illustration and reroll until it's beautiful, then lock it as the style anchor, and carry the anchor as reference for subsequent images; the palette is linked to the theme (see the mapping table at the bottom of themes.md);the negative block of the prompt must include no text. If there's no GEMINI key or the user doesn't want images → a fully typographic deck also works (the template's paper-scrap system doesn't depend on illustrations).

Step 6 · Self-check

Go through each item references/checklist.md(all P0 items must pass before delivery). Run the self-check command, and use headless Chrome to screenshot 2-3 pages for a visual aesthetic check:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --disable-gpu \
  --window-size=1600,900 --virtual-time-budget=5000 \
  --screenshot=/tmp/check.png "file://$(pwd)/index.html#3"

Step 7 · Delivery

open index.html Open it directly for the user (don't give a path and make the user find it themselves); explain the controls: keyboard ←→ / scroll wheel / touch swipe / bottom dots, URL with #页号 for direct access.

Want PPTX? When the user wants a PowerPoint file:

python3 <SKILL_DIR>/scripts/export-pptx-editable.py deck.html --theme t15 -o 分享.pptx

Three-layer decomposed export:background = screenshot of the background texture and decorations;each paper scrap = an independent picture shape(can be selected/dragged/stretched, and the texture changes along with it); text = real text boxes (position/font size/color/rotation aligned). So in PowerPoint/Keynote: editing text ✅, moving paper scraps ✅, enlarging paper scraps when text gets longer ✅ — the layout can still be adjusted. Boundaries: changing the color scheme/adding new pages requires going back to HTML and re-exporting; pure CSS color-block elements (a few in the lightweight version) are still baked into the background; marker-pen backing color doesn't follow the text. Depends on python-pptx + local Chrome.

Resource guide

paper-collage-ppt/
├── style-gallery.html            ← 多风格选择入口
├── SKILL.md                      ← 你在读
├── styles/
│   ├── README.md                 ← 新增风格规范
│   ├── haoqi-3d/                 ← 好奇果冻 3D 模板、素材与运行时
│   ├── playful-lab-3d/           ← 顽趣实验室 3D 模板、token 与参考
│   └── geo-collage/              ← 小耳几何风模板、小红书卡片、参考与脚本
├── assets/
│   └── template.html             ← 剪纸风完整可运行模板
├── scripts/
│   ├── export-pptx.py            ← HTML deck → 16:9 PPTX(逐页截图,可 --theme 指定配色)
└── references/
    ├── themes.md                 ← 14 套艺术史配色总表 + 换肤/滑杆机制 + 插画调色板联动表
    ├── layouts.md                ← 20 种布局骨架 + 节奏规划 + 手工感五铁律
    ├── paper-craft-css.md        ← 剪纸 CSS 工艺分解(v2) + 六条不许动的铁律
    ├── image-prompts.md          ← nano 纸艺 diorama 配方(PPT 版,强制 no text)
    └── checklist.md              ← P0/P1/P2 交付检查清单

Loading order:SKILL.md → (after Step 2) themes.md → layouts.md → start writing pages → (if images are needed) image-prompts.md → checklist.md. Consult paper-craft-css.md when you need to fine-tune styles or add components.

Design philosophy

One thing per page — one argument, one visual action per page; if you're greedy for more, split the page
Text is content, illustrations are atmosphere — real HTML text carries all the information; remove all illustrations and the deck still holds up
The handmade feel comes from imperfection — slight rotations, staggered entrances, tape and paper scraps; but the imperfection is designed, and anything beyond the five rotation levels is truly messy
Restraint beats piling on — one palette, whitespace ≥40%, ≤3 kinds of handmade traces per page
Technical correctness is merely passing; the aesthetic layer is where the points are — direction of light, restraint in color, hierarchy and whitespace; every page must pass the aesthetic self-check