Guide · Agent skill
How to use the Visual-Identity Deck Creative Mode agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
This skill lets an AI agent build a single-page HTML slide deck that presents a brand's logo, colour, typography and usage rules in a fixed cream-and-multicolour style with a bold Archivo Black display face. It is written for designers, agencies and marketers who need a design-led deck rather than a corporate one. By the end of this guide you will know what the skill changes, how to install it, how to ask for a deck in a way the agent will pick up, and what to check before you present.
Visual-Identity Deck Creative Modenexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download and unzip. Download the ZIP from this page and unzip the skill folder.
- 2Place the folder. Move it to ~/.claude/skills/ for personal use or to .claude/skills/ in a project, or upload it under Settings → Capabilities → Skills.
- 3Gather your materials. Collect the audience, decision goal, brand assets, figures and deadline.
- 4Ask for the deck. Describe the brand identity deck in plain language, mentioning it is an HTML deck.
- 5Answer the agent's questions. Provide any missing essentials the agent asks for before it writes slides.
- 6Open and check the HTML. Open the generated deck in a browser, confirm the font and navigation, and check numbers.
What an agent skill is and what this one does
An agent skill is a folder containing a SKILL.md instruction file and any supporting files. When it is installed, an agent that supports skills can read those instructions and follow them when a request matches the skill's description.
This skill tells the agent to produce a self-contained HTML deck built from the bundled example.html template. The look is a cream paper canvas with green, pink, orange and yellow accents and Archivo Black display type. The skill also tells the agent to keep the template's fonts, palette and decorative elements intact, and to add or duplicate slides in the same style rather than mixing layouts.
- Output: one HTML deck, emitted in an artifact block as the skill's output contract describes.
- Structure: the template's slide layouts, reused or duplicated to match your content length.
- Navigation: the bundled assets/deck-stage.js script is kept alongside the HTML so keyboard navigation works.
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. You have two options depending on where you want the skill to be available.
For a personal install that applies across your projects, unzip the folder into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. Either way the skill folder should contain SKILL.md, example.html, template.json and assets/deck-stage.js.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills
~/.claude/skills/html-ppt-zhangzara-creative-mode/Trigger the skill with a natural request
You do not need a special command. Describe the deck in plain language and mention the kind of content it covers. The skill's description and triggers include phrases such as html deck, html slides, brand, visual-system and design.
The bundled example prompt asks the agent first for any missing essentials before producing output: audience, decision target, source-of-truth materials, deadline and must-keep numbers. Answering these up front gives a better deck.
- "Make an HTML slide deck presenting our brand's logo, colour, type and usage rules to the client team."
- "Build an html deck on our visual identity system for an internal design review."
- "Create a design-led html slides presentation for our agency pitch."
Prepare your content and brand materials
The skill replaces placeholder headlines, body copy, numbers, names, dates and section labels with yours. Gather these before you ask, so the agent is not guessing.
Match the size of any image placeholders when you swap in your own images. If your content is longer than the demo's eight slides, the agent duplicates a layout of the most suitable type. If it is shorter, slides are dropped from the bottom.
- Audience and the decision you want from them
- Your logo, colour values and type usage rules as text
- Figures that must stay exact
- Deadline and any source documents
Review and present the deck
Open the generated HTML in a web browser to check the slides. The skill names Archivo Black as the display typeface. The files provided do not confirm how the font is loaded, so check that the headlines render in Archivo Black on your machine. If they do not, Google Fonts or the bundled font files are the sources the skill mentions.
Use the keyboard to move between slides, since the navigation script is part of the deck. Presenter speaker notes and animations are not part of this template.
- Open the HTML file in a browser and step through every slide.
- Confirm the font displays correctly before sending the file.
- Check all numbers against your source material.
Safety notes: scripts and network
This skill does not run scripts and does not use the network, according to its metadata. Its only bundled code is assets/deck-stage.js, which handles navigation and stage rendering in the browser. Read it if you want to confirm what it does before you rely on it.
The skill's source also says the upstream MIT licence text ships with the skill and must be kept with any copy of example.html, template.json or the assets runtime. Keep that licence file when you redistribute the deck files.
- No scripts are run by the skill.
- No network use is declared.
- Keep the licence with any redistributed copy.
What people use it for
- Presenting a brand's logo, colour, typography and usage rules to a client.
- Preparing an internal review deck for a design team's visual system.
- Building an agency pitch deck where a design-led look is the point.
- Creating an expressive marketing presentation for a campaign or brand refresh.
Frequently asked questions
How do I install the html-ppt-zhangzara-creative-mode skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Is this skill free to use?
The skill is listed under the Apache-2.0 licence. The skill's own source says the vendored template is MIT-licensed upstream and that the MIT licence text must accompany copies of the template files.
What do I need to run it?
You need a web browser to open the generated HTML deck. The skill names Archivo Black as its typeface and says it can be loaded from Google Fonts or the bundled font files.
Does the skill run scripts or use the internet?
According to its metadata, it runs no scripts and uses no network. Its bundled assets/deck-stage.js handles navigation in the browser.
Can I change the fonts or colours to match my client's brand?
No. The skill forbids substituting fonts or recolouring the palette, so it is not suitable for projects that need a different brand's typography or colours.
What is a good alternative if I need a formal, restrained deck?
The skill itself says its saturated multi-accent palette reads as expressive, not formal. For institutional or restrained settings, choose a more neutral template instead.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a designer, agency or marketer who wants a confident, design-led HTML deck for presenting a brand's visual identity. Pick something else if you need a formal or institutional look, or if you must use a client's own fonts and colours, since the skill forbids substituting them.
Download the skill