Design Sandbox

The Design Sandbox turns a brand project into structured, editable prototypes. It combines a target-specific AI chat with a visual structure editor, live preview, revision history, generated source, and export.

Unlike the Design Editor and Resource Generator, the Sandbox only requires an active project. You can use it while the project is still a draft.

Choose an output target

Each Sandbox chat belongs to one of six targets:

Target	Intended output
Website	Theme-aware shadcn-style website screens
React Email	Responsive transactional or campaign email layouts
React PDF	Brand documents, one-pagers, briefs, and handouts
React Native	Mobile app screens built from React Native primitives
Ink Terminal	Terminal interfaces for Ink command-line tools
React Three Fiber	3D interface scenes using Three.js and React Three Fiber

Each target offers starting suggestions and target-specific structure choices, such as a category, preset, and optional modules.

Project context

The Sandbox can assemble context from the active project's:

Brand Identity, Visual Identity, and Brand Guidelines
Brand Creator conversation
Kept logo directions and logo images
Current theme

Accepted documents and kept assets receive priority, but you can start before the full brand setup is complete. Better-developed project context usually produces a more consistent first revision.

Create an artifact

Select a target.
Create or select a Sandbox chat.
Optionally choose a starting structure.
Describe the artifact you need.
Review the streamed revision in the workspace.

The AI streams structured changes rather than running arbitrary code directly in the project. Brand Peel turns that structure into target-specific source and preview output.

You can create, rename, switch, and delete Sandbox chats. Each one keeps its own messages, revisions, and current artifact inside the active project.

Edit the structure

After the first artifact is created, use the outline and inspector to work directly with its elements. Depending on the target and selected component, you can:

Select and inspect an element
Edit supported text, labels, styles, and component properties
Add a compatible element
Duplicate, delete, reorder, or drag elements
Undo and redo manual structure changes

Select an element before sending a message to scope the requested change. The workspace also includes common AI actions such as rewriting copy, improving clarity or hierarchy, improving accessibility, restyling with the theme, and adding a target-appropriate element.

Check artifact quality

Open the inspector's Checks tab to see an artifact-quality score, a context- grounding score, and any structure, grounding, or target-specific issues. When an issue points to an element, select its icon to jump to that element in the editor. You can correct an issue manually, choose Fix with AI for one issue, or use Fix all to request fixes for the current non-informational issues.

The checks themselves run locally and do not consume usage. Fix with AI and Fix all create Sandbox refinement requests, so each request consumes one chat unit or trial credit.

Preview, code, and revisions

The artifact workspace provides:

A target-aware preview
Responsive desktop, tablet, and mobile sizes where applicable
Zoom controls
Generated source code
Runtime diagnostics
Revision history with summaries and diffs

Rendered output varies by target. For example, email artifacts can produce rendered HTML, PDF artifacts can produce a PDF, and terminal artifacts can produce ANSI output.

Export an artifact

The standard export menu creates three files using the artifact title and target:

A TSX source file
A .sandbox.json artifact file
A .package.json file listing the target's runtime dependencies

Target previews may provide an additional rendered download, such as HTML, PDF, or ANSI text.

Exported source is intended as a starting point. Review it and install the listed dependencies in the destination project before integrating it into a production application.

Storage and AI usage

Sandbox chats, artifacts, structure edits, and revisions are stored locally with the brand project. Each AI generation or refinement uses one chat unit or trial credit; direct manual edits do not require a generation request.

Deleting the brand project also deletes its saved Sandbox work.

Next steps

Brand Creator — strengthen the project context
Design Editor — refine the theme used by prototypes
History — manage the local brand project
Credits and Usage — review AI usage