Skip to content
tarsk

Design Artifacts

A design artifact is an HTML mock the agent builds for one conversation. Tarsk stores the draft and every published version with the conversation, so the mock stays out of your repository and never changes the app you are building.

Designs suit layout and visual decisions: a settings page, a dashboard, a checkout flow. For charts, tables, and metric cards, the agent uses visualizations instead.

Start a design

Section titled “Start a design”

Use the built-in /design command with an optional preset and a prompt:

/design brutalist Pricing page with three tiers

You can also ask for a mock directly. The agent reads the existing design first, then drafts or edits it.

Tools

Section titled “Tools”

The bundled tarsk-design Tool skill publishes four tools:

Tool What it does
design_read Returns the latest published HTML for the conversation
design_draft Replaces the in-progress draft; the preview updates on every call
design_edit Replaces one string in the draft, or in the latest version when no draft exists
design_publish Validates the HTML and saves it as a new version, then clears the draft

Every call except design_read needs a short description, such as Settings page v1. The chat UI shows it as the label on the tool block.

Versions and preview

Section titled “Versions and preview”

Each publish adds a version: v1, v2, and so on. The preview appears under the composer, and Expand preview to main area moves it into the main pane. Published designs run inline scripts; drafts strip them, so a draft is display-only.

The toolbar holds the Version picker, Download HTML, and Save design preset. Switching the version changes the preview; design_read still returns the latest published version.

Rules the agent must follow

Section titled “Rules the agent must follow”
  • One self-contained HTML document per publish, with inline CSS and data URLs only.
  • No external src or href targets. The publish fails otherwise.
  • Published HTML caps at 512 KB. An empty or incomplete document fails.
  • The agent sends HTML through the design tools, never as a fenced block in its message.

Style presets

Section titled “Style presets”

Five presets ship with Tarsk: minimal-light, editorial-serif, brutalist, soft-gradient, and terminal. Each is a short Markdown description the agent follows while it writes the HTML.

You can add a preset to a project. Open Save design preset in the design toolbar and fill in:

Field Accepts
Preset ID Lowercase slug, up to 48 characters (my-brand)
Design.md Content Preset description, up to 32 KB

Tarsk writes the preset to .agents/design-presets/<id>.md in the project. The agent then passes the id as preset_name when it publishes.

Interactive controls

Section titled “Interactive controls”

A published design can send values back to the agent. The control calls:

window.tarskAction({ actionId: "choose-plan", label: "Choose Pro", values: { plan: "pro" } });

Tarsk sends a new user turn that holds a versioned JSON UI-action record, and it treats those values as user input. The call starts a normal agent turn; a design cannot invoke a tool directly.

Storage

Section titled “Storage”

Drafts and versions live in the instance database:

  • conversation_design_state holds one draft and the focused version per conversation.
  • conversation_design_versions holds each published HTML document, its index, and its preset.

Deleting the thread removes its designs.

Section titled “Related”