How do I use Presentation Builder on Zeplik?

Sign in to Zeplik and ask in plain language, or type /slides in any chat to invoke it directly. The skill applies its method and returns a result you can refine in the same conversation.

Which AI model does the Presentation Builder skill use?

Any model you choose. Zeplik works across every model in one chat, so the Presentation Builder skill runs on your preferred model for the task.

Where does the Presentation Builder skill come from?

The Presentation Builder skill is an original Zeplik skill, maintained by the Zeplik team.

How much does the Presentation Builder skill cost?

Using the skill is free to start. You only spend Zeplik credits when the assistant runs, and new accounts begin with free credits.

Presentation Builder

Productivity skill, available on Zeplik

Presentation Builder is a ready-to-run productivity skill on Zeplik. Design and build a complete presentation slide deck as one self-contained HTML artifact with live preview, keyboard navigation, speaker notes, and print-to-PDF export. Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer. It returns a structured document you can keep and reuse: Document artifact -- structured written deliverable with headed sections and a TL;DR (see artifact-templates/document.md).

The Presentation Builder skill loads automatically when your request matches it, or you can invoke it directly by typing /slides in any chat. It works with attachments, connectors, and any model that supports the task, so you get the same expert method every time without setting anything up.

What the Presentation Builder skill can do

Build a full presentation as one self-contained HTML artifact
Provide live preview with keyboard and on-screen slide navigation
Include per-slide speaker notes toggled by a hotkey
Generate a print-to-PDF ready layout at 16:9 with a PptxGenJS script option

Try these prompts on Zeplik

Pick a prompt to open it in the Zeplik app. If you are not signed in yet, your prompt is waiting for you the moment you do.

How the Presentation Builder skill works

Presentation slides

Build the deck as ONE complete, self-contained HTML document emitted as a single html code block, so it becomes an artifact the user can preview live, present fullscreen, download as a .html file, and print to PDF. Never emit a partial document, and never split one deck across multiple blocks.

Hard constraints (the artifact runs sandboxed)

The deliverable is a fenced html code block written directly in your reply. Do NOT build the deck with code_execution, write_file, or any other tool; only the fenced block in the reply becomes the artifact the user can preview and present.
Everything inline: all CSS in one style tag, all JS in one script tag.
Zero network dependencies: no CDN scripts, no webfont links, no external images. Use system font stacks, inline SVG for icons/charts/illustrations, and CSS gradients/shapes for texture.
Slides are 16:9. Author each slide at a 1280x720 logical size and scale the stage to fit the viewport (transform: scale on a fixed-size stage).
The deck must work with no network at all and inside a sandboxed iframe: no localStorage, no location/hash tricks, no window.open.

Workflow

Outline first. Draft the slide list as one line per slide (title slide, agenda when 6+ slides, one idea per content slide, a closing/CTA slide). For a substantial request, show the outline and slide count before building; for a quick ask, state assumptions in one line and build.
Pick the design system for THIS topic: palette, font pairing, and one repeating visual motif (see Design system).
Emit the full HTML deck using the runtime skeleton below.
Run the QA checklist, fix, and re-emit the corrected full document.
Tell the user in one line: use the arrow keys or on-screen arrows to navigate, press n for speaker notes, use Present for fullscreen, and Download then print (landscape) to get a PDF.

Runtime skeleton

