| name | slide-deck-creator |
| description | HTML slide decks with consistent design system. Use when creating presentations, pitch decks, or slide-based content. |
Create a slide deck about: $ARGUMENTS
Overview
Create HTML slide files (.mockup.html) that match the Nimbalyst brand style guide. Each slide is an individual mockup file at 720pt x 405pt (16:9).
Style Guide Reference
Before creating slides, read the style guide at nimbalyst-local/designs/slide-style-guide.mockup.html to understand the full design system. The key tokens are summarized below.
Design Tokens
Colors
Electric Blue: #382DCF (headers, accents, buttons, borders)
Electric Hover: #2B22A6
Electric Pressed: #211A80
Midnight Blue: #241D71 (title slide bg, body text on light)
Midnight Deep: #1C165E (cards on dark, footer borders)
Blue Light: #B8B0F0 (subtitles on dark, card headers on dark)
Blue Wash: #E0DEF5 (badges, pills)
Blue Tint: #EEEDFA (card backgrounds, callouts, section bgs)
White: #FFFFFF (content slide bg, text on dark)
Ice: #E8EEFF (body text on dark navy)
Sky Blue: #6E95FF (lighter accent, highlights, links)
Slate Blue: #394F79 (muted text, descriptions, footer)
Cool Slate: #5571A3 (author, metadata on dark)
Gradients
Title text: linear-gradient(135deg, #382DCF, #6E95FF) (background-clip: text)
Section bg: linear-gradient(180deg, #FFFFFF 0%, #EEEDFA 100%) (with optional dot pattern)
Typography
Font: 'Euclid Circular A', 'Inter', Arial, sans-serif
H1: 42pt / Bold / 120% (title slides)
H2: 28pt / Bold / 120% (section headers)
H3: 22pt / Bold / 120% (subsection headers)
H4: 14pt / SemiBold / 130% (card titles)
Body: 12pt / Regular / 140% (content text)
Body Medium: 12pt / Medium / 120% (emphasized body)
Caption: 10pt / Regular / 140% (footer, metadata)
Spacing
Slide size: 720pt x 405pt
Content padding: 40pt horizontal, 25-30pt vertical
Header padding: 25pt 40pt
Card radius: 8pt
Card padding: 12-15pt
Column gap: 20pt
Accent bar: 8pt top (title slides only)
Left border: 6pt (key message), 4pt (questions)
Button radius: 100px (pill shape)
Workflow
- Parse the request - Understand the topic, audience, and slide count
- Plan the deck - Outline which slides to create (title, content, closing)
- Create output directory - Put slides in
nimbalyst-local/slides/ or a descriptive subdirectory
- Create slides in parallel - Spin up one sub-agent per slide using the Task tool (
subagent_type: "general-purpose"). Each sub-agent receives: the slide number, filename, template to use, content for that slide, the full design tokens, navigation config (SLIDES array and CURRENT index), and the output directory path. Launch all sub-agents concurrently in a single message for maximum parallelism.
- Verify visually - Use
mcp__nimbalyst-mcp__capture_editor_screenshot to check each slide renders correctly
Slide Templates
TEMPLATE 1: Title Slide (Dark)
Center-aligned title on dark midnight blue background with top accent bar.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #241D71; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; position: relative;
}
.accent-bar {
position: absolute; top: 0; left: 0; width: 100%; height: 8pt;
background: #382DCF;
}
.badge {
display: inline-block; font-size: 11pt; font-weight: 600;
color: #B8B0F0; background: rgba(56, , , );
: ; : ; : ;
}
{
: ; : ; : ;
: ; : ;
}
{
: ; : ; : ;
: ; : ;
}
{
: ; : ; : ;
}
Category Label
Presentation Title
A concise subtitle describing the presentation
Author Name
TEMPLATE 2: Section Divider
Full-width blue background for section breaks.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #382DCF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center;
}
.section-number {
font-size: 14pt; font-weight: 600; color: #B8B0F0;
margin-bottom: 12pt; letter-spacing: 1pt;
}
h1 {
color: #FFFFFF; font-size: 36pt; font-weight: 700;
line-height: 120%; margin: 0 60pt 12pt;
}
{
: ; : ; : ;
: ; : ;
}
01
Section Title
Brief description of what this section covers
TEMPLATE 3: Header + Text Content
Blue header bar with body text content. The workhorse slide.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #FFFFFF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
}
.header {
background: #382DCF; padding: 25pt 40pt;
}
.header h1 {
color: #FFFFFF; font-size: 28pt; margin: 0; font-weight: 700;
}
.header p {
color: #B8B0F0; font-size: 14pt; margin: 5pt 0 0 0;
}
.content {
: ; : ;
}
{
: ; : solid ;
: ; : ; : ;
}
{
: ; : ; : ; : ;
: ;
}
{
: ; : ;
}
{
: ; : ; : ;
: ;
}
{
: ;
}
Slide Title
2 minutes
The main insight or thesis for this slide
Key point one - supporting detail
Key point two - supporting detail
Key point three - supporting detail
TEMPLATE 4: Text + Image (Side by Side)
Two-column layout with text on left, image placeholder on right.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #FFFFFF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
}
.header {
background: #382DCF; padding: 25pt 40pt;
}
.header h1 {
color: #FFFFFF; font-size: 28pt; margin: 0; font-weight: 700;
}
.header p {
color: #B8B0F0; font-size: 14pt; margin: 5pt 0 0 0;
}
.content {
: ; : ; : flex; : ;
}
{
: ; : flex; : column; : center;
}
{
: ; : ; : ; : ;
}
{
: ; : ;
}
{
: ; : flex; : center; : center;
}
{
: ; : ;
: (, , );
: solid ; : ;
: flex; : column; : center; : center;
: relative; : hidden;
}
{
: ;
: absolute; : ;
: (circle, , transparent );
: ;
: ;
}
{
: relative; : ;
: ; : ; : ;
}
{
: relative; : ;
: ; : ; : ;
}
Slide Title
Key concept with supporting explanation that gives context and detail.
Additional paragraph with more detail about the topic being discussed.
Screenshot or diagram
TEMPLATE 5: Feature Cards (2-up or 3-up)
Cards for comparing features, showing demos, or grouping concepts.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #FFFFFF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
}
.header {
background: #382DCF; padding: 25pt 40pt;
}
.header h1 {
color: #FFFFFF; font-size: 28pt; margin: 0; font-weight: 700;
}
.header p {
color: #B8B0F0; font-size: 14pt; margin: 5pt 0 0 0;
}
.content {
: ; : ;
}
{
: ; : ; : ; : italic;
: ;
}
{
: flex; : ;
}
{
: ; : ; : ; : ;
}
{
: ; : ; : ;
: ;
}
{
: ; : ; : ; : ;
}
{
: ; : ;
}
{
: ; : ; : ; : ;
}
Slide Title
5 minutes
An optional tagline describing the cards below.
Card Title A
First point
Second point
Third point
Card Title B
First point
Second point
Third point
Card Title C
First point
Second point
Third point
TEMPLATE 6: Multi-Image / Screenshot Gallery
Multiple image placeholders in a grid. Good for showing UI screenshots, before/after, or product features.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #FFFFFF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
}
.header {
background: #382DCF; padding: 20pt 40pt;
}
.header h1 {
color: #FFFFFF; font-size: 28pt; margin: 0; font-weight: 700;
}
.content {
padding: 16pt 40pt; flex: 1; display: flex; gap: 16pt;
}
.image-frame {
flex: 1; : (, , );
: solid ; : ;
: flex; : column; : hidden;
}
{
: ; : flex; : center; : center;
: relative;
}
{
: ;
: absolute; : ;
: (circle, , transparent );
: ;
: ;
}
{
: relative; : ;
: ; : ; : ;
}
{
: ;
: solid ;
}
{
: ; : ; : ; : ;
}
{
: ; : ; : ; : ;
}
Slide Title
Screenshot 1
Feature Name
Brief description of what this shows
Screenshot 2
Feature Name
Brief description of what this shows
TEMPLATE 7: Two-Column Split (Content + Insight)
Left side has content/cards, right side has a dark insight/stat callout.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #FFFFFF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
}
.header {
background: #382DCF; padding: 20pt 40pt;
}
.header h1 {
color: #FFFFFF; font-size: 28pt; margin: 0; font-weight: 700;
}
.header p {
color: #B8B0F0; font-size: 14pt; margin: 5pt 0 0 0;
}
.content {
: ; : ; : flex; : ;
}
{ : ; }
{
: ; : ; : ; : italic;
}
{
: ; : ; : ; : ;
}
{
: ; : ; : ; : ;
}
{
: ; : ; : ; : ;
}
{ : ; : ; }
{ : ; }
{
: ; : ; : ; : ;
: flex; : column; : center;
}
{
: ; : ; : ;
: uppercase; : ; : ;
}
{
: ; : ; : ; : ;
}
{
: ; : ; : ; : ;
}
Slide Title
5 minutes
Context or supporting tagline for the section.
Topic A
Supporting detail
Supporting detail
Topic B
Supporting detail
Supporting detail
Key Insight
The main takeaway or statistic for this section
80%
TEMPLATE 8: Testimonials / Quotes
For social proof, customer quotes, or team feedback.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: linear-gradient(180deg, #FFFFFF 0%, #EEEDFA 100%);
font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
body::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, #9CA3AF 1px, transparent 1px);
background-size: 24pt 24pt;
opacity: 0.08;
}
.inner {
position: relative; z-index: ;
: ; : ; : flex; : column;
}
{
: inline-block; : ; : ;
: ; : ;
: ; : ; : ;
: center;
}
{
: ; : ; : ;
: center; : ;
}
{
: flex; : ; : ;
}
{
: ; : ; : solid ;
: ; : ; : flex; : column;
}
{
: ; : ; : ;
: ; : italic; : ;
}
{
: solid ; : ;
}
{
: ; : ; : ; : ;
}
{
: ; : ; : ;
}
Testimonials
Real Experiences, Real Results
"Quote text from the first person goes here. Keep it concise and impactful."
Person Name
Title, Company
"Quote text from the second person goes here. Keep it concise and impactful."
Person Name
Title, Company
"Quote text from the third person goes here. Keep it concise and impactful."
Person Name
Title, Company
TEMPLATE 9: Questions / Discussion
Vertically centered question items with blue left borders.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #FFFFFF; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column;
}
.header {
background: #382DCF; padding: 25pt 40pt;
}
.header h1 {
color: #FFFFFF; font-size: 28pt; margin: 0; font-weight: 700;
}
.content {
padding: 30pt 40pt; flex: 1; display: flex; flex-direction: column;
justify-content: center;
}
.question {
color: ; : ; : ;
: ;
: solid ;
: ;
}
Questions for Discussion
First question or discussion topic?
Second question or discussion topic?
Third question or discussion topic?
TEMPLATE 10: Closing Slide (Dark)
Thank-you / closing slide matching the title slide style.
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
width: 720pt; height: 405pt; margin: 0; padding: 0;
background: #241D71; font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; position: relative;
}
.accent-bar {
position: absolute; top: 0; left: 0; width: 100%; height: 8pt;
background: #382DCF;
}
h1 {
color: #FFFFFF; font-size: 36pt; font-weight: 700;
margin: 0 0 12pt ;
}
{
: ; : ; : ;
}
{
: inline-block; : ; : ;
: ; : ; : ;
: ;
}
{
: ; : ; : ;
}
Thank You
Questions? Let's discuss.
Get Started
name@email.com
Rules
- One mockup file per slide - Named
slideNN-descriptor.mockup.html (e.g., slide01-title.mockup.html)
- Always use fixed dimensions -
width: 720pt; height: 405pt on body
- Always set
html { background: #ffffff; } - Ensures clean rendering
- Use pt units only - Not px, rem, or em
- Use the brand font stack -
'Euclid Circular A', 'Inter', Arial, sans-serif
- Stay within the color palette - Only use colors from the design tokens above
- Pill-shaped buttons -
border-radius: 100pt
- No external dependencies - All styling inline, no CDN links
- Max 6-7 bullet points per slide - Keep content scannable
- Minimum body text size - 11pt for readability
- Always include slide navigation - Every slide gets the nav footer with prev/next links and slide counter (see Slide Navigation section)
File Organization
nimbalyst-local/slides/[deck-name]/
slide01-title.mockup.html
slide02-intro.mockup.html
slide03-research.mockup.html
...
slide09-closing.mockup.html
Image Placeholders
When creating slides with image placeholders:
- Use the gradient + dot pattern treatment (white to blue tint with radial dot overlay)
- Label with descriptive text (e.g., "Product screenshot", "Architecture diagram")
- When the user provides actual images later, replace placeholders with
<img> tags
- All slide files use the
.mockup.html extension so they render in Nimbalyst's mockup viewer
Slide Navigation
Every slide MUST include a navigation footer so users can click through the deck. Add the navigation CSS and HTML to every slide.
Navigation CSS (add inside <style>)
.slide-nav {
position: absolute; bottom: 0; left: 0; right: 0;
display: flex; justify-content: space-between; align-items: center;
padding: 8pt 20pt; z-index: 10;
}
.slide-nav a {
font-family: 'Euclid Circular A', 'Inter', Arial, sans-serif;
font-size: 9pt; font-weight: 600; color: #6E95FF;
text-decoration: none; padding: 4pt 12pt;
border-radius: 100pt; border: 1pt solid rgba(110, 149, 255, 0.3);
transition: background 0.15s;
}
.slide-nav a:hover { background: rgba(110, 149, 255, 0.12); }
.slide-nav .counter {
: ; : ; : ;
}
{ : ; : (, , , ); }
{ : (, , , ); }
{ : ; }
Navigation HTML (add before </body>)
Update the SLIDES array and CURRENT index for each slide in the deck.
<nav class="slide-nav">
<a id="prev" href="#">← Prev</a>
<span class="counter" id="counter">1 / 10</span>
<a id="next" href="#">Next →</a>
</nav>
<script>
var SLIDES = [
'slide01-title.mockup.html',
'slide02-topic.mockup.html',
];
var CURRENT = 0;
document.getElementById('counter').textContent = (CURRENT + 1) + ' / ' + SLIDES.length;
var prev = document.getElementById('prev');
next = .();
( === ) { prev.. = ; }
{ prev. = [ - ]; }
( === . - ) { next.. = ; }
{ next. = [ + ]; }
For dark slides (title, section divider, closing), add the dark class: <nav class="slide-nav dark">.
Important: The body must have position: relative for the nav to position correctly (already the case in most templates; add it if missing).
Adapting Templates
Templates are starting points. Adapt them:
- Combine elements from different templates
- Adjust card counts (2-up vs 3-up)
- Swap left/right columns
- Add or remove the time label
- Use the key-message callout on any content slide
- Use the dark key-point box wherever a stat needs emphasis
