Skip to content

Brand-Story Slide Deck Builder

Builds a swipeable, self-contained HTML marketing deck from a typed JSON brief.

Stars
105,448
Licence
Apache-2.0
Files
5 files

What it does

This skill teaches an agent to turn a structured JSON brief into a single HTML file that works as a horizontal, magazine-style slide deck with keyboard, wheel and touch navigation and an overview grid. It uses a shared visual style (warm paper colours, serif italic emphasis) and seven slide types such as cover, stats, quote and call-to-action. The agent fills in the brief and runs a bundled TypeScript script to generate the deck.

Great for

  • Marketing or go-to-market teams making a brand-story or partner deck in the Open Design style
  • Designers who want a consistent, editorial-looking HTML presentation without building it by hand
  • Developers who want a reusable slide composer driven by a typed JSON schema

Skip it if

  • Users who need PowerPoint or Google Slides files, since the output is HTML only
  • Anyone needing a deck that is not based on the Atelier Zero look, because the visual system is fixed and shared with a sister skill
  • Use with confidential material when image generation is enabled, because the optional image step sends prompts to an external service (fal.ai) using an API key

Try asking

  • “Build an 11-slide partner deck for my startup with a cover, two section dividers, a stats slide and a closing call-to-action”
  • “Turn my product brief into a swipeable HTML deck with keyboard navigation”
  • “Create a marketing and go-to-market deck outline and matching HTML slides for a product launch”
Step-by-step guide: how to use Brand-Story Slide Deck BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    open-design-landing-deck.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip open-design-landing-deck.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip open-design-landing-deck.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

  • Start from inputs.example.json and edit the brand and slides fields rather than writing the JSON from scratch
  • Aim for roughly 8 to 15 slides, as the skill itself recommends, to keep the deck focused
  • Skip the optional imagegen step unless you are comfortable sending prompts to fal.ai, and review the script before running it with your own key

What's inside

  • inputs.example.json
  • README.md
  • schema.ts
  • scripts/compose.ts
  • 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.