wonderblok
Get early access

A design canvas your agent can drive.

Wonderblok gives product designers a canvas with auto layout, components with variants, tokens with light and dark modes and playable prototypes, and an MCP connection so an AI agent can draw, rename and tidy layers while the designer art-directs and reviews every change.

Get early accessSee pricing
Auto layoutComponents and variantsTokens and modesChange history

WHO THIS IS FOR

Sound familiar?

Most of a product designer's day is not the idea. It is the third variant of the same card, the renaming pass before handoff, the dark mode that must follow the light one. That is repetitive work with clear rules, exactly what an agent does well if it has access to your system.

In Wonderblok the system is the file: tokens, components and written guidelines the agent must read. You decide, the agent executes, and a change history shows you what it did.

  • Repetitive production work

    Variants, states and renaming eat the time meant for decisions.

  • Agents that ignore your system

    A general-purpose agent invents styles. Your system has to be part of its context.

  • Handoff drift

    Names in the design and names in the code slowly diverge.

AN EXAMPLE WEEK

A design system week where the agent does the production

A scenario, not a customer story: what a week can look like when your agent works on the canvas with you.

  1. Monday

    The system gets written down

    You open the file and set the foundations: color, type and spacing as tokens, each with a light and a dark value. You write ten lines of guidelines about when to use which button. You connect Claude Code and ask it to read the guidelines back to you. If it gets one wrong, you fix the sentence, not the agent.

  2. Tuesday

    Variants without the grind

    The Order card needs loading, empty, error and selected states, in two sizes. You ask for them, using existing tokens only. You spend your time on the one state that is hard, the error, and approve the rest after a quick look at each.

  3. Wednesday

    A new feature, built from the system

    Product wants a reorder flow. You describe it, the agent assembles four frames from your components, and you art-direct: tighter spacing here, a different hierarchy there. Nothing new is invented, because the agent must use what is in the file.

  4. Thursday

    Dark mode follows

    You ask for the flow in dark mode. The frames take the dark values of your tokens, and the agent lists two places where a hard-coded color slipped in. You replace them with tokens and the list comes back empty.

  5. Friday

    Review and handoff

    You open the change history and go through what the agent touched this week, keeping most of it and reverting one edit. Layer names are set to match the code, and the developer's agent reads the same file. After the build, a check compares the running screen with your frame.

  6. Next week

    Present it and collect notes

    You link the frames into a prototype and send the link to the product manager. Her feedback lands as notes on the layers it is about. The agent applies them, tells you what it changed, and you review the result before anyone else sees it.

BEFORE AND AFTER

What changes once your agent has a canvas.

WITHOUT A DESIGN FILE

  • Variants and states are the longest part of the day, and the least interesting.
  • A general-purpose agent invents its own colors and spacing because your system is not in its context.
  • Dark mode is a second set of screens that has to be kept in sync by hand.
  • Layer names in the design and names in the code slowly drift apart.
  • You cannot tell what an agent changed until you compare files by eye.

WITH WONDERBLOK

  • You describe a state in one sentence and review it, instead of drawing every one.
  • The agent works from your tokens, components and written rules, and must read them before it edits.
  • Dark mode is a value per token, so frames follow without a redraw.
  • Names are set once to match the code, and a build check shows where the result differs.
  • A change history shows what changed since you last looked, and you can revert any of it.

HOW IT WORKS

Product designers: the workflow, step by step.

Each step shows what you ask for, what you get, and the features behind it.

  1. 01

    Connect your agent

    Wonderblok sets up the MCP connection for Claude Code, Codex and Claude Desktop. The agent can then list your files, read the layer tree and edit frames, text, components and tokens. The file stays on your device.

    MCPLocal files

    You get: Your agent can see and change the design file.

  2. 02

    Write the system down as guidelines

    Put your design decisions in the file's guidelines: which button for which action, how much space between a label and a field, what an error looks like. The agent must read the current version before it may edit, and when you change the text it has to read it again.

    GuidelinesRead-before-edit

    YOU SAY

    Read the design guidelines and summarize them in five lines. Then tell me which rule is least clear.

    You get: A rulebook the agent follows, and a first check that it understood.

  3. 03

    Set tokens with light and dark modes

    Color, type and spacing become tokens. A token can carry a value per mode, so one name covers light and dark. Every layer that uses the token follows when you change it.

    Tokens and modesLint

    YOU SAY

    Create color tokens for background, surface, text and accent with light and dark values from this palette, then list every layer in the Profile frame that uses a raw color instead.

    You get: A token set with two modes, and a list of places that bypass it.

  4. 04

    Build components with variants

    Draw a component once with auto layout, then add variants for states and sizes. The agent can create the variants, and every instance across the file stays linked to the component.

    Frames and auto layoutComponents and variants

    YOU SAY

    Add loading, empty and error variants to the Order card component, using existing tokens only. Keep auto layout and the current padding.

    You get: A component with its states, ready to reuse.

  5. 05

    Art-direct screens built from the system

    Describe a screen or a flow and let the agent assemble it from your components. You review on the canvas and steer with plain language. When you want a starting structure for a familiar flow, Universe patterns give the agent proven layouts to adapt to your system.

    ComponentsUniverse (Pro)Auto layout

    YOU SAY

    Build the reorder flow as four frames at 390 by 844 from existing components. Use the empty-state pattern from Universe for the case with no past orders.

    You get: Screens that look like your product, not like the agent's guess.

  6. 06

    Review layer by layer

    Leave a note on any layer and the agent reads it, acts on it, reports what it changed and marks it done. The change history shows everything that changed since you last looked, and you can revert what you do not want.

    NotesChange historyRevert

    YOU SAY

    Apply my notes on the Reorder frame and tell me exactly what you changed, layer by layer.

    You get: Feedback goes to the layer it is about, and you keep control of the outcome.

  7. 07

    Hand off with names that match

    Set code names on components and tokens so the design and the code speak the same language. Share the prototype as a link for review. After the developer builds, build checks compare the running app with your frames and list the differences.

    Code namesBuild checksPrototype

    YOU SAY

    Rename every layer in the Reorder flow to the component and token names in the guidelines, then set the code names for the Order card variants.

    You get: A handoff where names match and drift is visible.

