> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stardeck.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Assets

> Save, iterate on, and share reusable HTML design mockups across your organization

Design assets are persistent, reusable HTML design artifacts owned by your organization. They live in the dashboard under [**Design Assets**](https://www.stardeck.ai/dashboard/assets) (currently **Beta**) and appear as clickable cards in chat when an agent references them.

Each asset has a **title**, a URL **slug**, **HTML content**, a rendered **PNG thumbnail**, and a **draft** or **published** status. An asset can be linked to a specific project or left project-agnostic so you can reuse it across projects.

## Creating design assets

You can create a design asset in four ways:

<Steps>
  <Step title="From an HTML preview in chat">
    Ask the Developer Agent to mock something up. When the agent renders an HTML preview in chat, click the **palette** icon on the preview toolbar, enter a title, and save.
  </Step>

  <Step title="From a saved project preview">
    Open your project's **Previews** tab in settings. On any preview card, click the **palette** icon. The asset is created with the preview's title and HTML content.
  </Step>

  <Step title="From the dashboard">
    Go to [**Design Assets**](https://www.stardeck.ai/dashboard/assets) and click **New asset**. Enter a title and initial HTML, then open the asset to edit further.
  </Step>

  <Step title="Via the agent or MCP">
    An agent with write access can call `save_design_asset` directly in chat or through an external MCP client connected to your organization.
  </Step>
</Steps>

## Viewing and editing

Open any asset from the [**Design Assets**](https://www.stardeck.ai/dashboard/assets) grid to reach the detail page. From there you can:

* Edit the **HTML source** and **title**, then click **Save**
* Preview the design at different viewport widths — **Desktop** (1280px), **Tablet** (768px), or **Mobile** (390px)
* Switch between **Preview** and **Thumbnail** tabs
* **Regenerate** or **Download** the PNG thumbnail

<Note>
  **Regenerate** renders the thumbnail from the last **saved** content, not unsaved edits in the editor. Save first if you want the thumbnail to match your current HTML.
</Note>

Agents can iterate on assets too:

* **`save_design_asset`** with an existing slug updates that asset in place (title, content, and optional project link). Omit the slug to create a new asset — a readable slug is generated from the title.
* **`edit_design_asset`** makes small targeted string replacements without rewriting the full HTML. Fetch the asset with `get_design_asset` first so `oldString` matches the stored content exactly.

For full redesigns, prefer re-saving with `save_design_asset`. For small tweaks (a color, font, or label), prefer `edit_design_asset`.

## Publishing and sharing

Assets start as **draft**. Only **published** assets are reachable on the public share page at `https://www.stardeck.ai/assets/<slug>`.

On the asset detail page, click **Publish** to make the share link available. Click **Unpublish** to return the asset to draft — the public page will no longer load it.

When published, configure **Share view** settings:

| Setting     | What it controls                                                                                                                                                       |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Sizes**   | Which viewport widths visitors can toggle on the public page (Desktop 1280px, Tablet 768px, Mobile 390px). At least one size must stay selected.                       |
| **Display** | How visitors see the asset: **Live preview** (interactive HTML), **Live + image toggle** (switch between live HTML and the PNG), or **Image only** (static thumbnail). |

Copy the share link from the detail page, or download the PNG thumbnail for decks, docs, and other contexts outside Stardeck.

## Agent and MCP access

Design asset tools are org-level and gated by two permission keys in [**Settings → Roles & Permissions**](https://www.stardeck.ai/dashboard/settings?tab=roles):

| Permission                  | Tools                                                         |
| --------------------------- | ------------------------------------------------------------- |
| `agent:design-assets:read`  | `list_design_assets`, `get_design_asset`                      |
| `agent:design-assets:write` | `save_design_asset`, `edit_design_asset` (also requires read) |

**Read tools**

* **`list_design_assets`** — list saved assets (slug, title, status, thumbnail, share URL, and optional project link — not full HTML content). Pass an optional `projectId` to list that project's assets plus project-agnostic ones.
* **`get_design_asset`** — fetch a single asset by slug, including full HTML content.

**Write tools**

* **`save_design_asset`** — create a new asset or update an existing one by slug.
* **`edit_design_asset`** — apply a targeted find-and-replace edit to stored content.

There is intentionally **no delete tool**. Deleting an asset is dashboard-only (**Delete** on the asset detail page).

### In-chat rich cards

When an agent saves or references an asset in Stardeck chat, it can render a clickable card using a fenced code block with language `design-asset` and the asset's slug as the content:

````md theme={null}
```design-asset
my-dashboard-mock-a1b2c3
```
````

The card shows the thumbnail, title, and status. Click it to open a live preview dialog, jump to the asset in the dashboard, or copy the public share link (when published).

## Using assets in chat

You can hand an asset to an agent directly from the chat input. Click the **+** button and choose **Design Assets** to browse your library — search by title or slug, then pick one. The selection appears as a removable chip above the input, and when you send the message the agent receives a reference to the asset (your sent message shows it as a rich card).

In a project's developer chat, this is how you turn a design into a build: attach the asset (or just mention it by name) and ask the agent to implement it. The agent fetches the asset's HTML and treats it as the design spec. If you ask for changes to the design itself, the agent can also update the saved asset in place.

<Note>
  Design assets are org-wide. When an agent edits a saved asset from inside one project, the change is visible everywhere the asset is used.
</Note>

## Tips

<Tip>
  **Keep HTML self-contained.** Use inline styles or Tailwind utility classes — the Tailwind CDN is injected at render time. Avoid external assets (images, fonts, scripts from other domains). Body margin is reset to zero, so give your outermost wrapper its own padding (for example a full-bleed `bg-... py-8` wrapper) or the design will render flush against the top edge.
</Tip>

* **Reuse across projects.** Assets are org-scoped. Leave the project link empty (or omit `projectId` in agent tools) for designs you want available everywhere.
* **Slug format.** Slugs are 1–80 characters: lowercase letters, numbers, and hyphens only, with no leading or trailing hyphen. When you create an asset from the dashboard or chat, a readable slug is generated automatically; agents can also set a stable slug when saving.

***

<CardGroup cols={2}>
  <Card title="Image Generation" icon="image" href="/image-generation">
    Generate images with AI for your app
  </Card>

  <Card title="Chatting with the Agent" icon="comments" href="/chatting-with-agent">
    Tips for working with the Developer Agent in chat
  </Card>
</CardGroup>