SkribbleOpen app

The design canvas
for teams and agents

Real HTML and CSS on an infinite canvas. Built for designers, developers and the agents working beside them.

Skribble designing skribble.design: this website’s hero, editable on the canvas with its layers and layout controls

Made in Skribble. Including this website.

Works with the agents you already use, over MCP

A canvas made of the web itself. Every frame in Skribble is a real DOM node with real CSS: flex layout, tokens, gradients and shaders. What you draw is what ships, and every agent can read it.

Design on
the real thing

Lay out screens with flex and auto layout, theme them with tokens, and drop in shaders, video and rich text. Components, variants and an organization asset library keep everyone on the same system.Lay out screens with flex and auto layout, theme them with tokens, and drop in shaders, video and rich text.Flex layout, tokens, shaders, components and an organization asset library.

The skribble.design marketing page in Skribble, with the hero’s flex layout selected

Flex and grid layout

Real flexbox and CSS grid, edited from the panel.

Design tokens and themes

Hundreds of tokens across light and dark themes.

Components

Turn any layer into a component and reuse it everywhere.

Agents as
collaborators

Connect any MCP client with OAuth or an API key. Agents read your designs, build screens section by section, and show up with their own name and history, with checkpoints before every merge.Connect any MCP client with OAuth or an API key. Agents build alongside you with their own name and history.Connect any MCP client. Agents build alongside you with their own name and history.

An Amp comment resolved on the hero of the skribble.design marketing page

Every agent edit, tracked

Each change an agent makes shows up in history with its name.

Connect over MCP

Claude, ChatGPT, Cursor and more sign in with OAuth or an API key.

Checkpoints you can restore

Save a named point before big changes, by hand or by agent.

Branch, review
and merge

Explore on a branch without touching main. Compare it, merge what works and archive the rest. Files you label Reference guide your agents, and they only change them through a reviewed branch.Explore on a branch without touching main, compare it, and merge what works.Explore on a branch, compare it and merge what works.

The branch switcher open on the skribble.design marketing file

Review before merging

See every changed artboard before it reaches main.

Manage branches

Every open branch of a file in one place.

Export
anything

Render any frame to PNG, JPG, WebP, SVG or PDF, record animations to MP4 and WebM, or package a selection as HTML, React or Tailwind code with its tokens.Render to PNG, SVG, PDF, MP4 and WebM, or package a selection as HTML, React or Tailwind code.PNG, SVG, PDF, MP4 or HTML, React and Tailwind code.

Export formats for the hero of the skribble.design marketing page

Copy as code

PNG, Tailwind, React CSS or HTML, straight to your clipboard.

Share links

Let anyone view and comment, with optional passwords and expiry.

Export presets

Save sizes and formats per frame and export them in one click.

Sketch it.
Ship it.

Open Skribble