The whole tool, on one page.

Playdo is a Mac app. You need a Mac and Claude Code, installed and signed in. The app isn't out for download yet: early access is open.

1. Open Playdo and type your email. A six-digit code arrives; type it in and you're signed in. There is no password.
2. Pick a plan, if you don't have one yet.
3. Choose a project folder. Each folder opens in its own window.

When it opens a folder, Playdo:

• checks Claude Code with claude auth status (no model call),
• creates .playdo/ and a DESIGN.md in the folder,
• shows the canvas.

1. Type what you want in the prompt bar, for example a pricing page for a dev tool.
2. Pick 1 to 4 variants, and a size: Desktop (1440), Tablet (834), Mobile (390) or Slide (1920×1080).
3. Press Enter.

Each variant is its own Claude Code run. Ask for more than one and each takes its own direction, so they come back different:

1. Conventional

The layout a top product team would ship today, done perfectly.

2. New structure

The same job with the layout and hierarchy rethought.

3. New voice

A different tone and personality inside the same design system.

4. Ambitious

A bolder composition with one moment you remember.

Runs take one to three minutes. Each frame shows its progress, and you can stop or retry any one.

Change a finished design

Select it by clicking its name and describe the change. The result is a new branch below it; the original stays.

Move around

Pan

Scroll, or Space + drag

Zoom

Pinch, or ⌘Command + scroll

Zoom in / out

+ / −

Zoom to 100% / fit all

Shift 0 / Shift 1

Frames

Select a frame

Click its name

Add to selection

Shift click

Select several frames

Drag a box on the canvas

Select all

⌘Command A

Rename a frame

Double-click its name

Move a frame

Drag its name

Duplicate a frame

⌘Command D

Delete

Delete

Frame and canvas actions

Right-click

Undo / redo anything

⌘Command Z / ⌘Command Shift Z

Editing

Edit mode

E

Move / resize an element

Drag it / drag a handle

Measure distances

Hold Alt

Group in a box

⌘Command G

Select more, then align

Shift click

Rectangle / ellipse / text / pen

R / O / T / P (in edit mode)

Edit a drawing's points

Double-click it

Anywhere

Prototype and present

P, then ←Left arrow →Right arrow

Focus the prompt

/

Every command, frame and page by name

⌘Command K

All shortcuts

?

A frame has one of four sizes. Pick it in the prompt bar, or with a flag on the command line.

Desktop

1440 wide. The default.

Tablet

834 wide. --tablet

Mobile

390 wide. --mobile

Slide

A 16:9 canvas, exactly 1920×1080. --slide

A flow of slides is a deck: press P and slides fill the screen, with the arrow keys to step.

Pick the model in the prompt bar. Runs use your own plans.

Sonnet

The default, through Claude Code.

Opus, Haiku

Through Claude Code.

Codex

When it's installed and signed in.

Compare models sends the same prompt to several models and lays the results side by side, each labeled with its model.

DESIGN.md at your project root steers every design: colors, type, spacing, components and rules, ending in a Tailwind token block.

Twelve styles

Product UI

Porcelain, Obsidian, Instrument

Launches and brands

Headliner, Aurora, Atelier

Print and type

Broadsheet, Zurich, Riso

Playful, warm work

Meadow, Terracotta, Punch

Pick one in the prompt bar's style menu.

From a reference

Choose From a reference in the style menu to have Claude write a DESIGN.md from a website or a moodboard.

Make it yours

• Edit the file freely.
• If you switch styles later, your edited version is backed up to .playdo/backups/ first.
• Branches keep the style they were made with.

Images

Paste, drop or attach images with the + in the prompt bar: screenshots to follow, or a logo or photo to place in the design.

Websites

Attach a website and Playdo opens it in your own browser, screenshots it and measures its fonts, colors and corners, so Claude works from real values.

Attached files live in .playdo/designs/assets/ and go with exports.

A webpage as an editable frame

Webpage as an editable frame, in the same menu, puts a page on the canvas as the browser rendered it, with its scripts removed.

• Edit it, restyle it, or branch it into a redesign.
• Your own app running on localhost works too.

