Back to the collection
guizang-ppt-skill·Design & creativity

Guizang PPT skill guide: create browser-based presentation slides

On this page

Guizang PPT creates horizontally navigated HTML presentations in editorial-magazine or Swiss styles. It also organizes speaker notes and rehearsal timing for live talks and product introductions.

Install and prepare

Install from your project terminal:

Command
npx skills@latest add op7418/guizang-ppt-skill --skill guizang-ppt-skill --agent claude-code

Prepare the audience, talk duration, outline and images, then choose a visual style. You need a file-editing agent and a browser for preview. The command targets Claude Code; Codex users can substitute --agent codex and invoke $guizang-ppt-skill. After installation, confirm that the installed Skill directory contains SKILL.md, assets/template-swiss.html, scripts/validate-presenter-mode.mjs, and scripts/validate-swiss-deck.mjs. Below, <SKILL_ROOT> means that installation directory, not the project where you make the deck.

Your first task

Enter this in the agent conversation, adapting the files and goal to your task:

Prompt
/guizang-ppt-skill
Turn notes/product-launch.md into a 15-minute introduction for a design team. Use the Swiss style with a blue theme and preserve text and data in supplied screenshots. Plan each slide’s purpose and talking points before generating the HTML deck; save the result as ppt/index.html and put images in its sibling images/ directory.

Plan visuals and spoken content together

For each slide, specify its purpose, visible information, talking points and duration. A product introduction can establish a problem, demonstrate the key workflow and close with audience fit and next steps. Keep supporting explanation in notes instead of forcing every sentence onto the slide.

For a live presentation, first request a table of slide, audience-facing takeaway, speaker note, and planned duration. Approve the story order before choosing layouts. Do not insert an irrelevant timeline or data slide just to use every template. Give each slide a stable ID and attach notes to that ID so rearranging slides does not shift the speaker script onto the wrong page.

Prepare assets for the template

Preserve the selected template structure and fit screenshots or photographs to their layout slots. When fidelity matters, use framing, backgrounds or sensible cropping rather than regenerating data. Keep asset paths under images/ consistent; replacing a file under the same name reduces missed references.

For a screenshot containing interface copy or figures, preserve the original information and use spacing or a background canvas to fit the template. Redesign the screenshot only when a conceptual illustration is explicitly wanted. Keep images in the directory referenced beside the HTML and inspect each relative path; sending only the HTML can leave blank pages on another machine. Check key slides at the real projection ratio and in the speaker view so controls do not cover the last line.

Validate the generated deck

After generation, replace <SKILL_ROOT> with the actual installed Skill directory shown by the installer. From the project root, assuming the deck is at ppt/index.html, run:

Command
node "<SKILL_ROOT>/scripts/validate-presenter-mode.mjs" "ppt/index.html" --target-minutes 15
node "<SKILL_ROOT>/scripts/validate-swiss-deck.mjs" "ppt/index.html"

Use the first command for a presentation deck to check slide IDs, speaker notes, and the 15-minute timing plan; use the second only for this Swiss-style example. If the report finds missing or duplicate IDs, mismatched notes, layout, or image-slot problems, fix the HTML and run it again. Open references/checklist.md in the installed Skill directory and review its P0 items as well. Passing scripts cannot replace a slide-by-slide browser check of text spacing, image bounds, and the bottom navigation safe area. Before presenting, test audience and presenter views on the actual external display. For an offline event, keep assets local and confirm the content remains readable if animation falls back.

Do not allocate the full 15 minutes to speaking notes: a complete slide-by-slide plan may total at most 13.5 minutes, leaving a buffer for pauses, interaction and delays. Timing is partial means some notes lack minutes and the total-budget check was skipped; fill in the missing durations and rerun it. minutes describes the plan, not the separate auto-advance interval. [6]

Why do English timer controls fail validation? At commit c91369c, the presenter validator checks three literal Chinese labels: 开始计时, 重置计时, and 继续计时. Translating the controls and state text completely into English can fail those text checks without proving that the timer is broken. Read each error, then check start, pause, resume and reset in the browser. Fix other errors about slide IDs, notes and timing; do not dismiss the whole report. If the interface must be entirely English, document these three checks separately rather than translating the interface back just to clear them.[7]

Rehearse in the browser

Open the generated ppt/index.html directly in a browser; no local server is required. Inspect navigation, long titles, and readability slide by slide. Then click P at the lower right to enter presenter mode and allow the audience window to open. In the presenter view, check the current and next slides, notes, and timer. Move backward and forward and start/pause the timer once, checking that the audience window follows. If you close that window, look for the disconnected state and use “Reopen audience screen” to restore it. Leave room for pauses and interaction instead of estimating duration from slide count alone. A synchronized software view still does not prove the physical projector works; check the actual display.

Rehearse magazine-style pipeline slides separately. For a progressively revealed data-animate="pipeline" slide, try the forward key in normal deck mode and again in P mode while watching the actual audience window. Grayker007 reports that Style A at commit c91369c advances to the next slide in presenter mode instead of revealing the steps; this is not a general Swiss-style failure. If your deck shows it, ask the agent to use one slide per step or display the whole process on one slide, then retest both windows. Do not make the live talk depend on an unverified step animation. [8]

Check before delivery

Confirm that images load, template placeholders are gone, navigation works and notes are usable. Keep the HTML with its dependent assets and test it after moving devices; copying only an HTML file that references images can lose those assets.

Common questions

Is this an editable PowerPoint file? The main deliverable is an HTML presentation, not native PPTX.

Does it suit dense tables or training material? The styles favor talks and visual storytelling; dense reference material may need documents or conventional slides.

Does synchronized presenter mode prove the projector works? Check the actual audience screen and physical setup too.

How did your first task go?

These choices help us understand where readers get stuck through site analytics. Blocking analytics may prevent delivery; use email for a specific issue.

References

  1. A user’s thesis-defense use case宇LackContext / @xin_devon10840 ·
  2. Guizang’s project update歸藏 / @op7418 ·
  3. A walkthrough of preparation and presentation pacinggdd / 蜗居 ·
  4. Guizang PPT README歸藏 / op7418
  5. guizang-ppt-skill workflow歸藏 / op7418
  6. Presenter validator: timing and control checks歸藏 / op7418
  7. English timer controls fail fixed Chinese-label checksnyuhuyang ·
  8. Magazine pipeline steps skipped in presenter modeGrayker007 ·
  9. Pinned magazine template: presenter and normal navigation歸藏 / op7418
Found outdated or incorrect information? Let us know

Keep exploring

More skills worth getting to know.