Hand the pencil to your agent.

Cardboard is a free design editor where you and your AI agent work on the same canvas. Every layer is real HTML and CSS, and every file stays on your machine.

Install CardboardRead the source
Agent · write_html
You
Dashboard
Spring menu
Onboarding flow
Layers
#Spring menu
#Header
TTitle
#Dish card
▢Photo
TDish name
TPrice
#Dish card
#Dish card
#Footer
Menu · iPhone
fern & flour
Spring
menuTwelve dishes, picked this week
NEWSEASON
AllSmall platesSweet
218 × 70
Pea & mint toastWhipped feta
$9
Rhubarb tartVanilla crème
$7
Wild garlic soupChives, crème
$8
Book a table→
Dish detail · iPhone
←♡
Chef’s pick
Pea & mint toastSweet spring peas, whipped feta and lemon on charred sourdough.
Vegetarian12 min420 kcal
−1+
Add to order$9
Agent · duplicating Dish card
Design
Theme
Layout
WFill
HFit
Auto layout
Gap14
Pad12
DirRow
AlignCenter
Fill
F7F0E2100%
Radius
All12
Tokens5 colors
--forest#16301F
--cream#F7F0E2
--leaf#A9D17C
--tomato#EF6A4C
--butter#F5CF6A
Agent connected over MCP
Add two more dishes in the same style
Duplicated Dish card twice and renamed them. Undo is one step if you want them gone.
duplicate_nodesset_text_content

A real editor that happens to speak to agents.

<div style="display: flex;gap: 14px;border-radius: 12px">

Real HTML, real CSS

Flexbox, gradients, shadows and fonts render in a real browser engine. Copy any layer out as HTML or JSX.

Make the price bolder
update_styles · 3 layers

Agents in the room

Point Claude or any MCP client at Cardboard. Its edits land on your canvas live and share your undo history.

Spring menu.cardboard
Onboarding flow.cardboard
Brand sheet.cardboard

Files you own

Designs are .cardboard files in a folder you choose. Back them up, sync them, put them in git.

You steer. It builds.

Cardboard ships an MCP server with 46 tools. Your agent reads the file, plans a direction, then builds one piece at a time while you watch.

✓
Same canvas, same undoPress Ctrl Z on anything the agent did.
✓
Built in small stepsNo giant dumps of markup. You can steer mid-way.
✓
Honest about what it sawTools report real CSS, never guessed pixels.
mcp.json
{ "mcpServers": {"cardboard": { "command": "cardboard", "args": ["mcp"] }} }
0.0sget_basic_infoSpring menu · 1 artboard
1.2swrite_htmlHeader
2.9swrite_htmlDish card
3.4sduplicate_nodesDish card × 2
4.1sset_text_contentRhubarb tart, Wild garlic soup
4.8s

Start with a blank sheet.

Free forever, runs offline, and your work never leaves your computer.

$curl -fsSL https://cardboard.goerll.dev/install.sh | sh
All downloads

On Windows, run irm https://cardboard.goerll.dev/install.ps1 | iex in PowerShell.

Hand the pencil to your agent.

Cardboard is a free design editor where you and your AI agent work on the same canvas. Every layer is real HTML and CSS, and every file stays on your machine.

Install CardboardRead the source
Agent · write_html
You
Dashboard
Spring menu
Onboarding flow
Layers
#Spring menu
#Header
TTitle
#Dish card
▢Photo
TDish name
TPrice
#Dish card
#Dish card
#Footer
Menu · iPhone
fern & flour
Spring
menuTwelve dishes, picked this week
NEWSEASON
AllSmall platesSweet
218 × 70
Pea & mint toastWhipped feta
$9
Rhubarb tartVanilla crème
$7
Wild garlic soupChives, crème
$8
Book a table→
Dish detail · iPhone
←♡
Chef’s pick
Pea & mint toastSweet spring peas, whipped feta and lemon on charred sourdough.
Vegetarian12 min420 kcal
−1+
Add to order$9
Agent · duplicating Dish card
Design
Theme
Layout
WFill
HFit
Auto layout
Gap14
Pad12
DirRow
AlignCenter
Fill
F7F0E2100%
Radius
All12
Tokens5 colors
--forest#16301F
--cream#F7F0E2
--leaf#A9D17C
--tomato#EF6A4C
--butter#F5CF6A
Agent connected over MCP
Add two more dishes in the same style
Duplicated Dish card twice and renamed them. Undo is one step if you want them gone.
duplicate_nodesset_text_content

A real editor that happens to speak to agents.

<div style="display: flex;gap: 14px;border-radius: 12px">

Real HTML, real CSS

Flexbox, gradients, shadows and fonts render in a real browser engine. Copy any layer out as HTML or JSX.

Make the price bolder
update_styles · 3 layers

Agents in the room

Point Claude or any MCP client at Cardboard. Its edits land on your canvas live and share your undo history.

Spring menu.cardboard
Onboarding flow.cardboard
Brand sheet.cardboard

Files you own

Designs are .cardboard files in a folder you choose. Back them up, sync them, put them in git.

You steer. It builds.

Cardboard ships an MCP server with 46 tools. Your agent reads the file, plans a direction, then builds one piece at a time while you watch.

✓
Same canvas, same undoPress Ctrl Z on anything the agent did.
✓
Built in small stepsNo giant dumps of markup. You can steer mid-way.
✓
Honest about what it sawTools report real CSS, never guessed pixels.
mcp.json
{ "mcpServers": {"cardboard": { "command": "cardboard", "args": ["mcp"] }} }
0.0sget_basic_infoSpring menu · 1 artboard
1.2swrite_htmlHeader
2.9swrite_htmlDish card
3.4sduplicate_nodesDish card × 2
4.1sset_text_contentRhubarb tart, Wild garlic soup
4.8s

Start with a blank sheet.

Free forever, runs offline, and your work never leaves your computer.

$curl -fsSL https://cardboard.goerll.dev/install.sh | sh
All downloads

On Windows, run irm https://cardboard.goerll.dev/install.ps1 | iex in PowerShell.