---
title: "Design: Features"
description: "Every core Design feature, organized the way the app itself is: Designs, Edit a Design, Templates, and Design Systems, with what each screen, tab, and menu actually does."
---

# Features

Every core Design feature: how it works, and how to set it up. See
[Design](/docs/template-design) for the overview and [Talk to the
Agent](/docs/template-design-agent) for the full list of prompts. Features
are grouped by the real screens in the app: **Designs**, **Edit a Design**,
**Templates**, and **Design Systems**.

## Designs {#designs}

The `/home` list page. Every design you can access lives here, and this is
where you start a new one.

### View designs {#view-designs}

Designs show as a grid of cards: a live thumbnail, the title, and the last
updated date. Switching to the **All** filter (instead of **Mine**) also
shows who owns each one.

- **Search** filters the grid by title as you type.
- The grid pages at 11 designs per page, with the "New design" tile always
  first.
- Select one or more cards (hover to reveal a checkbox) to get a bulk
  toolbar: select/clear all visible, add to a creative context, or delete
  the selection.
- An empty account shows four starter prompts to click instead of a blank
  grid (a SaaS page, a dashboard, a mobile app, a pricing page).

### Create a design {#create-a-design}

Both "New design" entry points, the header button and the grid's dashed
tile, open the same popover. You can type a prompt, and pick a starting
template, a design system, and a creative context, all before the editor
even opens. Click **Skip** instead to get a blank design (or an
un-prompted copy of the picked template) with no AI generation involved.

Submitting takes you straight to the new design's editor with an "Opening
design" overlay while any generation finishes in the background.

### Manage a design {#manage-a-design}

The "⋯" menu on a design card has four items:

- **Rename**: a small dialog with a text field.
- **Duplicate**: makes a copy immediately and opens it, no confirmation.
- **Add to context**: attaches the design to a creative context.
- **Delete**: asks for confirmation first.

## Edit a Design {#edit-a-design}

Everything below applies once you've clicked into a design.

### File settings {#file-settings}

Screens and layers live in one combined tree, not two separate panels.
Every screen in the design (each is its own HTML file) is a top-level
entry, with that screen's layers nested underneath.

- **Add, rename, duplicate, delete, and reorder** work the same way for
  screens and for layers.
- **Lock** a layer to keep it fixed. This is the same "locked layer"
  concept templates and template copies preserve.
- **Show or hide** any layer without deleting it.

### Agent {#agent-in-editor}

The same agent chat every Agent-Native app has sits in the editor too, not
a Design-specific chat surface. Ask it to generate a screen, compare
variants, tune details, or check quality and accessibility, the same way
you'd ask for any other change. It also runs an automatic quality and
accessibility check on its own before calling a design ready, with no
action needed from you. See [Talk to the Agent](/docs/template-design-agent)
for prompts by task.

### Import {#import}

One panel, five ways to bring in outside content:

<Table
  id="doc-block-design-import-table"
  columns={["Method", "How it works"]}
  rows={[
    [
      "Figma frame URL",
      "Paste a Figma share link. Connect your Figma account the first time. Imports as a real, editable screen.",
    ],
    [
      "Paste from Figma",
      "Copy a frame in Figma, then paste (Cmd+V) directly onto the Design canvas. This is a canvas shortcut, not a separate button in the Import panel.",
    ],
    [
      "Upload .fig",
      "Upload a .fig file directly. A separate, design-level import, distinct from importing a .fig into a design system.",
    ],
    [
      "Import HTML",
      "Paste raw HTML into a text box, or upload an .html file, to bring it in as a screen.",
    ],
    [
      "Local app",
      "Not self-service from this panel. It shows install and connect commands meant to be pasted into an external coding agent, which then opens your running app in Design as its own screens. See /visual-edit in the Developer Guide.",
    ],
  ]}
/>

<Callout tone="info">

Every Figma import returns a fidelity report, not a promise. It states
which properties matched exactly, which ones CSS can only approximate
(rotation, per-side stroke weights, some gradient shapes), and which
subtrees had to fall back to a flat image because the shape can't be
represented in HTML/CSS at all.