Type a web address in your prompt and Playdo offers both with one click: use it as a reference, or import it as an editable frame.

Three ways in:

• Drop a .fig on the canvas (in Figma: File → Save local copy).
• Pick the file from the + menu.
• Select frames in Figma, press ⌘CommandC and paste in Playdo.

Pick the screens; each becomes an editable frame:

• auto layout as flex,
• text with its fonts and mixed styles,
• images, and vectors as SVG,
• gradients, shadows and masks.

Every Figma component becomes a Playdo component with its text and images as properties, so push-to-all works on it.

1. Select a finished frame.
2. Switch the prompt bar to New screen like it.
3. Describe another page of the same product.

The new screen reuses that design's tokens, header, components and voice. Mobile version is one click.

Generate a flow

Switch the prompt bar to Flow and describe a journey, for example onboarding for a habit tracker, 4 screens. Playdo plans 2 to 6 screens, then designs them in parallel with a shared header, linked left to right.

Click through it

Press P to click through it full screen.

• Links move between screens.
• Back goes back.
• Esc returns to the canvas.

Link your own

Link any element to any frame in edit mode to build your own. With frames that aren't linked, the arrow keys step through every frame, for presenting.

Press E and every finished design becomes editable. Click an element to select it.

• The inspector shows its real styles: layout, size, spacing, type, fill, border, effects.
• The layers panel shows where it sits.

Change a value

• Type it, use the arrow keys, or drag its label.
• Colors offer the design's own theme tokens.
• Double-click text, or press Enter, to rewrite it in place.
• The Theme tab edits the design's tokens, so one change restyles the whole page.

Hand edits are saved as inline styles in the HTML file.

Color and type

