BlockFrame is an HTML presentation template designed for startup founders and executives, featuring a neobrutalist style with pastel-neon colors.

How do I use this skill?

Clone the example HTML file, replace the placeholder content with your own, and follow the design guidelines to maintain the aesthetic.

Can I modify the design elements?

No, you should not change the fonts, colors, or layout structures as they are integral to the design system.

What types of presentations is BlockFrame best for?

It is ideal for indie SaaS launches, creative reviews, and brand redesigns, particularly when a modern aesthetic is desired.

Are there any contexts where BlockFrame is not suitable?

Avoid using it for formal presentations that require a more traditional or subdued design approach.

BlockFrame Presentation Deck

Name: BlockFrame Presentation Deck
Availability: InStock
Author: nexu-io

Free

Transform messy startup decks into polished presentations.

by nexu-io84.9k stars on nexu-io/open-design

1 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What BlockFrame Presentation Deck does

BlockFrame is a design-focused HTML presentation template specifically crafted for startup founders and executive presenters. With its neobrutalist aesthetic featuring pastel-neon color blocks and chunky black borders, this template helps users create visually striking presentations that stand out. The entire design system, including typography, color palette, and decorative elements, is integrated to ensure a cohesive look throughout the slides. This skill is particularly beneficial for those looking to elevate their presentation style without sacrificing professionalism.

The workflow is straightforward: users start by cloning the provided example HTML file and replacing placeholder content with their own. It is essential to adhere to the design system, which means maintaining the original fonts, colors, and layout structures. This ensures that the final product remains true to the intended aesthetic and functionality. Users can adjust the number of slides by duplicating existing layouts or removing slides as necessary, while also being encouraged to create new layouts that match the established design language if needed.

BlockFrame is ideal for a variety of contexts, including indie SaaS launches, agency credentials, and creative reviews. Its contemporary style can also be effectively utilized in tech, finance, or research presentations, especially when the speaker aims to convey confidence and modernity. However, it is not suited for formal contexts that require a more subdued or traditional approach, such as legal briefs or regulated disclosures.

This skill is designed for anyone who wants to create a visually engaging presentation that aligns with modern design trends. By following the structured workflow and design guidelines, users can produce high-quality decks that resonate with their audience and enhance their messaging.

When to use it

Use BlockFrame when you need to create a vibrant, design-led presentation for pitches, reviews, or brand showcases.

When not to use it

Avoid this skill for formal presentations requiring traditional aesthetics or strict regulatory compliance.

What you can build with it

Startup Pitch Decks

Create a visually engaging pitch deck that captures the essence of your startup's brand and vision.

Creative Agency Presentations

Showcase your agency's work and credentials with a vibrant and contemporary presentation style.

Brand Redesign Reviews

Present your brand redesign concepts in a way that feels fresh and confident, appealing to stakeholders.

How to install BlockFrame Presentation Deck

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-zhangzara-block-frame --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

BlockFrame

Neobrutalist deck with pastel-neon color blocks and chunky black borders.

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 pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns. Also a strong unexpected pick for tech, finance, or research when the speaker wants to land as confident and contemporary rather than buttoned-up.

Avoid for

Contexts that require quiet institutional restraint or traditional weight (regulated disclosures, formal legal briefs).

Workflow

Clone example.html into 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.js or inline keyboard handler, leave it intact.

Output contract

Emit between <artifact> tags:

<artifact identifier="zhangzara-block-frame" 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 BlockFrame 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.