</Callout>

### Toolbar {#toolbar}

The bottom toolbar has two separate clusters: tools you draw or select
with, and a mode switch that changes what those tools do.

#### Tools

<Table
  id="doc-block-design-tools-table"
  columns={["Tool", "Shortcut", "What it does"]}
  rows={[
    [
      "Move / Hand / Scale",
      "V / H / K",
      "Select and move elements, pan the canvas, or scale a selection.",
    ],
    [
      "Frame / Screen",
      "F for Frame",
      "Draw a new frame inside a screen, or start a whole new screen.",
    ],
    [
      "Shapes",
      "R, L, Shift+L, O for Rectangle, Line, Arrow, Ellipse",
      "Rectangle, line, arrow, ellipse, polygon, or star. Image/Video insert is a disabled placeholder for now.",
    ],
    [
      "Pen / Draw",
      "P, Shift+Y for Draw",
      "Pen draws vector paths. Draw is a freehand brush, and only shows as active in Annotate mode.",
    ],
    ["Text", "T", "Add a text layer."],
    [
      "Pin Comment",
      "C",
      "Drop a comment pinned to a specific point, only active in Annotate mode. See Comments tab.",
    ],
  ]}
/>

#### Modes

A separate three-way switch next to the tools:

- **Edit**: the normal mode. Move, Frame, Shapes, Pen, and Text all work
  in this mode.
- **Annotate**: the mode Draw and Pin Comment need to be active in.
- **Interact**: a distinct mode for the canvas, kept separate from Edit
  and Annotate.

### Design tab {#design-tab}

The main properties panel for whatever's selected. Sections appear only
when they apply to the current selection:

- **Fill** and **Stroke**: color, gradient, or image paint, with a
  document color palette to reuse existing colors.
- **Effects**: Drop shadow, layer blur, background blur, and native WebGPU effects with editable properties. Shader creation opens the agent chat to author native WGSL. Previously saved GLSL effects remain renderable and removable.
- **Position & layout**, **Typography**, **Appearance** (corner radius,
  blend mode, visibility): the standard per-element property groups.
- **Layout** and **Auto layout**: flex-style arrangement for a frame's
  children.
- **Layout grid**: a layout guide overlay for a frame.
- **Component**: once an element is a component instance, this section
  shows its variants and props. Changing a prop previews instantly and
  applies to that one instance. There's no separate stored component
  definition, every instance is its own independent copy of the markup,
  so "Go to main component" jumps back to the earliest instance as a
  reference point, not a canonical template.

### Comments tab {#comments-tab}

A real tab next to Design, with an unread-count badge. Anyone with access
can pin a comment to a specific element instead of leaving a generic note.
A comment can stay a plain note, or get sent straight to the agent. When
the agent works through one, it edits the exact part of the design the
comment points at, checks the change actually landed, then either resolves
the thread with a one-line note of what changed, or replies asking the
person to decide when it isn't something the agent should resolve on its
own.

### Code & Measurements tab {#code-tab}

Shows, for whatever's selected: exact position and size in pixels, computed
styles (display, position, font, color), and the underlying HTML with a
one-click **Copy** button. This is a read-only inspector, not an editor.

### Design Preview {#design-preview}

The header's play-button menu. **Design Preview** opens the current
screen's real rendered HTML in a new browser tab, exactly as it will look
outside the editor. It's disabled until the screen has content.

### Export {#export}

Open the small menu button in the editor's left-side rail (it uses the
Agent-Native mark as its icon, next to Back to designs, Save as template,
and Version history). **Export** is a submenu near the bottom of that menu.

