Skip to content
Get packs

Magazine Web Slides

Builds single-file HTML magazine-style swipe decks with a WebGL background and themed layouts.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
11 files

What it does

When installed, the agent builds a presentation as one self-contained HTML file that you open in a browser and page through with arrow keys, scrolling, or swipes. It picks one of five magazine-inspired visual directions (for example a Monocle-style editorial look), uses specific font pairings and line icons, and can add an animated WebGL background on hero pages. It walks through a short planning process first: inferring the audience and talk length, then outlining a narrative arc before generating slides. Note on the metadata: the SKILL.md front matter describes a marketing/GTM 'annual-marketing-plan' deck, but the body of the skill is about generating visual HTML slide decks in a magazine style. The body is what determines behaviour.

Great for

  • Speakers giving offline talks, demo days, or product launches who want a web-based deck with a strong visual style
  • Designers or creators who want a magazine-like slide deck without a presentation app
  • People who want a deck that opens anywhere in a browser with no paging tool

Skip it if

  • Decks heavy with tables or stacked charts, which the skill itself says suit regular PowerPoint better
  • Training courseware, since the skill notes its information density is low
  • Teams that need several people editing the same deck at once, because the output is static HTML

Try asking

  • “Create a 15-minute magazine-style deck for our AI product launch demo day”
  • “Build an editorial-style HTML slide deck from these rough notes, roughly 20 pages”
  • “Make a web slideshow for a private salon talk on slow living, using the Kinfolk direction”
Step-by-step guide: how to use Magazine Web SlidesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 11 original files, the Apache-2.0 licence and an attribution note.

    guizang-ppt.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip guizang-ppt.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip guizang-ppt.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the audience, talk length, and any must-keep numbers up front so the agent does not need to ask many questions
  • Keep images in the folder structure the skill describes before starting, to avoid rework
  • If you want a specific look, name the direction (for example Monocle, WIRED, Kinfolk, Domus, or Lab) in your request

What's inside

  • assets/example-slides.html
  • assets/template.html
  • README.en.md
  • README.md
  • README.pt-BR.md
  • references/checklist.md
  • references/components.md
  • references/layouts.md
  • references/styles.md
  • references/themes.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.