Grab the word and pull. Then throw some paint at it.Pick a color for the word.
The creative playground for real code.
Playdo is a canvas where every design is real code. Prompt it into being, push it around by hand, ask Claude for changes, and ship it as React or HTML.
For macOS. Early access is open. Bring your own Claude plan.
<buttonclassName="button"style={{background: "var(--lime)",color: "var(--lime-ink)",borderRadius: 14,fontSize: 22,rotate: "-3deg",}}>Start playing</button>- Real code, not a picture
- Every design is real HTML in your project. What you shape is what ships. Nothing gets redrawn.
- Room to play
- Try four directions at once, branch any idea, undo anything. Nothing you make is ever lost.
- AI that takes direction
- Point at anything and say what to change. Claude Code makes the edit in seconds, on the plan you already have.
- Ships as React or HTML
- Copy a component, export a React project, or hand the design to your coding agent to build.
Describe what you're imagining: a landing page, a dashboard, an onboarding, a deck. Claude Code brings it to the canvas as a real, working page. One screen or the entire journey.
One prompt. A whole journey.
Ask for a flow and every screen arrives designed, linked and ready to click through. Press P and feel it like the real product.
1/4Welcome to Sprout Welcome to SproutSmall habits, every day.Continue2/4Pick your goals Pick your goalsChoose a few to start.SleepMoveReadWaterFocusCalmContinue3/4Set a reminder Set a reminderWe'll nudge you, gently.8:00Continue4/4Your first day Your first dayThree small things.Drink a glass of waterTen minutes outsideRead one pageLet's go
One prompt, four linked screens.
Love a look? Start from it.
Drop in a screenshot, a moodboard or any website. Playdo picks up its fonts, colors and shapes, so your design starts with taste instead of a guess.
- Fonts
- Inter, a mono
- Ground
- #08090a
- Accent
- #5e6ad2
- Radius
- 8px, pills
Can't decide? See every direction at once.
Ask for up to four takes on the same idea, from the safe one to the bold one. Keep the winner and evolve it with a sentence.
An illustration of four takes on one prompt, a pricing page, from a quiet light one to a loud yellow one.
Your prompt, every model.
Run the same brief on Opus, Sonnet and Codex and see which one you'd ship.
Same brief, three models, side by side.
Twelve styles to start. Yours to rewrite.
Each style is a plain DESIGN.md in your project. Tune it, replace it, or write your own taste from scratch.
Riso
- ground
- ink
- accent
Press E and the design opens up. Move it, restyle it, rewrite it. You're working on the real page, not a flattened picture, so every detail you perfect is the detail that ships.
The tools you know, on a design that's real.
- A real inspector. Size, spacing, type, color and radius, picked from the design's own tokens.
- Layers and themes. Reorder, duplicate, hide or delete. Retheme the whole design from one panel.
- Point and ask. Select any part and tell Claude what to change. It lands in seconds, as one undo step.
the field.
Draw anything
Shapes, text and a real pen tool. Combine and mask them right inside a generated design.
Color and type, uncompromised
An OKLCH picker that reaches P3. Variable font axes and OpenType features, all there.
Components that stay in sync
Make anything a component. Change it once and every copy follows, in every design.
A living design system
Tune your tokens in one place and watch every design update. Your style guide builds itself in a click.
Your design is already HTML and Tailwind, sitting in your project. When you're ready, your coding agent builds it into your app with your own components. What you designed is what gets built.
One command to your codebase.
Run /playdo implement in Claude Code. It reads your design and rebuilds it with your app's own components and tokens, as a diff you review.
Select anything. Get the code.
The Code tab shows any selection as a typed React component or as HTML, and takes your edits back. Or export a full Vite and React project.
export function PlanCard({ name, price, features }) {return (<div className="rounded-3xl bg-accent p-8"><p>{name}</p><p className="text-6xl font-semibold">{price}</p><Features items={features} /><Button>Choose {name}</Button></div>);}PlanCard.tsxCopyYour agent designs here too.
Playdo speaks MCP, so the coding agent you already use can read, create and refine designs on your canvas, with the canvas open or closed. 18 tools, one shared space.
> design three settings pages on the canvas● playdo_generate_design variants: 3● playdo_get_status✓ 5e6ec10576 1/3 a settings page .playdo/designs/5e6ec10576.html✓ 7966a14343 2/3 a settings page .playdo/designs/7966a14343.html✓ 0a6456892e 3/3 a settings page .playdo/designs/0a6456892e.html3 of 3 finished in 71s. They are on the canvas.Every plan gets all of it. Nothing is held back for a bigger tier.
Figma import
Bring your .fig files or paste straight from Figma. Components stay components.
Web page import
Pull any live page onto the canvas as a frame you can edit.
Pages
Organize a project into named canvases, just like the design files you know.
Every screen size
Desktop, tablet, mobile and slides. Present a deck right from the canvas.
New screen like it
Design the next page from one you love. Same header, same tokens, same voice.
Shared libraries
Keep components in one folder and use them across every project.
Premade components
Buttons, cards, menus and whole sections that take your design's style. See them all on the components page.
Image tools
Remove a background, vectorize, crop or swap an image without leaving your Mac.
Shaders and gradients
Shader fills, mesh gradients and grain, running live in your design.
Version history
Every change is saved. Go back to any moment, on any frame.
Share links
Send a frame or a flow to anyone. They can comment without an account. Links last 30 days.
Export
PNG, PDF, plain HTML and CSS, or a full React project. Take it anywhere.
Design check
Catch low contrast, tight tap targets, missing alt text and overflow before anyone else does.
Paper and pen.dev bring agents to the canvas too. Here's what sets Playdo apart, checked against each product's own site on November 9, 2026.
YesPartlyNoNot listed: we didn't find it on their pages
| Topic | Playdo | Paper | pen.dev |
|---|---|---|---|
| Account | Yes. You sign in with a code sent to your email. | Yes. You sign up, and plans are counted per editor. | Yes. You sign in with an email code or a password. |
| Price to startA free plan open today? | NoPrices come out at launch. Early access is free. | Yes$0 on Free, with weekly limits. | Yes$0 on Free, with monthly limits. |
| What pays for the AIRuns on your own AI plan? | YesOn the Mac, the Claude Code or Codex plan you already have. On the web, cloud credits or your own Anthropic key. | YesYour agent's own plan, inside Paper's weekly allowance of tool calls. | YesYour own Claude or ChatGPT plan, an API key, or hosted models on credits. |
| What a design isIs the design HTML and CSS? | YesAn HTML file with Tailwind classes. It opens in any browser or editor. | YesA file in Paper, on a canvas made of HTML and CSS. | NoA .pen file: JSON, drawn by its own WebGL renderer. |
YesPartlyNoNot listed: we didn't find it on their pages
Questions, answered.
What is Playdo?
A Mac app where every design is real code. Prompt a screen or a whole flow, push it around by hand, ask Claude for changes, then ship it as React or HTML, or hand it to your coding agent to build.
Does it edit my React components directly?
Yes. Put your running app on the canvas, point at anything in it and say what to change: Claude Code edits your React source in place, and your dev server shows the result. On the Mac it works in your own folder and commits to a branch with your git. On the web, with Pro, your GitHub repo runs in a cloud preview and the change ships as a pull request.
What does it cost?
Early access is free. Plans and prices come out at launch, and people on the early access list hear first. On the Mac, the designing runs on the Claude Code plan you already have.
Why do I need an account?
Your account carries your plan and, on Team, your workspace. Sign in with a six-digit code sent to your email. No password to remember. Your designs stay in your project folder either way.
How is it different from Paper or pen.dev?
All three bring AI to a design canvas. With Playdo, every design is real HTML in your project, the designing runs on the Claude plan you already have, and a hand-off rebuilds it with your app's own components. The comparison goes line by line, including where they're ahead.
How much of my Claude plan does it use?
Each design is one Claude Code run, on Sonnet unless you pick another model, so four takes are four runs. Changing a single element takes seconds. Editing by hand uses no model at all.
Can I edit designs by hand?
Yes, all of it. Press E and click anything: a real inspector, an OKLCH picker that reaches P3, variable fonts and OpenType features, text you rewrite in place, layers, and a theme you can retune from its tokens. Every change is saved as a version.
Can I use other models?
Sonnet, Opus and Haiku through Claude Code, plus Codex if you have it installed. Compare models runs one prompt on several and lines the results up side by side.
Where do my designs go?
Into .playdo/ in your project folder: one HTML file per frame and a canvas.json. Nothing is uploaded unless you make a share link or put the project in a team workspace. What leaves your Mac lists the rest.
Does it work with my stack?
Designs are framework-free HTML and Tailwind. The hand-off rebuilds them in your framework with your own components, so your stack is whatever your app already uses.
What do I need?
A Mac, and Claude Code installed and signed in.
Is there a Windows or Linux version?
Not yet. Playdo is made for macOS first.
Can my coding agent use it?
Yes. Playdo speaks MCP: 18 tools to read, create and refine designs, with the canvas open or closed. /playdo implement in Claude Code turns a design into a diff in your codebase.
Come andplay.
Playdo for macOS is on its way. Leave your email and we'll send you one message the day it's ready.
Drag it around. Drag a corner. Double-click to put it back.