菜单
Generate a polished HTML slide deck from a topic, outline, or data. Outputs a self-contained .html file with keyboard/touch navigation, responsive typography, and the ALPA (Alpaca Labs) design system — Helvetica, editorial layout, clean white backgrounds.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/DreamLab-AI/agentbox --skill slide-deck-generator命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | slide-deck-generator |
| description | Generate a polished HTML slide deck from a topic, outline, or data. Outputs a self-contained .html file with keyboard/touch navigation, responsive typography, and the ALPA (Alpaca Labs) design system — Helvetica, editorial layout, clean white backgrounds. |
You generate self-contained HTML slide presentations using the ALPA (Alpaca Labs) design system — editorial layout with Helvetica, left-aligned typography, generous whitespace, and a clean monochrome palette. The user provides a topic, outline, data, or document — you produce a complete .html file they can open in any browser.
When invoked, list the available page types for the user before proceeding:
| # | Type | Layout | Background |
|---|---|---|---|
| 1 | Title (Image + Title) | Full bleed image, text overlay bottom-left | Image |
| 2 | Title (Text Only) | Left-aligned h1 + subtitle + credit | White |
| 3 | Heading + Body | Eyebrow + h2 + paragraph | White |
| 4 | Heading + List | Eyebrow + h2 + bullet list | White / Grey |
| 5 | Heading + Stats | Eyebrow + h2 + vertical stat lines | White |
| 6 | Stat Row | Large centered numbers in columns | White / Grey |
| 7 | Stat Comparison | Before/after with arrows | White / Grey |
| 8 | Heading + Stat Row | Eyebrow + h2 + stat columns (centered) | White / Grey |
| 9 | Statement (white) | Bold centered text | White |
| 10 | Statement (dark) | Bold centered text | Dark |
| 11 | Data Table | Eyebrow + h2 + table | Grey |
| 12 | Insight List | Eyebrow + h2 + numbered items | White |
| 13 | Bar Chart | Eyebrow + h2 + horizontal bars | White |
| 14 | Timeline | Eyebrow + h2 + phased dots (centered) | White |
| 15 | Two Column | Eyebrow + h2 + side-by-side text | White / Grey |
| 16 | Comparison | Eyebrow + h2 + before/after boxes (centered) | White |
| 17 | Image — Full Bleed | Single image, edge to edge | Image |
| 18 | Image — Full Bleed + Title | Full image with gradient + overlaid text | Image |
| 19 | Image — Split 2 | Two images side by side | White border |
| 20 | Image — Split 3 | Three images in a row | White border |
| 21 | Image — Split 4 | 2×2 grid | White border |
| 22 | Image — Split 6 | 3×2 grid | White border |
Any slide can include a Callout (footnote annotation) appended below the main content.
A sample deck demonstrating every type is at ~/.claude/skills/alpa-presentation/sample.html.
Understand the input. The user may provide:
Plan the deck. Before writing HTML, decide:
Write the HTML file. Use the template below as the foundation. Customize only the slide content inside <body>.
Save the file. Write to the path the user specifies, or default to ~/Documents/presentation.html. Tell the user the path so they can open it.
.slide div)| Class | Background | Text | Use for |
|---|---|---|---|
| (none) | White (#ffffff) | Dark | Title, content, lists, tables — the default |
grey | Light grey (#f5f5f3) | Dark | Tables, stat comparisons, alternating rhythm |
dark | Dark (#1a1a1a) | White | Statement slides — bold centered declarations |
Eyebrow — small bold label directly above the heading:
<div class="eyebrow">Eyebrow Text</div>
<h2>The heading below</h2>
Always placed inside .content, immediately before the <h2>.
Heading + Body — the most common slide: heading with paragraph below:
<div class="content">
<div class="eyebrow">Eyebrow Text</div>
<h2>The heading states the insight</h2>
<p>Supporting paragraph with context and detail. Keep it to 2-3 lines max.</p>
</div>
Heading + List — bullet list below a heading:
<div class="content">
<h2>What we need to answer</h2>
<ul class="body-list">
<li>First question or point</li>
<li>Second question or point</li>
<li>Third question or point</li>
</ul>
</div>
Heading + Stats — vertical stat list (not cards):
<div class="content">
<h2>Who do we build for?</h2>
<p>Context paragraph explaining what the numbers mean.</p>
<div class="stat-list">
<div class="stat-line">8,211 employees</div>
<div class="stat-line">3,313 contingent workers</div>
<div class="stat-line bold">11,524 total workforce</div>
</div>
</div>
Stat Row — large numbers in columns with labels (centered layout):
<div class="stat-row">
<div class="stat-col">
<div class="stat-title">Bay Area</div>
<div class="stat-value">50%</div>
<div class="stat-label">Share of workforce</div>
</div>
<div class="stat-col">
<div class="stat-title">Americas</div>
<div class="stat-value">13%</div>
<div class="stat-label">Share of workforce</div>
</div>
</div>
Stat Comparison — before/after with arrows and change indicators:
<div class="stat-row">
<div class="stat-col">
<div class="stat-title">Bay Area</div>
<div class="stat-value muted">50%</div>
<div class="stat-label">Share of workforce</div>
<div class="stat-arrow">↓</div>
<div class="stat-value">32%</div>
<div class="stat-change negative">-26% ▼</div>
</div>
<div class="stat-col">
<div class="stat-title">Americas</div>
<div class="stat-value muted">13%
Share of workforce
26%
+115%
Heading + Stat Row — eyebrow + heading with columnar stats below. Same vertical rhythm as timeline slides. Use .slide.centered:
<div class="slide centered">
<div class="content">
<div class="eyebrow">Section</div>
<h2>Perfil del comprador</h2>
<div class="stat-row">
<div class="stat-col">
<div class="stat-title">Label</div>
<div class="stat-value">50%</div>
<div class="stat-label">Description text</div>
</div>
<div class="stat-col">
<div class="stat-title">Label</div>
<div class="stat-value">30%</>
Description text
ALPA
The .slide.centered .content h2 rule tightens the heading's bottom margin so the heading sits close to the stat-row, matching the timeline layout.
Statement — bold centered text on white or dark:
<!-- White statement -->
<div class="slide">
<div class="statement">We talk about flexibility but design for predictability.</div>
</div>
<!-- Dark statement -->
<div class="slide dark">
<div class="statement">People don't connect to policies. They connect to places, to their work, and to each other.</div>
</div>
Data Table — clean table with dotted borders:
<div class="content">
<h2>Bay Area: Workforce & Footprint Shifts ('20 - '25)</h2>
<table class="data-table">
<thead><tr><th>Cities</th><th>Workforce Today</th><th>Change</th><th>Ratio</th></tr></thead>
<tbody>
<tr><td>San Francisco</td><td>2,330</td><td class="negative">-26% ▼</td><td>1 : 108</td></tr>
<tr class="total-row">2,330-26% 1 : 108
Insight List — numbered items with bold lead:
<div class="content">
<h2>Key findings</h2>
<ul class="insight-list">
<li><span class="num">01</span><span><span class="emphasis">Bold lead</span> — supporting detail after the dash</span></li>
</ul>
</div>
Bar Chart — horizontal bars with labels and values:
<div class="content">
<h2>Distribution</h2>
<div class="bar-chart">
<div class="bar-row">
<span class="bar-label">Label</span>
<div class="bar-track"><div class="bar-fill accent" style="width:73%"></div></div>
<span class="bar-value">73%</span>
</div>
</div>
</div>
Timeline — phased progression:
<div class="timeline">
<div class="timeline-item active">
<div class="timeline-dot"></div>
<div class="timeline-label">Phase 1</div>
<div class="timeline-title">Title</div>
<div class="timeline-desc">Description</div>
</div>
</div>
Two Column — side by side content areas:
<div class="two-col">
<div><!-- left content --></div>
<div><!-- right content --></div>
</div>
Comparison — side by side with arrow:
<div class="comparison">
<div class="comparison-side">
<div class="comparison-label">Before</div>
<div class="comparison-content">Description</div>
</div>
<div class="comparison-arrow">→</div>
<div class="comparison-side highlight">
<div class="comparison-label">After</div>
<div class="comparison-content">Description</div>
</div>
</div>
Callout — inline annotation:
<div class="callout">Key takeaway or footnote.</div>
Image — Full Bleed — single image filling the entire slide:
<div class="slide image-slide">
<img src="image-url.jpg" alt="Description" />
</div>
Image — Full Bleed + Title — full-bleed image with overlaid title (like a cover or statement). Use .image-title-slide:
<div class="slide image-title-slide">
<img src="image-url.jpg" alt="Description" />
<div class="image-title-overlay">
<h1>Title Goes Here</h1>
<p class="subtitle">Optional subtitle</p>
</div>
<div class="brand-mark">ALPA</div>
</div>
Image — Split 2 — two images side by side with white border:
<div class="slide image-grid cols-2">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
Image — Split 3 — three images in a row:
<div class="slide image-grid cols-3">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
</div>
Image — Split 4 — two rows of two:
<div class="slide image-grid cols-2 rows-2">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
</div>
Image — Split 6 — two rows of three:
<div class="slide image-grid cols-3 rows-2">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
<img src="image5.jpg" alt="" />
<img src="image6.jpg" alt="" />
</div>
eyebrow top-left.image-title-slide — h1 + subtitle over gradient overlay. Falls back to white text-only title if no image is available.eyebrow + .content with heading + body/list/statsdark for dramatic ones<span class="emphasis"> for bold inline text.slide.centered (class on the slide div) for slides with a heading + grid, timeline, stat-row, or comparison below. These read better centered. Left-align is for heading + body text, lists, tables, and insight lists.Use this exact CSS and JS. Only modify the slide <div> elements inside <body>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{TITLE}}</title>
<style>
:root {
--black: #1a1a1a;
--grey-700: #484848;
--grey-500: #6b6b6b;
--grey-300: #b0b0b0;
--grey-200: #d4d4d4;
--grey-100: #e8e8e6;
--grey-50: #f5f5f3;
--white: #ffffff;
--accent: #E8B517;
--negative: #D92B2B;
--positive: #2563EB;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: (--black);
: hidden;
-webkit-: antialiased;
-moz-osx-: grayscale;
}
{
: ; : ;
: none; : column;
: flex-start; : flex-start;
: (, , ) (, , );
: (--white); : (--black);
: relative;
}
{ : flex; }
{ : (--black); : (--white); : center; : center; }
{ : center; : center; }
{ : (--grey-); }
{
: (, , );
: ;
: ;
: uppercase;
: (--grey-);
: (, , );
: ;
}
{ : (--grey-); }
{
: absolute;
: (, , );
: (, , );
: (, , );
: ;
: ;
: (--grey-);
: uppercase;
}
{ : (--grey-); }
{
: absolute;
: (, , );
: (, , );
: (, , );
: ;
: (--grey-);
}
{ : (--grey-); }
{
: (, , );
: ;
: -;
: ;
: ;
: (, , );
}
{
: (, , );
: ;
: -;
: ;
: ;
: (, , );
}
{
: (, , );
: ;
: ;
: ;
: (--grey-);
: (, , );
}
{
: (, , );
: ;
: -;
: ;
: ;
: (--grey-);
}
{ : (--grey-); }
{
: flex;
: column;
: flex-start;
: center;
: ;
: ;
: ;
}
{ : center; : center; }
{ : (, , ); }
{ : ; }
{
: (, , );
: ;
: -;
: ;
: center;
: ;
: auto;
}
{
: disc;
: ;
: ;
}
{
: (, , );
: ;
: ;
: (--grey-);
: ;
}
{ : (--black); }
{
: ;
}
{
: (, , );
: ;
: ;
: (--grey-);
}
{
: ;
: (--black);
}
{
: flex;
: (, , );
: center;
: flex-start;
: ;
: auto;
: wrap;
: center;
}
{ : ; : ; : ; }
{
: (, , );
: ;
: (--grey-);
: ;
}
{
: (, , );
: ;
: -;
: ;
: ;
}
{ : (--grey-); }
{
: (, , );
: ;
: (--grey-);
: ;
}
{
: (, , );
: (--grey-);
: ;
}
{
: (, , );
: ;
: ;
}
{ : (--negative); }
{ : (--positive); }
{
: ;
: ;
: collapse;
: ;
: left;
}
{
: (, , );
: ;
: (--grey-);
: uppercase;
: ;
: ;
: dotted (--grey-);
: dotted (--grey-);
: (--grey-);
: center;
}
{ : left; }
{
: (, , );
: ;
: (--grey-);
: ;
: dotted (--grey-);
: center;
}
{ : left; : (--black); : ; }
{ : (--negative); : ; }
{ : (--positive); : ; }
{ : ; : (--black); }
{ : none; : left; : ; : ; }
{
: flex; : flex-start; : ;
: ;
: solid (--grey-);
: (, , );
: ; : ;
: (--grey-);
}
{ : ; : (--black); : ; }
{ : ; : (--black); }
{ : (--white); }
{ : flex; : column; : ; : ; : ; }
{ : flex; : center; : ; }
{ : (, , ); : ; : (--grey-); : ; : right; }
{ : ; : ; : (--grey-); : hidden; }
{ : ; : (--grey-); : width ease; }
{ : (--black); }
{ : (, , ); : ; : (--grey-); : ; }
{ : flex; : stretch; : ; : ; : ; }
{ : ; : (--grey-); : (, , ); : center; }
{ : (--black); : (--white); }
{ : (--grey-); }
{ : (, , ); : ; : (--grey-); : uppercase; : ; : ; }
{ : (, , ); : ; : ; }
{ : flex; : center; : (, , ); : (--grey-); : ; : (--white); }
{ : flex; : flex-start; : ; : ; : ; : relative; : ; }
{ : ; : absolute; : ; : ; : ; : ; : (--grey-); : ; }
{ : ; : center; : relative; : ; : ; }
{ : ; : ; : (--grey-); : auto ; }
{ : (--black); }
{ : (, , ); : ; : (--grey-); : uppercase; : ; : ; }
{ : (, , ); : ; : -; : ; : ; }
{ : (, , ); : ; : ; : (--grey-); }
{ : grid; : fr fr; : (, , ); : ; : ; : left; }
{ : inline-block; : fit-content; : (--grey-); : ; : ; : (, , ); : ; : (--grey-); }
{ : ; }
> { : ; : ; : cover; : block; }
{ : ; : relative; }
> { : ; : ; : cover; : block; }
{ : absolute; : ; : flex; : column; : flex-end; : flex-start; : (, , ) (, , ); : (to top, (,,,) , (,,,) , transparent ); }
{ : (--white); }
{ : (--grey-); }
{ : (,,,); }
{ : ; : none; }
{ : grid; }
{ : ; : ; : cover; : block; }
{ : fr fr; : ; : (--white); }
{ : fr fr fr; : ; : (--white); }
{ : fr fr; }
{ : fixed; : ; : ; : (-); : flex; : ; : ; }
{ : ; : ; : none; : (--black); : (--white); : (, , ); : pointer; : flex; : center; : center; : opacity ease; : ; }
{ : ; }
{ : fixed; : ; : ; : ; : (--accent); : width ease; : ; }
ALPA
Table slide:
Eyebrow Text
Table heading
...
ALPA
-->
The default accent is --accent: #E8B517 (warm yellow — used only on the progress bar). The design is primarily monochrome — black, white, and greys. Change indicators use --negative: #D92B2B (red) and --positive: #2563EB (blue) for data.
If the presentation is for a different brand or context, change --accent. Common alternatives:
#2563EB#0D7377#6B21A8#C2410CAsk the user if they want a specific accent color. If the topic suggests a brand, try to match.
active — use .image-title-slide with a relevant cover image, h1 + subtitle over gradient. If no image is available, fall back to white text-only title (h1 + .subtitle + credit).<div class="slide centered"> to center the stat-row on the page. No eyebrow needed..statement div. No eyebrow. Use dark bg sparingly (1-2 per deck).Write the complete HTML file using the Write tool. The first slide must have class active. Every slide must be a direct child <div class="slide ..."> inside body, before the <nav>. Add <div class="brand-mark">ALPA</div> to every slide.