Every deck uses this structure. Keep the behavior; restyle everything else.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DECK TITLE</title>
<style>
  :root { /* palette custom properties */ }
  html, body { margin: 0; height: 100%; background: var(--stage-bg); }
  #stage { position: relative; width: 1280px; height: 720px;
           transform-origin: top left; }
  .slide { position: absolute; inset: 0; width: 1280px; height: 720px;
           box-sizing: border-box; padding: 64px; display: none; }
  .slide.active { display: flex; /* or grid, per layout */ }
  .notes { display: none; } /* toggled panel, per-slide speaker notes */
  #hud { position: fixed; /* prev/next buttons + "3 / 12" counter */ }
  @media print {
    #hud, .notes { display: none !important; }
    #stage { transform: none !important; width: auto; height: auto; }
    .slide { display: flex !important; position: static;
             page-break-after: always; break-after: page;
             print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  }
  @page { size: 1280px 720px; margin: 0; }
</style>
</head>
<body>
<div id="stage">
  <section class="slide active"> ... </section>
  <section class="slide"> ... <aside class="notes">speaker notes</aside> </section>
</div>
<div id="hud"> ... prev/next buttons, counter, notes toggle ... </div>
<script>
  // fit(): scale #stage to fit window, centered; call on load + resize.
  // go(i): clamp, swap .active, update counter.
  // Keys: ArrowRight/ArrowDown/Space/PageDown next; ArrowLeft/ArrowUp/
  //       PageUp previous; Home/End first/last; "n" toggles notes panel.
  // Also advance on click of the right 25% of the stage, back on left 10%.
</script>
</body>
</html>

Requirements for the script: no dependencies, works on load without user interaction, and every slide is reachable both by keyboard and by the on-screen arrows (mobile users have no keyboard).

Design system

Decide these BEFORE writing slide content, and hold them for the whole deck.

Color

Choose a palette that belongs to this topic. Test: if the same colors would look equally at home on an unrelated deck, they are too generic.
One dominant color carries roughly two thirds of the visual weight, one or two supporting tones fill most of the rest, and a single sharp accent is spent only on the few moments that matter (key stat, CTA).
Contrast structure: dark title and closing slides with light content slides in between, or a fully dark deck for a premium feel. Never mix dark and light content slides at random.
Starter palettes (pick, then adjust toward the topic; never default to generic blue):
- Ink and brass: #16213E / #E8E8E4 / #C9A227
- Deep forest: #1F3D2B / #A8C69F / #F4F1E8
- Ember: #7C2D12 / #FDBA74 / #1C1917
- Slate minimal: #334155 / #F1F5F9 / #0F172A
- Plum and fog: #4A1D4E / #D8CFD0 / #F0A868
- Harbor: #0E4C5C / #7FB6C4 / #F2E9DC
- Rust and sage: #A4532D / #B5C2A5 / #F7F3EC
- Cocoa cream: #3E2C23 / #E9DCC9 / #C46D3B
- Graphite neon: #1A1A1D / #E5E5E5 / #40E0A0
- Bordeaux: #5B1626 / #EFE6DD / #22333B

Typography

Pair a display face with personality for titles against a plain body face, using system stacks only, for example:
- Georgia, "Times New Roman", serif for titles with -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif for body
- Or an all-sans deck with weight contrast: 800 titles, 400 body.
Scale at 1280x720: slide titles 52-64px bold, section headers 30-36px, body 20-24px, captions 15-17px muted, hero stats 90-120px.
Left-align body text and lists. Center only titles on divider slides.

Layout variety

Every slide needs at least one visual element (inline SVG chart, icon, shape, or a strong color field). A title plus plain bullets is a failure. Vary layouts across the deck; do not repeat one template:

Two-column: text one side, inline-SVG illustration or chart the other.
Icon rows: icon in a colored circle, bold header, one-line description.
Stat callouts: 2-4 huge numbers with small labels underneath.
Half-bleed: one half a solid color field or SVG scene, content on the other.
Comparison: before/after or option columns with a clear visual winner.
Timeline / process: numbered steps connected by a line or arrows.
Quote slide: one large quotation, attribution, lots of air.
Section dividers: dark background, oversized number + section name.

Simple inline-SVG bar, line, and donut charts are expected for any numeric content; label values directly on the chart, no legends for 4 or fewer series.

Spacing

Minimum 64px padding on every slide edge; 24-40px between blocks, chosen once and reused exactly.
Leave deliberate empty space. If a slide feels full, split it.

Pitfalls (reject the deck if any of these appear)

A decorative accent line or bar under the title. Use whitespace or a background change instead.
Centered body paragraphs, bullet walls (more than 5 per slide), or text-only slides.
Generic blue on a topic that is not about blue.
Weak size contrast between title and body, or low-contrast text and icons against their background.
One heavily styled slide next to plain ones; the motif must carry through.

Speaker notes

When the content benefits from narration (pitches, lectures), include an aside.notes block per slide with 2-4 spoken-style sentences, toggled by the n key and hidden in print. Skip notes only for trivial decks.

QA checklist (run before presenting the artifact)

Assume the first draft has problems and hunt for them:

Every slide reachable forward and backward; counter matches slide count.
Nothing overflows the 1280x720 box; nothing sits within 64px of an edge.
Palette, motif, spacing, and type scale are identical on every slide.
No placeholder text (lorem, TODO, XX) anywhere, including notes.
SVG charts match the stated numbers; direct labels present.
Print block present and correct: HUD hidden, one slide per page, colors forced with print-color-adjust.
Deck works with JS disabled at least to the point of showing slide 1.

Fix everything found, then re-emit the complete corrected document (never a fragment).

When the user needs a downloadable .pptx file

When the user asks for a real, downloadable PowerPoint (they say ".pptx", "download", "give me the file", "send me the deck", etc.), do NOT answer with prose or a fenced block and do NOT claim a "download button" exists. Build a genuine .pptx binary in the sandbox and hand it back with the file tool:

Use code_execution (language javascript) to install and run PptxGenJS: npm i pptxgenjs, then author the deck programmatically and write it to the working directory, e.g. pptx.writeFile({ fileName: "deck.pptx" }). One slide per content point, a title slide, and a closing/CTA slide — mirror the outline and design system (palette, layout variety, contrast) you would use for the HTML deck. Do not paste raw emoji as icons; use shapes/colored blocks.
Self-QA before delivering: in code_execution (language python), open the file with python-pptx (pip install python-pptx) and assert the slide count matches what you built and no slide is empty. If it fails, fix the script and rebuild — never export an unverified file.
Call export_file with { "path": "deck.pptx", "filename": "<topic>.pptx" }. That persists the file and shows the user an inline download card.
Tell the user in one short line that the .pptx is ready to download. Do not restate the slide contents as text.

Example PptxGenJS shape (adapt fully to the topic and design system):

const PptxGenJS = require("pptxgenjs");
const p = new PptxGenJS();
p.defineLayout({ name: "W", width: 13.333, height: 7.5 });
p.layout = "W";
const title = p.addSlide();
title.background = { color: "16213E" };
title.addText("Remote Work Benefits", { x: 0.8, y: 3, fontSize: 44, bold: true, color: "E8E8E4" });
// ... one addSlide() per content point, a closing slide ...
p.writeFile({ fileName: "deck.pptx" });

For requests that want BOTH a rich live preview AND a downloadable .pptx: emit the HTML deck as the primary artifact (live preview), then run the build recipe above so the user also gets the real .pptx download card.

How to use the Presentation Builder skill

Sign in to Zeplik
Create a free Zeplik account or sign in. New accounts start with free credits, so you can try the Presentation Builder skill right away.
Describe your productivity task
Ask in plain language, or type /slides to invoke the skill directly. Zeplik recognizes the Presentation Builder skill and applies its method.
Review and refine the result
Zeplik returns a structured document you can edit, download, and reuse. Ask follow-ups to refine it.

Source and credit

Author: Zeplik
License: MIT

Original Zeplik skill. Built and maintained by the Zeplik team.

Frequently asked questions

What is the Presentation Builder skill?: Presentation Builder is a ready-to-run productivity skill on Zeplik. Design and build a complete presentation slide deck as one self-contained HTML artifact with live preview, keyboard navigation, speaker notes, and print-to-PDF export. Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer. It returns a structured document you can keep and reuse: Document artifact -- structured written deliverable with headed sections and a TL;DR (see artifact-templates/document.md).
How do I use Presentation Builder on Zeplik?: Sign in to Zeplik and ask in plain language, or type /slides in any chat to invoke it directly. The skill applies its method and returns a result you can refine in the same conversation.
Which AI model does the Presentation Builder skill use?: Any model you choose. Zeplik works across every model in one chat, so the Presentation Builder skill runs on your preferred model for the task.
Where does the Presentation Builder skill come from?: The Presentation Builder skill is an original Zeplik skill, maintained by the Zeplik team.
How much does the Presentation Builder skill cost?: Using the skill is free to start. You only spend Zeplik credits when the assistant runs, and new accounts begin with free credits.

Related productivity skills

More on Zeplik

Try Presentation Builder on Zeplik

Every model, one chat. Bring the Presentation Builder skill into your next conversation and let the assistant do the work.

Browse all skills