Skip to main content
Design assets are persistent, reusable HTML design artifacts owned by your organization. They live in the dashboard under Design 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:
1

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.
2

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.
3

From the dashboard

Go to Design Assets and click New asset. Enter a title and initial HTML, then open the asset to edit further.
4

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.

​
Viewing and editing

Open any asset from the Design 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
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.
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:
SettingWhat it controls
SizesWhich viewport widths visitors can toggle on the public page (Desktop 1280px, Tablet 768px, Mobile 390px). At least one size must stay selected.
DisplayHow 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:
PermissionTools
agent:design-assets:readlist_design_assets, get_design_asset
agent:design-assets:writesave_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: 
```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.
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.

​
Tips

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.
  • 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.

Image Generation

Generate images with AI for your app

Chatting with the Agent

Tips for working with the Developer Agent in chat