• Every color field opens an OKLCH picker. A pick is written as oklch(); a color you type is kept as you typed it.
• A chip marks a color outside sRGB (P3, or beyond P3) and offers Fit to sRGB.
• Type has the variable font axes (weight, width, slant, optical size and a font's own axes) and OpenType features.
• A control the font doesn't support is dimmed and says why.

Keys

Duplicate the element

⌘CommandD

Remove it

Delete

Move it

Alt ↑Up arrow ↓Down arrow

Select its parent

Shift Enter

Group the selection in a box

⌘CommandG

Measure the distance to another element

Hold Alt over it

Move and resize

• Drag the selected element to move it among its siblings. An insertion line shows where it lands.
• Drag a handle to resize it. Edges snap to its siblings and its parent, with pink guides, and Shift keeps the proportions.

Also in edit mode

• Hide any layer with its eye.
• Give a fill a gradient.
• Replace or re-crop an image.
• Under Prototype, pick which frame a click on the element opens.

Change it with a prompt

With an element selected, describe a change in the prompt bar and Claude rewrites only that element, in place, in a few seconds.

Add after it has Claude draw a new element (an icon, an illustration, a block) right after the selection.

Versions

Every hand edit and every AI change is a version. Undo and redo with ⌘CommandZ and ⌘Command Shift Z, or restore any version from the History tab. Nothing is overwritten.

Draw

In edit mode, a key picks the tool:

Rectangle

R

Ellipse

O

Text

T

Pen path

P. Click for corners, drag for curves, click the first point to close, Enter to finish.

Double-click any drawing or SVG icon to drag its points and handles.

Arrange

• Shift-click several layers to align or distribute them. Playdo uses the layout's own alignment where it can.
• Group them.
• Combine shapes: union, subtract, intersect, exclude, or mask the layers below with the top shape.
• Any box can be fixed, hug its content, or fill its container.

Fills and shaders

• The Fill section has mesh gradients (four soft color fields from your tokens; Shuffle rearranges them) and film grain.
• The Shader section gives any box a live WebGL background in your colors: aurora, mesh, waves, plasma, grain, halftone, dither, chrome, rays, blobs or lines.

Images

For a selected image:

Remove background

Cuts out the subject of any photo with a small model that runs on your machine (downloaded once, 19 MB, after you agree).

Remove plain color

Gives crisp edges on logos.

Vectorize

Traces an image into SVG shapes.

Make a component

Select a card, a button or a nav and choose Create component. Its text, images and links become properties (title, price, image, action…).

Use it

• The Components tab, next to Layers, previews every component in its own style and inserts a copy into any design.
• A copy's properties are editable in the inspector.

Change every copy

Change a copy's styles and choose Push to all copies: every copy in every design is rebuilt from it and keeps its own text and images. Reset and Detach are there too.

Components live in .playdo/library/.

Design system

• The Design system button in the toolbar edits DESIGN.md's tokens (colors, fonts, radius). With Apply to every design on, each design changes with you.
• Build the style guide page adds a frame with your colors, type scale, radius and components, rebuilt whenever you ask.

The Code tab

The inspector's Code tab shows the selected element, or the whole page, as React or HTML. Edit the HTML and apply it to change the design in place.

A React project

Export → React project downloads a Vite, React and Tailwind project:

• each page is a component,
• each Playdo component is a typed React component with a prop per property,
• a flow exports with its links working.

Unzip it, then:

$ npm i$ npm run dev

Select a frame and press Check (or right-click it → Check design). Playdo opens the design in a browser on your machine, measures it and lists what a reviewer would send back. No model runs, so it takes a few seconds and costs nothing.

Low contrast

Text under 4.5:1 against what is behind it, or 3:1 for large text.

Tap targets

A control under 24 by 24px with another control right beside it (WCAG 2.5.8).

Names

A button, link or field with no name a screen reader can say, and an image with no alt text.

Overflow

Anything that runs past the frame's right edge, so the page scrolls sideways.

Small text

Text under 11px.

Dead links

A prototype link to a frame that is gone.

Language

A page that doesn't say what language it is in.

Each finding names its element. Show opens it in edit mode, selected, so the fix is one step away. Problems are things to fix before hand-off; warnings are worth a look.

Coding agents get the same list from playdo_check_design.

Export → Share link publishes a design, or a whole flow with its links working, to a share service, and copies the link.

• Anyone can open it in a browser.
• It lasts 30 days.
• You can update it or stop it from the same dialog.
• Nothing leaves your machine before you press Create link.

Comments

People with the link press Comment and click the design to pin a note. The comments show in the Share dialog, where you resolve them.

Each finished frame has an Export menu.

PNG, JPEG or WEBP

The full page as an image, at 1x, 2x or 3x.

PDF

One page.

HTML zip

The design as plain HTML and CSS that opens offline with no JavaScript, plus the editable source, a screenshot and a README. Web fonts load when you're online; offline, system fonts stand in.

React project

A Vite, React and Tailwind project. See Code and React.

Copy HTML

The design's source, to paste anywhere.

Share link

A link anyone can open. See Share links.

Exporting a flow screen exports the whole flow with working links.

1. Click Implement on a frame. Playdo adds its MCP server to your project's .mcp.json (keeping your other servers) and the playdo skill to .claude/skills/.
2. Run the command it gives you in your project, like:
   Terminal

   $ claude "/playdo implement k3j2h4g5f6"

   Copy
3. Claude Code reads the design, its screenshot and your DESIGN.md, learns your app's components and tokens, and rebuilds the screen as a diff you review.

The first time, Claude Code asks you to approve the playdo MCP server.

Your app itself can sit on the canvas, so you change the real thing, in its own code.

1. Start your dev server as usual, then choose Your running app from the composer's + menu and give its address, like http://localhost:3000.
2. Press Pick and click anything in the app. Playdo shows what you picked and the React components it sits in.
3. Say what to change. The first time, Playdo asks before Claude Code may edit files in this folder.
4. Claude Code edits your source and your dev server reloads the frame. Use and Look switch between clicking around your app and moving the canvas.

Claude Code can read, search and edit files for these changes. It can't run commands, and it never touches .git, .claude or .playdo. After a change, Playdo offers to commit it to a new playdo/ branch, push it and open a pull request.

Only apps running on your own machine can be shown.

Playdo's MCP server lets a coding agent (Claude Code, Codex, Cursor) work on the canvas, not only read finished designs.

Add the server

The Implement button adds it to your project's .mcp.json. The server is inside the app, so there is nothing else to install.

With the canvas open, and without

• It joins the canvas open for the folder, so what the agent makes and changes shows there as it happens, with the same version history, undo and trash as your own edits.
• With no canvas open, reading works straight from .playdo/, and anything the agent makes is generated by the MCP server itself until it finishes.

Tools that read

playdo_list_designs

The finished designs on the canvas, newest first, with the page each is on.

playdo_list_pages

The canvas's pages and how many frames each holds.

playdo_get_design

One design for implementation: its details, flow links, DESIGN.md and HTML.

playdo_get_screenshot

A picture of a design: the whole page, or one band of a long page at full size.

playdo_check_design

What a reviewer would flag before it's built: contrast, small tap targets, missing names and alt text, overflow and dead links.

playdo_get_outline

A design's elements as a tree, each with the path and tag the edit tools take.

playdo_get_status

Where frames stand: generating, done, failed or stopped. Waits up to 45 seconds for runs to finish.

These seven only read, and the skill allows them up front.

Tools that make and change

playdo_generate_design

1 to 4 variants from a prompt, at any size, on any page, with references by URL or file path.

playdo_generate_flow

A connected flow of 2 to 6 screens, planned and then designed in parallel.

playdo_branch_design

A new version of a whole design with a change applied. The original stays.

playdo_generate_screen_like

A different screen, or another size, in a finished frame's exact look.

playdo_change_element

Claude redesigns one element in place, or adds a new one after it. One undo step.

playdo_edit_elements

Exact edits with no model run: text, inline styles, classes and other attributes, new HTML, remove. Up to 20 as one undo step.

playdo_undo_edit

Steps a design back one version.

playdo_rename_frame

Gives a frame a name on the canvas.

playdo_duplicate_frame

Copies a finished design into a new frame.

playdo_delete_frames

Takes frames off the canvas. Their designs move to .playdo/trash.

playdo_restore_frames

Puts back the last delete the agent made.

• Your agent asks you before each one, unless you've allowed it.
• Generating runs on your own plan.
• A generate tool returns the new frame ids at once, since a design takes a few minutes; the agent follows them with playdo_get_status.

The playdo skill teaches an agent to design before it builds:

• write a DESIGN.md from your codebase,
• generate directions,
• branch,
• then implement the one you pick.

It follows the open Agent Skills format, so it works in Claude Code and other agents that read skills.

The Implement button installs it into your project.

Playdo needs an account. You sign in with a six-digit code sent to your email, so there is no password to keep.

Solo

The whole app, for one person.

Team

The same app, plus a workspace with roles that keeps one project in sync on everyone's Mac.

A plan pays for the app. The designing runs on your own Claude Code or Codex plan, and counts against it. Prices come out at launch; early access is open now.

What Playdo writes

Everything is in your project folder. Commit it if you like.

DESIGN.md

At the project root. The style every design follows.

.playdo/designs/

One HTML file per frame.

.playdo/designs/assets/

Attached images.

.playdo/canvas.json

The pages, layout and history.

.playdo/library/

Components.

.playdo/trash/

Deleted frames.

.playdo/backups/

An edited DESIGN.md that a style switch replaced.

.playdo/.gitignore

Keeps local-only files out of git: screenshots, trash, backups, version history.

Privacy

• The canvas is served inside the app, on localhost only.
• Designs render in sandboxed frames.
• Playdo has no telemetry. Your account holds your email and your plan, nothing about your designs.
• Captured websites are opened by your own browser on your machine.

The full account is on its own page: What leaves your machine.

Messages you may see

“Claude Code isn't signed in”

Run claude auth login in a terminal, then open the folder again.

“Another Playdo is working in this folder”

One window owns a folder at a time. Use the window that already has it open.

“hit a usage or rate limit”

Your Claude plan's limit was reached. Wait for it to reset, or generate fewer variants.

Export says no browser was found

Screenshots, exports and the check use a browser on your Mac. Install Google Chrome.

A sign-in code doesn't work

A code lasts ten minutes and takes five tries. Ask for a new one.