Claude Code, Codex, opencode and other CLI agents design on a real canvas with your tokens, components and design rules, then check their own work. You refine by hand, and it all lands as a .pego file in your repo.
WORKS WITH YOUR CLI AGENT
TRY IT HERE
HOW IT WORKS
No mockup handoff, no export step. The agent and you edit the same file.
Type what you need in the Pego panel or in your terminal: “a pricing section with two plans, in our brand.” Point at a layer to be specific.
It plans the steps and places real frames, text and components on the canvas. After each section it takes a screenshot, runs a layout check and fixes what it finds.
Drag, retype, recolor by hand. Nothing is locked, and a whole agent run undoes in one step.
AGENTS
Pego runs your CLI agent with your own login, or your agent connects to Pego over MCP. No extra account, no new subscription.
$ claude mcp add --transport http \ pego http://127.0.0.1:4519/mcp ✓ Added HTTP MCP server pego > Redesign the pricing page with our brand tokens pego · get_document 24 variables, 6 components pego · get_skill landing-page step 1 of 4 · hero check_layout ✓ 0 issues
DESIGN RULES
Before it draws, the agent loads design skills: the core anti-slop rules, UI polish and a guide for what you asked for. Then it picks one style and sticks to it.
A skill for each job
Landing pages, web apps, mobile, dashboards, slides, brand identity and design systems.
21 style presets, 27 design movements
Swiss International, Dieter Rams, Bauhaus, Neo-brutalism and more. One style per design, never a mix.
No defaults it can't defend
No purple gradients, glow, emoji icons, fake stats or lorem ipsum. Colors and radii come from your tokens.
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
PNG, SVG, HTML and CSS, or React with Tailwind. Variables become CSS custom properties, animations come along as CSS.
Import a live website
Load any page in the built-in browser and bring it in as editable layers with auto layout.
Find or generate images
Search openly licensed photos, generate with your own image model, cut out backgrounds.
Motion and shader fills
Entrance animations, count-up numbers and animated shaders that play in exported HTML.
Opens .pen files
Bring designs over from Pencil. Anything that does not convert is listed for you.
{ "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.
Local-first, works offline
Files autosave into your repo. No account, no server, nothing to sync.
Agents read it natively
Your coding agent sees the design and the code it describes in one place.
Open beta for macOS, Windows and Linux, or run it in your browser.