USE CASES

Six jobs you can hand to your agent this week.

  • Variants and states

    A component is only finished when its loading, empty, error, disabled and selected states exist. Drawing them is the least creative part of the job.

    PROMPT Add disabled, loading and error variants to the Primary button and the Text field components, using existing tokens only, and list what you added.

    Result: Variants on the components themselves, plus a list you can check against your spec.

    Components and variantsTokens

  • The renaming pass

    Before handoff, layers are called Frame 214 and Group 9. Cleaning them is dull and easy to get wrong.

    PROMPT Rename every layer in the Profile frame using the naming rules in the guidelines. List any layer you were unsure about instead of guessing.

    Result: Clean names, and a short list of the layers that need your decision.

    GuidelinesCode namesChange history

  • Dark mode for an existing screen

    A screen shipped in light mode and dark mode is now on the roadmap.

    PROMPT Create a dark version of the Settings screen from the dark values of my tokens, and report any layer that has a hard-coded color.

    Result: A dark screen from the same tokens, and a list of the colors that were not tokens yet.

    Tokens and modesLint

  • A drift audit

    After months of edits by several hands, the file has colors and spacing values that are close to the system but not in it.

    PROMPT List every color and spacing value used in the Checkout frames that is not a token. For each, propose the nearest token and wait for my approval.

    Result: A review list instead of a silent rewrite. You approve, then the agent replaces.

    TokensLintChange history

  • A flow from a proven pattern

    You need a sign-in or onboarding flow and want a good starting structure rather than a blank frame.

    PROMPT Add the phone number sign-in pattern from Universe, restyle it with my tokens and components, and add a wrong-code state.

    Result: A proven structure in your system, ready for your own decisions.

    Universe (Pro)ComponentsTokens

  • Bring in what you already have

    You are not starting from zero. There are Pen and Figma files, or a live web page, that you want to work on with an agent.

    PROMPT After the import, list everything that did not have an equivalent in Wonderblok, then map the imported colors to my tokens.

    Result: Your existing work on the canvas, with the gaps listed instead of hidden.

    ImportTokensMCP

WHAT TO LOOK AT

The features that matter most to you.

  • MCP connection

    Your agent works on the file directly, so it uses your system instead of guessing one.

  • Guidelines the agent must read

    Your rules are applied without repeating them, and old rules cannot be used by accident.

  • Frames with auto layout

    Screens resize and reflow like the real thing, which makes a design a believable promise of the build.

  • Components with variants

    States and sizes live on the component, and every instance stays linked.

  • Tokens with light and dark modes

    A brand change or a dark mode is a value change, not a redraw.

  • Change history and revert

    An agent that edits fast stays safe because you can see and undo what it did.

  • Notes on layers

    Feedback sits on the thing it is about, and the agent acts on it.

  • Playable prototypes and share links

    Reviewers click through a flow instead of reading a description of it.

  • Code names and build checks

    The design and the code share names, and differences show up after the build.

  • Import of Pen and Figma files and web pages

    You can bring existing work in and see what had no equivalent, rather than start over.

QUESTIONS

Straight answers.

Is Wonderblok a Figma alternative?

It covers the core of product design: frames with auto layout, components with variants, tokens with modes and prototypes. What sets it apart is that an AI agent can work on the file over MCP, and files stay local on your device. It is not a team-collaboration suite yet.

Can an AI agent follow my design system?

Yes. Tokens, components and written guidelines are part of the file, and the agent must read the current guidelines before it can edit.

Does it support dark mode?

Yes. Tokens can carry a value per mode, and a frame can be drawn in a mode.

Can I import existing designs?

Wonderblok can import Pen and Figma files, and it can bring in web pages as frames. Anything without an equivalent is listed after the import.

Can a design team work in this together?

Not in real time. Team is coming soon. Today a file lives on one person's device, and you share work as exports and prototype links. If your daily work is several designers in one file at once, that is a real limit.

Will the Free plan be enough?

Free includes 100 MCP calls a week, which is enough to build a small component set or try the workflow on a flow. Heavy agent work, such as variants across a whole library, will use more. Pro raises the limit to 10 million calls a month.

Does the agent replace the designer?

No. It takes the production work: variants, states, renaming, dark mode. You decide what the system is, what good looks like and what ships. The guidelines are where your taste becomes something the agent can follow.

HONEST LIMITS

What to know before you start.

  • Wonderblok runs on macOS today. Windows, Linux and Android and iOS tablets are coming soon.
  • Real-time collaboration with other people is not built yet; Team is coming soon.

ALSO FOR

More in Build a product and every other group on the Solutions page.

Try it on one real job.

Download for macOS and start on Free. Windows, Linux and tablets are coming soon. No card needed.

Get early accessSee pricing