Scatterbrain Presentation Deck
FreeCreate informal, design-focused HTML presentations.
Free · Opens the source repo
What Scatterbrain Presentation Deck does
Scatterbrain is an HTML presentation deck designed with a unique aesthetic that mimics the feel of a designer's whiteboard. This skill is particularly suited for creative environments where brainstorming and ideation are key. It employs a pastel color palette and informal typography, making it ideal for workshops, design-thinking sessions, and pitches that benefit from a warm, unfinished look. The deck is self-contained, ensuring that all elements work harmoniously together, promoting a cohesive presentation style.
Users can easily customize the provided example HTML file by replacing placeholder content with their own text and images while adhering to the design system. This includes maintaining the specified fonts, colors, and decorative elements, which are integral to the identity of the deck. The skill encourages users to think creatively about their presentations, allowing for flexibility in slide length by duplicating or removing layouts as necessary. However, it is crucial to avoid mixing elements from different templates, as this can disrupt the intended aesthetic.
Scatterbrain is particularly beneficial for those in design education or creative industries looking to present ideas in a way that feels dynamic and in-progress. It is not suitable for formal contexts where precision and a polished appearance are required, as its intentionally casual design may not convey the necessary professionalism.
Overall, Scatterbrain serves as a valuable tool for anyone needing to create engaging presentations that prioritize creative expression over strict formalities, making it a great addition for designers and educators alike.
When to use it
Use this skill when creating presentations for brainstorming sessions, workshops, or design critiques where a casual approach is appropriate.
When not to use it
Avoid using Scatterbrain for formal presentations that require a polished and precise appearance.
What you can build with it
Design Workshop
Use Scatterbrain to present ideas during a design workshop, encouraging collaboration and creative feedback.
Creative Agency Pitch
Leverage Scatterbrain for a pitch to showcase your agency's creative process and capabilities in a visually engaging way.
Academic Presentation
Utilize Scatterbrain for an academic defense or presentation that emphasizes brainstorming and idea generation.
How to install Scatterbrain Presentation Deck
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-scatterbrain --agent claude-code2. 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-ioScatterbrain
Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack.
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: low
- Density: high
- Slides in demo: 10
Best for
Anything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction reviews. Equally fun for any deck — including tech, research, or business — that wants to read as in-progress thinking rather than polished conclusions.
Avoid for
Contexts that demand precision and institutional weight — the post-it sticky-note aesthetic intentionally reads as warm and unfinished.
Workflow
- Clone
example.htmlinto the user's workspace as the working file. - Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
- 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.
- 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.
- 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.
- Keep the navigation runtime as shipped. If the deck ships an
assets/deck-stage.jsor inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-scatterbrain" 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 Scatterbrain Presentation Deck
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.