getdeck

✦ what is getdeck

What is getdeck?

getdeck is a library of 1920×1080 HTML slide layouts and CSS themes. Every layout is a file you can open, render and edit. There is also an MCP server, so your agent can pull a layout instead of writing one from scratch. The idea comes from DESIGN.md, the file Google Stitch hands an agent to describe a design system. getdeck does the same for slides, with one difference. A slide has to render at a fixed size, so the file cannot stop at describing. It has to be checked.

01The problem

Ask an agent for a deck and you get a centered title, three cards, a gradient, and a chart that breaks when one label runs long. It is averaging every deck it has seen, and the average is what you spend the evening fixing. There are two common workarounds. Both stop at the same place. A slide has to fit inside 1920×1080, and neither a prompt nor a generic template knows that this title field holds 40 characters and this one holds 12.

  • Describe the design in the prompt. It takes 40 lines and drifts by the third slide.
  • Use a deck generator. The content fits, but the template is the one everyone else gets too.

02Layout and theme are separate files

A layout is one HTML file on a 1920×1080 stage. It decides what goes where and how much fits. A theme is one CSS file. It decides color, type and texture. The HTML never names a color, and the CSS never names a position. Change the theme and every layout follows. Change the layout and the styling holds. The slide below is the same HTML in four themes. The two axes multiply rather than add: 167 layouts across 41 themes, and every combination is a slide you can use.

Same HTML, four themes.

03The theme system

Layouts never write a color or a font directly. They read CSS variables, and every theme has to define all 33 of them. Adding a theme means filling in the same 33 names, and nothing else in the library has to change. That is why any of the 41 themes works with any of the 167 layouts. There is no theme engine behind it, just variables and a file that fills them in. The variable names describe roles, not colors. --sl-accent is the emphasis color, not blue, so when the theme changes the hierarchy the layout intended still holds.

/* themes/_contract.css */
:root {
  --sl-bg:            #ffffff;   /* main background */
  --sl-bg-inverse:    #0a0a0a;   /* inverted section */
  --sl-ink:           #1a1a1a;   /* main text */
  --sl-ink-soft:      #6b7280;   /* secondary text */
  --sl-accent:        #2563eb;   /* CTA, highlight */
  --sl-accent-bg:     #eff6ff;   /* badge, tag */
  --sl-border:        #e5e7eb;   /* divider */
  --sl-font-display:  'Pretendard Variable', sans-serif;
  --sl-edge:          clamp(40px, 4vw, 80px);   /* slide edge padding */
  --sl-gap-lg:        clamp(32px, 3vw, 56px);   /* section gap */
  /* 33 variables in total */
}
Excerpt from themes/_contract.css.

04What the agent gets: layout.md

Copying a layout gives you one markdown file: the spec, the layout HTML, the theme CSS, the base CSS and the variable spec. The slot list does most of the work. It tells the agent the title field holds about 40 characters, so the text is written for the box it has to fit rather than trimmed afterwards. Everything the slide needs is in that one file, so there is nothing else to fetch. Over MCP nobody copies anything. The agent lists the catalog, picks what fits, pulls the file and writes the slide inside one conversation.

# Chart - Bar × Slate Pro

## Slide Layout
- Layout: Chart - Bar (chart-bar)
- Category: Chart / Data
- Description: 4 bar chart + left explanation.
- Best for: Year-over-year growth, KPI comparison
- Slots: TITLE, SUBTITLE, ITEM1_LABEL, ITEM1_VALUE, ...

```html
<section class="sl-slide sl-pad sl-grid-2 sl-gap-lg"> ... </section>
```

## Theme: Slate Pro
```css
:root { --sl-accent: #2f6fed; --sl-bg: #fbfbfd; ... }
```

## Base CSS
## Theme Contract (required CSS variables)
Trimmed /api/md output.

05With MCP, the agent fetches it

MCP is the standard way an agent calls an outside tool. Connect getdeck to Claude Code, Cursor, VS Code or Claude Desktop once, and the catalog is available inside the conversation. No tab, no copy, no paste. There are six tools: search layouts, search themes, fetch a layout, fetch a theme, propose a deck, and join several slides into one file. The proposal step returns a preview link before anything is written to disk. You look at the deck it has in mind, say yes or change it, and only then does the agent start writing files. Proposing a deck and joining slides are Pro; searching and fetching are not.

  • "what chart slides do you have?" searches the catalog
  • "give me chart-bar in violet-pro" returns that slide as ready-to-use HTML
  • "make me a pitch deck" proposes a sequence and hands back a preview link
  • "merge these into one file" bundles the slides into a single deck
  • "anything new since last month?" lists only what was added

06Why HTML

Markdown is read. HTML is read and rendered. The agent can change one line and look at the result, with no export step in between. It is text, so it sits in the repo, diffs in git, and gets reviewed like any other file. For handoff, print to PDF or export images. A layout you copied a year ago still opens, because there is no format to migrate. Being code also means it can be automated. When the numbers change you swap the values and render again, and a report that goes out every month can run from a script instead of an afternoon.

07What we check

Each layout is rendered at 1920×1080 with several themes and inspected automatically. The checks read the rendered geometry rather than the source, so they catch what actually goes wrong once real text runs long. Anything that fails is fixed or dropped before it is published. The run repeats as the library grows, which is the point. A catalog this size drifts toward the average unless something keeps measuring it.

  • Content outside the 1920×1080 canvas
  • Text clipped by its own container
  • Content running into the footer
  • Elements overlapping that should not
  • Elements hidden behind other elements

08Why we curate themes

People do not describe a design system. They say "like a McKinsey report" or "closer to an a16z pitch". The 41 themes are those starting points in one format, so the agent has something specific to work from instead of a general idea of good design. Each one is a named look, not a color slider, so you choose once and every slide in the deck follows. The set covers light and dark, document-like and stage-like. Try a few on any layout in the sidebar and keep the one that matches the room you are presenting in.

09What getdeck covers

It covers layout and styling. The content is still yours to write, and so is the argument the deck has to make. If your slides have to match a brand system, start from the closest theme and change the variables. Not a PowerPoint replacement, not a Figma export, not a set of finished decks, not a design system for your product UI. It does not decide what to say either. What goes on the slide and in what order is your call. getdeck shortens the distance between that decision and something you can put on a screen.

10Put simply

Most companies keep a deck template file. You open it, find the slide that fits what you have to say, and fill it in. The design decisions were made once, by someone who had time. An agent has no such file. getdeck is that drawer, 167 slides someone already worked out, in a form the agent can read and a shape that survives real content. One difference: that drawer was opened by a person. This one is opened by the agent, while it writes.