Raw Grid
FreeCreate bold, graphic presentations with a neo-brutalist style.
Free · Opens the source repo
What Raw Grid does
The Raw Grid skill provides a neo-brutalist presentation deck designed for high-impact visual communication. Built as a single HTML file, it features a cohesive design system with a specific typography, color palette, and decorative elements that work together to create a strong visual identity. This skill is particularly useful for presentations that aim to convey confidence and directness, making it suitable for founder pitches, accelerator demos, and brand decks. The deck's design is characterized by thick borders, offset shadows, and a distinctive pink, sage, and ink color scheme, which sets a bold tone for any presentation.
Users can easily customize the deck by cloning the provided example HTML file and replacing placeholder content with their own. The skill emphasizes the importance of preserving the design integrity, instructing users not to alter fonts, colors, or layout structures. This ensures that the final presentation maintains the intended brutalist aesthetic, which is essential for achieving the desired impact. The workflow is straightforward, allowing users to duplicate slides for additional content or create new layouts while adhering to the established design guidelines.
The Raw Grid skill is ideal for those in creative industries, startups, or any context where a scrappy yet confident presentation style is needed. It excels in scenarios requiring strong visual statements, such as tech presentations, research findings, or financial overviews. However, it is not suitable for contexts that require a softer or more subdued approach, as the brutalist design elements may overwhelm more sensitive topics.
When to use it
Use this skill when you need to create a presentation that feels bold and graphic, particularly for pitches or brand showcases.
When not to use it
Avoid this skill for presentations that require a warm or gentle aesthetic, as the brutalist design may not convey the desired tone.
What you can build with it
Startup Pitch Deck
Create a compelling pitch deck for investors that showcases your startup's vision with a bold, graphic style.
Brand Presentation
Design a brand presentation that communicates your identity confidently, using the unique visual system of the Raw Grid.
Research Findings
Present research data in a visually striking way that engages your audience and highlights key comparisons.
How to install Raw Grid
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-raw-grid --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-ioRaw Grid
Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette.
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-low
- Density: high
- Slides in demo: 10
Best for
Anything that should feel direct and graphic-confident: founder pitches, accelerator demos, brand decks, indie launches, creator portfolios. Strong for stat slides, comparison tables, and process flows. Equally good for tech, research, or finance when the speaker wants the deck to feel scrappy-confident rather than buttoned-up.
Avoid for
Contexts that need to feel soft, warm, or intentionally quiet — the brutalist borders and offset shadows commit to a graphic voice.
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-raw-grid" 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 Raw Grid
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.