wonderblok
Get early access

Design and architect your app with your agent.

Wonderblok is a design canvas your coding agent works on. A solo founder connects Claude Code or Codex over MCP, describes the app, and gets flows, screens and components on a canvas, built on Universe patterns for onboarding, sign in and checkout. The design names match your code, so the build starts from the design.

Get early accessSee pricing
MCPUniversePrototypeCode names

WHO THIS IS FOR

Sound familiar?

You are the founder, the product manager, the designer and the engineer. The idea is clear in your head and the agent can write the code, but between the two sits a gap: what does the app actually look like, screen by screen, state by state? Today that gap is filled with guesses, and the guesses cost you rebuilds.

Wonderblok closes the gap. Your agent reads your design file over MCP, drafts the flows and the screens, and puts them on a canvas you can see and change. You review instead of draw. When a screen is right, its components and tokens carry the same names as in your code.

  • The agent builds before anything is decided

    Without a design, a coding agent picks layouts and flows on its own. You find out after the code exists.

  • Screens without states

    Empty, loading and error states are the first thing a solo build skips and the first thing users meet.

  • Design tools built for teams

    A full design suite is slow to learn and slow to feed to an agent. You need something your agent can drive.

AN EXAMPLE WEEK

From a one-line idea to a first build, in a week

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

  1. Monday

    The idea gets a shape

    You have one sentence: a subscription app for specialty coffee. You connect Claude Code, write five lines of rules into the file, and ask for the flows. By lunch there are four flows on the canvas: sign up, pick a roast, pay, manage the subscription. You delete one and rename two.

  2. Tuesday

    Flows become screens

    You ask for the screens of the first flow, with empty, loading and error states. The agent pulls sign in and paywall patterns from Universe and puts your name and colors on them. You spend the afternoon reading screens the way a user would, and leave notes on the three that feel wrong.

  3. Wednesday

    You play it

    You link the frames and play the prototype in the app. The checkout needs one step fewer. The agent applies your notes, tells you what it changed, and you keep or revert each change. You send the prototype link to two friends and take their comments back to the canvas.

  4. Thursday

    It becomes a system

    The colors, type and spacing the agent used become tokens. The cards and buttons become components with variants. You ask for a dark mode and get it from the dark values of your tokens, not from a second set of screens.

  5. Friday

    The build starts from the design

    Component and token names are set to match your code. You point your coding agent at the design file and it builds the first flow. When the app runs, a build check compares it with the frames and lists where they differ.

  6. Next week

    Launch assets from the same screens

    The launch kit draws store screenshots from your real screens, with short captions. When you change a screen, the screenshot follows. You did not open a second tool.

BEFORE AND AFTER

What changes once your agent has a canvas.

WITHOUT A DESIGN FILE

  • The agent decides how the app looks while it writes the code, and you find out after.
  • Empty, loading and error states are skipped because nobody drew them.
  • Ten screens in, there are three kinds of buttons and five grays.
  • Design lives in a tool your agent cannot read, so every decision is retyped into a prompt.
  • Store screenshots are a last-minute scramble from whatever the build shows that day.

WITH WONDERBLOK

  • The agent draws the screens first, on your canvas, and you review before any code exists.
  • Every flow has its states, because asking for them takes one sentence.
  • Tokens and components keep the app consistent, and the agent must use them.
  • Your rules live in the file. Edits pause until the agent has read the current version.
  • Store screenshots come from the same frames as the app and stay current.

HOW IT WORKS

Solo founders: 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. From then on the agent can list your files, read the tree, and edit frames, text, components and tokens. Everything stays in one .wonderblok file on your device.

    MCPLocal files

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

  2. 02

    Write your rules once

    Put the decisions you would otherwise repeat in every prompt into the file's guidelines: the tone of the product, the spacing you like, which component to use for what. The agent must read the current version before it may edit, and when you change the rules it has to read them again.

    GuidelinesRead-before-edit

    YOU SAY

    Read the design guidelines. Then tell me which of my rules your last three edits broke, if any.

    You get: A short rulebook the agent follows without being reminded.

  3. 03

    Draw the flows, then the screens

    Ask for flows before screens: it is cheaper to delete a box than a screen. Then ask for the screens of one flow at a time, including the states people forget. You review each frame on the canvas.

    Frames and auto layoutStates

    YOU SAY

    Draw the sign-up flow for the coffee subscription app as five frames at 390 by 844: welcome, email, verify, pick a roast, done. Add an error state for a wrong code.

    You get: Linked frames with states, not a single happy path.

  4. 04

    Start from patterns that already work

    Universe holds real patterns for onboarding, sign in, paywalls, empty states and more, drawn from shipped apps as editable frames. Your agent adds the closest one to your file and maps it to your tokens, so you begin from something proven and make it yours.

    Universe (Pro)Tokens

    YOU SAY

    Add the permission priming pattern from Universe for notifications, and restyle it with my tokens and my copy.

    You get: A proven structure in your brand, not a blank page.

  5. 05

    Play it, then leave notes

    Link frames and play the prototype in the app, or share it as a link. Where something feels wrong, leave a note on the layer. The agent reads notes, acts on them, reports what it changed and marks them done.

    PrototypeNotesChange history

    YOU SAY

    Apply my notes on the Checkout frame and tell me exactly what you changed.

    You get: Feedback goes to the layer it is about, and you review the result.

  6. 06

    Turn it into a system

    Colors, type and spacing become tokens with light and dark modes. Repeated pieces become components with variants. New screens then reuse them, so the style stays in one place and a change reaches every screen.

    Tokens and modesComponents and variants

    YOU SAY

    List every color and spacing value in the Checkout frame that is not a token, and replace each with the nearest token.

    You get: A design system that grew out of real screens.

  7. 07

    Hand off to code, and check the build

    Component and token names are set to match your code. Your coding agent builds from the design file, not from a screenshot. When the app runs, build checks compare it with the frames and report differences.

    Code namesBuild checks

    YOU SAY

    Set the code names for the Checkout components to my React component names, then build the screen from the frame.

    You get: The build starts from the design, and drift is visible.

