# Agent-Native Design

> Builder.io's Design app in your agent: compare UI prototype directions, refine the one you pick, or edit your running app on a canvas.

Agent-Native Design is Builder.io's Claude plugin for Design, the prototyping app built on its open-source Agent-Native framework. Design makes complete, self-contained HTML prototypes (Tailwind and Alpine) and shows them on a live canvas you can edit. The plugin connects your agent to the hosted Design app and adds two skills that tell it how to work with it.

What you can do with it
- Ask for a screen or page and get two to five distinct design directions (three by default) side by side, then pick one in the chat
- Keep refining the chosen screen with focused edits instead of starting over
- Export a coding handoff for the chosen design, to build it in your codebase
- Open your running local app in Design with /visual-edit to compare routes, flows and breakpoints side by side, adjust copy, colour, spacing and layout on the canvas, then have your coding agent pull the edits into your source
- See the work in the real editor, through an inline preview or an "Open design" link, rather than HTML pasted into the chat

What it installs
- Design's hosted MCP server at https://design.agent-native.com/mcp
- The design-exploration skill: create a design, compare directions, pick one and refine it, with Builder.io's quality bar for avoiding generic layouts
- The visual-edit skill: edit a running local app on Design's canvas through a local bridge (npx @agent-native/core design connect)

How it connects
In Claude Code, run /plugin marketplace add BuilderIO/agent-native, then /plugin install agent-native-design@agent-native-apps, and authenticate the Design connector with /mcp. You sign in to Design to approve access the first time. If a session expires, reconnect with /mcp or npx -y @agent-native/core@latest reconnect https://design.agent-native.com.

Good to know
- Design is labelled alpha. The app is free and open source (MIT); the hosted service at design.agent-native.com is Builder.io's.
- It's separate from the Agent-Native plugin, which opens all your granted Agent-Native apps through Dispatch; this one connects straight to Design.
- Canvas edits to a local app never write to your code by themselves: they wait until your agent pulls and applies them.

- Type: Plugin
- Made by: builderio
- Category: Design
- Formats: Claude plugins
- Version: latest
- Website: https://www.agent-native.com/docs/template-design
- Source: https://github.com/builderio/agent-native/tree/HEAD/.agents/plugins/agent-native-design
- Page: https://pluginboard.ai/plugins/agent-native-design

## Works with

- Claude
- GitHub Copilot
- Claude Code
- OpenClaw

## Install

### Claude

In Claude (web or desktop): Customize → Plugins → Add → Add marketplace, enter BuilderIO/agent-native, then add agent-native-design

### Claude Code

In Claude Code:

```text
/plugin marketplace add BuilderIO/agent-native
/plugin install agent-native-design@agent-native-apps
```

---
From Pluginboard (https://pluginboard.ai).