Ask for a screen. Get layers.
Studiolo is a design editor that Claude Code drives over MCP. The design lands as frames, components and variables you can edit by hand, then export as React.
Download for macOS
Free. Version 0.2.0 for Apple Silicon.
One document. You and Claude take turns.
Claude writes to the same canvas you edit. Your changes and Claude's share one undo history.
- Prompt Claude Code. Describe the screen in your terminal, in plain language.
- Layers appear. Frames, components and tokens draw onto the canvas as editable layers.
- You edit by hand. Drag, resize and recolor a card. It is the same document Claude reads.
- Claude edits again. Ask for a dark theme and Claude flips the variables on your document.
- Export code. Components become React components, variables become CSS custom properties.
Claude builds with the same parts you do.
Components, auto layout and variables are part of the document, so what Claude makes is as editable as what you make.
- Components and instances. Edit the main component and every instance follows. Overrides stay put.
- Auto layout. Fixed, hug or fill. Resize the container and the children reflow.
- Variables and themes. Colors and spacing live as tokens. Flip a light and dark axis and the screen follows.
- .pen in, .pen out. Open a .pen file, change it, save a page back as .pen.
Your machine, your login, your files.
Studiolo runs on 127.0.0.1 and uses the Claude Code login you already have. It never proxies model access. Documents are versioned JSON on your disk, with backups in ~/.studiolo/backups.
- 0 Accounts to create
- 0 Telemetry events sent
- 0 MCP call quotas
Also no agent-day caps.
Three steps to your first screen.
Needs a Mac with Apple Silicon and Claude Code.
- Get the app. Download the DMG, drag Studiolo to Applications and open it. Download for macOS
- Connect Claude Code. In the app choose Studiolo › Connect Claude Code…, or run:
claude mcp add --scope user studiolo -- ~/.studiolo/bin/studiolo mcp
- Ask for a design. In any project run
claude and describe a screen. The layers appear in the Studiolo window.
Signed ad hoc, not notarized: allow it once in System Settings › Privacy & Security.