<Table
  id="doc-block-design-export-table"
  columns={["Format", "What it's for"]}
  rows={[
    [
      "Download HTML",
      "One self-contained file with Tailwind and Alpine CDN links baked in. Opens directly in any browser.",
    ],
    ["Download PNG", "A flat raster image of the current screen."],
    [
      "Download SVG",
      "An SVG wrapper around the live HTML. Good for embedding, not editable in Figma.",
    ],
    [
      "Download Figma SVG",
      "Real vector shapes, text, and gradients Figma can import as editable layers. Copy and paste, or drag in as a file.",
    ],
    [
      "Download ZIP",
      "All design files organized by type (HTML/CSS/JSX/assets) plus a metadata file",
    ],
    [
      "Download PDF (all screens)",
      "Only shown in the multi-screen overview, with 2 or more screens. A client-side rendered PDF covering every screen.",
    ],
    [
      "Copy Coding Handoff",
      "Copies design tokens, the design's files, and a ready-to-paste prompt for an external coding agent to turn the prototype into production code.",
    ],
  ]}
/>

Whatever the destination, exporting always reflects the design's current
state, including any applied tweaks, not the first generated version.
Duplicate the design first if you want to keep iterating on a copy after
handing one version off.

### Version history {#version-history}

In that same left-side rail menu, **Version history** opens a panel that
lists saved snapshots of the design with a relative timestamp ("Just now,"
"5m ago," and so on). Selecting one shows a preview of its screens, and
**Restore this version** brings the design back to that exact state.

## Templates {#templates}

Two ways to start faster than a blank canvas.

### View templates {#view-templates}

The Templates page has two sections, **Your templates** and **Built-in
templates**, plus a search box that filters by title, description, and
category. Each template card shows a live preview, its category (ad,
one-pager, landing page, social, presentation, or other), its dimensions,
and how many layers on it are locked. Your own templates (not the built-in
ones) get a "⋯" menu with **Share** (viewer, editor, or admin access) and
**Delete**.

### Use a template {#use-a-template}

Clicking **Use template** opens a small dialog: an optional prompt, a
design system to apply (or a link to create one), and a **Use as is**
button to skip straight to a copy with no prompt. Either way, a new design
is created and you're taken straight into its editor.

### Save as template {#save-as-template}

This isn't on the Templates page itself. While editing a design, open the
same left-side rail menu used for Export and Version history, and choose
**Save as template**. Its dimensions, files, and locked layers carry over
the same way a built-in template's do.

<Callout tone="info">

Templates can currently be saved from inline Design projects only. A design
backed by `/visual-edit` or Full App Building can't be saved as a template.

</Callout>

### Open a design {#open-a-design}

There's no separate "open" step. Using a template, like generating a new
design from a prompt, always ends by opening that design's editor
automatically.

## Design Systems {#design-systems}

A design system is the brand identity, its colors, fonts, spacing, and
logos, that Design applies to every prototype linked to it.

### View and share design systems {#view-and-share}

The Design Systems page is a grid: a "New design system" card first, then
one card per system with a color-swatch preview, a **Default** badge on
whichever one is your default, and a visibility badge (private, org, or
public). Every card has a real **Share** button with viewer, editor, or
admin roles, the same sharing model templates use. A header **Select**
toggle enables multi-select with bulk delete.

### New design system {#new-design-system}

Creating one starts with a source picker:

- **Figma**: upload a `.fig` file.
- **Company/brand**: a website URL.
- **Code**: a connected GitHub repository.
- **Design.md**: a written design-guidance document.
- **Design files**: upload files directly.
- **Import existing**: reuse a design system or project you already have.
- **Notes**: describe your brand from scratch, or start from a real,
  maintained public system, like Material 3, Carbon, or Primer, instead of
  recreating one from memory.

<Callout tone="info">

Each public system ships real semantic tokens, a type scale, spacing, and
attribution. Design won't let a prompt quietly turn one into a lookalike
with different data underneath. Every design system also carries an
optional set of custom instructions and a described image style, so
generated photography and illustration stay in the same visual language as
the rest of the brand.

</Callout>

## What's next

- [**Design**](/docs/template-design) — the overview and getting-started steps
- [**Talk to the Agent**](/docs/template-design-agent) — every prompt by task and how the agent sees your screen
- [**Design in a Multi-App Workspace**](/docs/template-design-integrations) — connecting to Dispatch and calling Design over MCP
- [**Developer Guide**](/docs/template-design-developers) — quick start, actions, data model, and routes
- [**Sharing**](/docs/sharing) — the share-grant model templates and design systems use