# Design Exploration

Use Design for UI/UX exploration, side-by-side design directions, interactive prototype...

- Repository: https://github.com/BuilderIO/agent-native (7579 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add BuilderIO/agent-native --skill design-exploration -g -a claude-code -y`
Codex: `npx skills add BuilderIO/agent-native --skill design-exploration -g -a codex -y`
Cursor: `npx skills add BuilderIO/agent-native --skill design-exploration -g -a cursor -y`
Gemini CLI: `npx skills add BuilderIO/agent-native --skill design-exploration -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add BuilderIO/agent-native`

## Description

Use Design for UI/UX exploration, side-by-side design directions, interactive prototype previews, user selection, iteration, and design-to-code handoff through the hosted Design MCP app.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design Exploration

Use the Design app when a workflow needs visual UI exploration, prototype
iteration, or a human-in-the-loop choice among design directions.

## Choose The Path

- Use `create-design` first to create a project shell. Do not report the
  design as ready until it has renderable HTML.
- For open-ended UX exploration, generate distinct, compact, complete HTML
  directions (2-5, three by default) and call `present-design-variants`. Each
  direction should be one representative screen or directional snapshot, not a
  full app per variant. Design saves every option as a normal screen on the
  overview board and renders an inline chat choice with one button per screen
  name. After the user picks, delete the unchosen variant screens and continue
  from the kept screen by first calling `get-design-snapshot` with that
  screen's `fileId`, then calling `edit-design` on that same `fileId` in a
  bounded single-file pass. Use `mode: "replace-file"` when expanding the
  representative placeholder into the full chosen direction. Do not call
  `generate-design` after a variant pick.
- If the chat choice buttons are not available in the host, ask the user to
  tell you the screen name they prefer. The variants are already real screens
  on the board, so do not ask them to paste HTML or copy a generated handoff
  summary.
- For direct refinements to an already chosen direction, call
  `get-design-snapshot`, edit from the current tuned HTML, and use
  `edit-design` for surgical changes or `mode: "replace-file"` for a bounded
  selected-file replacement. Use `generate-design` for new files only.
- Use `export-coding-handoff` when the user wants to implement the chosen
  design in a codebase.

## Exploration Defaults

The rest: https://github.com/BuilderIO/agent-native/blob/HEAD/.agents/plugins/agent-native-design/skills/design-exploration/SKILL.md