---
title: "Slides: Design Systems & Media"
description: "Save a reusable design system for your brand, index an existing Figma file or codebase with Builder, generate or find images and logos, and move decks in and out of other formats."
---

# Design Systems & Media

This page covers keeping decks on-brand and adding visuals in [Slides](/docs/template-slides): saving a reusable design system, building one from assets you already have, generating or finding images, and moving decks in and out of other formats.

## Saved design systems

A design system is a reusable bundle of brand identity: primary/accent/background colors, heading and body fonts, spacing, logos, reference images for image generation, and free-form custom instructions ("always lowercase the section labels," "never use stock photography"). Save one and every new deck can use it instead of generic defaults; mark one as your default so new decks pick it up automatically.

Once a design system is linked to a deck, the **Tweaks** panel gives you quick live overrides — an accent color swatch, title casing, background warmth — without editing the saved system directly. A change you keep persists back to the design system.

## Building a design system from what you already have

<Diagram id="doc-block-slides4" title="From brand source to applied design system" summary="Figma files, a connected codebase, or a design.md go through Builder's indexing instead of a one-shot local token guess, so the docs and token values stay grounded in the real source.">

```html
<div class="diagram-flow">
  <div class="diagram-col">
    <div class="diagram-node">Figma file (.fig)</div>
    <div class="diagram-node">Connected code / GitHub repo</div>
    <div class="diagram-node">design.md</div>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-panel center">
    <span class="diagram-pill accent">Builder Design System Intelligence</span
    ><small class="diagram-muted">indexes tokens, components, docs</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-box">
    Design system<br /><small class="diagram-muted">linked to your decks</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-box">Applied on generation</div>
</div>
```

```css
.diagram-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.diagram-flow .diagram-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diagram-flow .center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
```

</Diagram>

Bring a raw Figma file, point at a connected codebase or GitHub repo, or write a `design.md` describing your brand, and Slides sends it to Builder's Design System Intelligence — Builder is the source of truth for the resulting docs, extracted tokens, and usage guidance, not a one-time local guess. You can still describe a brand in plain language (company name, notes, a website URL) for a lighter-weight system the agent drafts directly, but a Figma file, a codebase, or a `design.md` always goes through the Builder-indexed path so the result reflects your real components and docs rather than an approximation.

## Generating and finding images

Ask the agent for an image and it generates a few variations styled to match your design system's reference images, shows them to you in chat, and drops the one you pick into the slide. Follow-up requests ("make it darker," "try a different angle") refine the same image without starting over.

<Callout id="doc-block-slides5" tone="info">

Image generation runs in the background. The agent generates a few candidates and comes back with the results a little later — it isn't instant, and a first reply of "generating a few options" is expected, not a stall.

</Callout>

For company logos, ask "find the logo for stripe.com" — Slides resolves the domain to a canonical logo. For anything else, a general image search works the same way a Google Images search would.

## Moving decks in and out of other formats

| Direction | Formats                      | What happens                                                                                                                                       |
| --------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Import    | PPTX, DOCX, PDF, Google Docs | Converted into editable slides — a PDF or DOCX becomes one slide per page or section, a PPTX keeps its original slide breakdown and speaker notes. |
| Export    | PPTX                         | Native, editable text, shapes, and images — not a flattened image of each slide.                                                                   |
| Export    | Google Slides                | Slides generates the same PPTX and hands you a ready import link, since Google Slides has no direct "open this URL" import.                        |
| Export    | Standalone HTML              | A single self-contained file with built-in keyboard navigation you can host or email anywhere — no app required to view it.                        |

Bringing in a GitHub repo, a codebase, or a website URL is a different feature from importing a deck's content: those three feed the design-system indexing above, not slide-by-slide content import.

## What's next

- [**Generating & Editing Decks**](/docs/template-slides-editing) — the editor, presenting, and sharing
- [**Talking to the Agent & Creative Context**](/docs/template-slides-agent) — how the agent reuses existing assets before generating new ones
- [**Developer Guide**](/docs/template-slides-developers) — the design-system, image, and import/export action reference
- [**Assets**](/docs/template-assets) — where image generation and brand libraries can live across apps
- [**Slides overview**](/docs/template-slides) — back to the app summary