USE CASES

Six jobs you can hand to your agent this week.

  • Onboarding and first run

    Most users decide in the first minute. You have no research budget and no designer.

    PROMPT Design onboarding for a coffee subscription app: welcome, permission priming for notifications, pick a roast, and the first empty home screen. Use Universe patterns.

    Result: Four linked frames you can play, built on patterns from shipped apps.

    UniversePrototype

  • Paywall and checkout

    Money screens are where a rough design costs real revenue, and where you have the least time.

    PROMPT Draw a paywall with monthly and yearly plans, a promo code state, a failed payment state and a receipt. Use my tokens.

    Result: Every state of the payment flow, including the ones that go wrong.

    UniverseStatesTokens

  • Every state, not just the happy path

    The first user to hit an empty list or a lost connection decides what your product feels like.

    PROMPT For each frame in the Orders flow, add empty, loading and error variants, and list what you added.

    Result: A coverage list you can check, and the frames to match.

    Components and variantsChange history

  • Settings, account and dark mode

    Settings is a dozen small screens nobody wants to draw. Dark mode doubles them.

    PROMPT Draw settings, profile and notification preferences using existing components, then give every screen a dark mode from my tokens.

    Result: A full settings area in light and dark, from one set of tokens.

    ComponentsTokens and modes

  • The marketing page for your app

    You need a landing page for the launch, in the same brand as the app.

    PROMPT Draw a landing page at 1440 and 390: hero, three features with screens from the app, pricing and a footer, using my tokens.

    Result: A landing page that reuses your real screens and brand.

    FramesTokensExport

  • When the idea pivots

    Two weeks in, the audience changes and the whole product needs a different tone and palette.

    PROMPT Change the primary color and the heading typeface tokens to the new brand and list any frame where contrast now fails.

    Result: One change in tokens reaches every screen, and problems are listed for you.

    TokensLint

WHAT TO LOOK AT

The features that matter most to you.

  • MCP connection

    Your coding agent works on the design directly. You stop copying decisions between tools.

  • Guidelines the agent must read

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

  • Universe patterns

    You begin from structures proven in shipped apps. Part of Pro.

  • Frames with auto layout

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

  • Components and variants

    Draw a button once. States and sizes follow.

  • Tokens with light and dark modes

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

  • Playable prototypes

    You feel the flow before you build it, and friends can click it from a link.

  • Notes, change history and revert

    You stay in control of an agent that edits fast.

  • Code names and build checks

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

  • Launch kit

    Store screenshots come from your real screens and stay current.

QUESTIONS

Straight answers.

Can I design an app with Claude Code?

Yes. Connect Claude Code to Wonderblok over MCP and it can read your design file, add frames, components and tokens, and edit them. It must read your design guidelines before it edits.

Do I need design experience?

No. Universe supplies patterns that already work, and your agent draws on them. You review, change what you do not like and keep going.

Does the design turn into code?

It does not generate your app on its own. The design carries the same names for components and tokens as your code, so your agent builds from it, and build checks compare the running app with the design.

Does it need an internet connection or an account?

Wonderblok runs on your device and files stay local. Free works without an account. Universe and higher MCP limits come with a Pro account.

Will the Free plan be enough for a solo founder?

Free includes 100 MCP calls a week, which is enough to try the workflow on a flow or two. A full app design with an agent will use more, which is what Pro and its much higher limit are for.

Does this replace a designer?

It replaces the blank page and the repetitive production. You still make the decisions about taste, and a designer can still be worth hiring for a brand or a hard product problem.

Does it work with React Native, Flutter or SwiftUI?

Frames are not tied to a framework. You set component names to match your code, and your coding agent builds from the design file in whatever stack you use.

HONEST LIMITS

What to know before you start.

  • Wonderblok runs on macOS today. Windows, Linux and Android and iOS tablets are coming soon.
  • Universe patterns are part of Pro; the canvas and MCP are free within the Free plan's limits.

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