New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Creative Mode

Free

Design-led HTML presentation deck for confident branding.

by nexu-io84.9k stars on nexu-io/open-design
2 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Creative Mode does

Creative Mode is a self-contained HTML presentation deck tailored for creating visually compelling brand identity systems. It features a confident multi-color palette and a structured typography system, making it ideal for creative agency pitches, design studio presentations, and brand reviews. The deck is designed to maintain a consistent visual identity, incorporating decorative elements and layout rules that enhance the overall aesthetic without sacrificing functionality.

The deck is built around a light scheme with medium formality and density, making it suitable for a variety of contexts where a bold design approach is preferred. Users can easily customize the content by replacing placeholder text and images while adhering to the established design system. This ensures that the presentation remains cohesive and aligned with the brand's identity.

To use Creative Mode effectively, users should clone the provided example HTML file along with the necessary assets. The included JavaScript file facilitates keyboard navigation and rendering, ensuring a smooth user experience. It's important to follow the guidelines for preserving the design system, as modifications to fonts, colors, or layouts can disrupt the intended visual impact.

Overall, Creative Mode is an excellent choice for anyone looking to create a presentation that stands out through its design and confidence. It is particularly useful for those in creative fields who want to convey their ideas with style and clarity, making it a valuable addition to any designer's toolkit.

When to use it

Use Creative Mode when you need to present design-led content, such as agency pitches or brand reviews, where a confident visual identity is essential.

When not to use it

Avoid using this skill for formal presentations that require a more subdued or institutional tone, as the vibrant palette may not convey the appropriate authority.

What you can build with it

Creative Agency Pitch

Use Creative Mode to create an engaging presentation that showcases your agency's capabilities and design philosophy.

Brand Identity Review

Present your brand's visual identity system effectively, ensuring all elements are consistent and aligned with your brand values.

Tech Talk with a Twist

Leverage the vibrant design of Creative Mode for a tech talk where you want to stand out and engage your audience creatively.

How to install Creative Mode

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-zhangzara-creative-mode --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Creative Mode

Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display.

A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.

At a glance

  • Scheme: light
  • Formality: medium
  • Density: medium-high
  • Slides in demo: 8

Best for

Anything that should feel design-led and confident: creative agency pitches, design studio decks, ad shop credentials, brand creative reviews, art-direction reviews. Also a great unexpected pick for a tech talk, research findings, or finance review when the speaker wants to lead with taste rather than convention.

Avoid for

Contexts that demand institutional restraint and a quiet authority — the saturated multi-accent palette will read as expressive, not formal.

Workflow

  1. Clone example.html AND the assets/ folder into the user's workspace. This template ships an assets/deck-stage.js runtime (keyboard navigation, stage rendering); the HTML references it as assets/deck-stage.js, so the file must sit next to the cloned HTML or that path will 404 in the generated artifact and navigation will silently break. Inlining the JS into a single <script> block in the HTML is an acceptable alternative when a single self-contained file is preferred.
  2. Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
  3. Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
  4. Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
  5. Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
  6. Keep the navigation runtime as shipped. If the deck ships an assets/deck-stage.js or inline keyboard handler, leave it intact.

Output contract

Emit between <artifact> tags:

<artifact identifier="zhangzara-creative-mode" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

Source & license

Vendored from upstream MIT-licensed zarazhangrui/beautiful-html-templates.

The full upstream MIT license text — including the original copyright notice — ships in this skill at LICENSE and must be redistributed alongside any copy of example.html, template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.

Frequently asked questions about Creative Mode

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.