---
title: "Design"
description: "An agent-native prototyping studio for creating interactive web experiences with Alpine and Tailwind."
---

# Design

Design is an agent-native prototyping studio. Instead of a layered drawing
canvas, the agent generates complete, self-contained Alpine and Tailwind HTML
prototypes, shows them in a live preview, and refines the result through
prompts and tweak controls. The live preview runs the same HTML that the agent edits and exports.

<Cards columns={1}>

### [Try it out now →](https://design.agent-native.com)

See Design live and generate a real prototype.

</Cards>

<Video
  src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd727791fcde24ad7ad9e171f017c4eea?alt=media&token=41c84c1b-f1ca-4670-88a7-cf71018e21c9&apiKey=YJIGb4i01jvw0SRdL5Bt"
  alt="A brief tour of the design application."
  caption="A brief tour of the design application."
  autoplay={true}
  loop={true}
/>

Every generation, tweak, and export reads and writes the same HTML file, so
nothing gets lost in translation between the preview and what you download.

## Design in a multi-app workspace

If you run Design alongside other apps in
[Dispatch](/docs/template-dispatch), it's not the only way to reach it.
Design also runs as a hosted tool other agents can call directly, including
Claude Code and Claude Desktop, over the same kind of connection point a
workspace app already exposes. See [Design in a Multi-App
Workspace](/docs/template-design-integrations) for how the connection
actually works and the real mechanisms behind it.

## What you can do with it

- **Generate complete prototypes.** Describe the screen or page you need and the agent writes a working HTML document with Tailwind styling and Alpine interactions.
- **Compare variants.** Generate a few different directions, pick the strongest one, and keep refining instead of starting over.
- **Apply a brand.** Link a design system, import brand from a site or codebase, or bring in a Figma frame as an editable starting point. See [Features](/docs/template-design-features).
- **Keep quality consistent.** The agent runs an accessibility and visual check before calling a prototype ready, and repeated patterns can become reusable components. See [Features](/docs/template-design-features).
- **Export real files.** Export HTML, ZIP, PDF, or a genuinely vector Figma SVG, or hand the prototype to a coding agent with a ready-made handoff bundle. See [Features](/docs/template-design-features).

## What's next

- [**Features**](/docs/template-design-features) — generating, quality, brand and Figma import, components, and export, with setup steps for each
- [**Talk to the Agent**](/docs/template-design-agent) — prompts 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 from Claude Code, Claude Desktop, and other agents over MCP
- [**Developer Guide**](/docs/template-design-developers) — quick start, actions, data model, and routes
- [**Templates**](/docs/cloneable-saas) — the Cloneable SaaS model, and every other domain template to start from
- [**Getting Started**](/docs/getting-started) — the framework fundamentals: actions, application state, and live sync
- [**Context Awareness**](/docs/context-awareness) — how the agent knows what the user is viewing
- [**External Agents**](/docs/external-agents) — connecting Claude Code, Claude Desktop, and other MCP hosts to an agent-native app