Guizang Web Decks

Shape the talk. Prepare to present it.

Turn articles, outlines and product material into browser-based HTML slides. Choose an editorial or Swiss visual system, then prepare images, speaker notes, a separate audience view and matching covers.

By 歸藏

Setup & first taskView on GitHub
Four slides from Guizang’s editorial deck, showing a claim, statistics, a timeline and a comparison.Open image

Author example: serif headlines, mixed imagery, and alternating light and dark slides.

Read the author’s explanation

Published screenshots from the author, shown to illustrate layout and pacing. Atlasnote did not generate these decks. Open an image to inspect the original.

Environments listed by the author

  • Claude Code
  • Codex
  • Cursor (file and shell access)
GitHub stars
28,909
Version
1.1.0
Checked
Categories
Documents & Slides

Start with one article and a short talk.

Bring the source text, audience and time limit, then build six slides. Choose editorial styling for a narrative, or Swiss styling for products, processes and data. Agree on each slide’s point before working on images, and rehearse on the computer you will present from.

Pick a task and get started

All four tasks use the same skill. If you already have a deck, add rehearsal support or promotional images without rebuilding the presentation.

Which part do you need to finish?

Build a short talk from existing material, with slides and speaking points planned together.

  1. Install the complete skill

    Install Node.js for npx, run the author’s command in a terminal, and select your AI client when prompted. Keep the whole skill directory. This installs the workflow and resources; your presentation will be created separately in the project.

    npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
    Read the author’s setup guide

    Check that templates and validators are present

    Ask the assistant to confirm it can read SKILL.md, assets/, references/ and scripts/, and create files in your project folder. Copying only SKILL.md leaves out the templates, image backgrounds and validation tools.

    Read the installation and workflow

  2. Give your AI this first task

    Open your project folder in the configured AI client and attach the article, HTML file or images required for the task. These examples were written by Atlasnote from the author’s documented workflow.

    Use guizang-ppt-skill to make a six-slide, five-minute Swiss-style HTML presentation from my product brief and screenshots. Use the IKB theme for people new to the product. First map each slide’s claim, evidence, layout and speaking points. Use only supplied features and data, preserve screenshot text, and do not generate new images. Add a purpose, transition and time plan for every slide, totaling no more than 4.5 minutes. Check layout, images, navigation and notes, then deliver index.html with every resource it references.

  3. Check what you receive

    • A six-slide HTML presentation whose claims and data trace back to the supplied material, with a clear speaking purpose for each slide.
    • Notes match the slides; the five-minute talk includes a buffer, with no more than 4.5 minutes of planned speech.
    • The HTML, images and required local resources are included; the report distinguishes static checks from browser checks.
    Read the author’s notes for this task
More about this skill

Guizang Web Decks connects content planning, layout selection, image preparation and rehearsal. Start with an article, product brief or outline; the assistant establishes the audience, time limit and theme before working from the supplied HTML templates. It suits a focused live talk: slides show the claim and evidence, while notes carry the explanation you will speak.

The editorial system combines serif headlines, alternating light and dark pages, and image-led storytelling. The Swiss system emphasizes grids, sans-serif type and a single accent. Each has its own compatible templates, themes and layouts, so the choice changes how the material is organized as well as how it looks.

A live presentation adds a rehearsal workflow. Notes remain associated with their slides, the presenter and audience use separate windows, and timing records stay in the browser. The author supplies layout and presenter validators, but passing them still needs to be followed by viewing, operating and rehearsing the deck in a real browser.

Sources and verification

Sources checked

Checked against the README, skill instructions, presenter and screenshot guidance, and validator source. Images are the author’s examples; Atlasnote has not run a complete generation and live projection test.

Author documentationOriginal skillPresenter modePreserving screenshot contentSwiss layout rulesQuality checklist

Choose by the format you need

Explore another web presentation workflow, or a tool designed for native PowerPoint output.

Frontend SlidesCompare three previews with your content, then build a playable, editable 16:9 HTML deck.PPT MasterCreate an editable PowerPoint from source material, update a deck in its design, or build a template.Baoyu DesignFive design entry points, from HTML prototypes to an editable canvas with claude-design.HTML AnythingUse a coding CLI to turn articles, data and outlines into previewed pages, decks and cards.