Describe the screen you want. An agent designs it on a real canvas, then you take over by hand. What you get is a .pego file sitting next to your code.
Free to use. Bring the agent you already use.
HOW IT WORKS
No mockup handoff, no export step. The agent and you edit the same file.
Type what you need in plain words: “a pricing section with two plans, in our brand.” Point at a layer to be specific.
It plans the steps, then places real frames, text and components on the canvas while you watch, using your variables.
Drag, retype, recolor by hand. Nothing is locked, and every agent change can be undone in one step.
FEATURES
Each agent run is one entry in history. Keep the parts you like, undo the rest, or roll back the whole run.
The agent reads your variables and components first, then builds with them instead of raw hex.
<Hero /> index.html
React with Tailwind, or plain HTML and CSS. Variables become CSS custom properties.
AGENTS
Pego speaks MCP. Connect a coding agent from your terminal, or chat with the one built into the editor.
$ claude mcp add --transport http \ pego http://127.0.0.1:4519/mcp ✓ pego connected · 45 tools ready > Redesign the pricing page with our brand tokens reading design.pego · 24 variables, 6 components step 1 of 4 · hero
{ "type": "frame", "name": "Pricing", "layout": "horizontal",- "gap": 16,+ "gap": "$space-md", + "fill": "$surface", "children": [ … ] }
THE .PEGO FILE
Readable diffs
Design changes show up in pull requests, just like code.
No server, no lock-in
The file lives in your repo. Open it in Pego, read it in any editor.
Agents read it natively
Your coding agent sees the design and the code it describes in one place.