wonderblok
Get early access

Early access · macOS

Design with AI, for
solo founders, vibe coders, app developers, product designers, logo designers, freelancers, business owners, marketing teams, event planners.

Wonderblok is the design canvas your coding agent works on. It starts from proven patterns, draws pixel-perfect screens on your design system, and takes your comments right on the canvas.

Get early access Watch the loop
Wonderblok editor with Claude Code drafting the Kopi Senja onboarding screens and asking what to show after a location denial

WORKS WITH YOUR AGENT

  • Claude Code
  • Codex
  • Claude Desktop
  • .fig import
  • .pen import

  • Files stay on your device

    One .wonderblok file you own.

  • Sync never discards work

    Per-property merge keeps both sides.

  • Agents read your rules first

    No edit lands before the guidelines.

  • Built on your tokens

    Off-system values get reported.

WHAT YOU CAN MAKE

Pick what you are making. Your agent takes it from there.

Browse by kind of work, or describe yours. Every start opens on your design system.

Try “banking app onboarding”, “pricing page” or “logo for a coffee roaster”

UNIVERSE

Start from a pattern that already works. Then make it yours.

Universe is not a gallery of other people's apps. It is a library of design patterns and user flows built on best practice. Add your brand and the toppings you need, and your agent builds on proven structure instead of guessing.

Pattern

Onboarding / Permission priming

5 screens · iOS and Android

  1. 01Show value before you ask for anything.
  2. 02One permission per screen.
  3. 03Say why before the system prompt.
  4. 04Always offer a way forward after a no.

Your toppings

6 set

Brand identity

Kopi Senja kit

Platform

iOS

Voice

Warm, short

Languages

EN · ID

Every state

empty · loading · error · denied

Accessibility

AA contrast · 44 px targets

Your onboarding, on your brand

Drawn by your agent

4 best practices kept

Denied state added

0 off-system values

PRODUCTIVITY

Up to 100x faster from brief to a flow you can build.

The slow part of app design is not drawing. It is the setup, the linking and the states nobody remembers until handoff. Wonderblok hands those to your agent.

12-screen banking flow, first draft

Example

Drawn by hand

32 hours

Your agent on Wonderblok

20 minutes

96xfaster to a reviewable draft

Illustrative: existing design system, 12 linked screens with empty, loading and error states. Not a benchmark; review time depends on scope.

  • Design system before the first screen

    Your agent sets tokens and components first, and turns anything that repeats into a component.

  • Linked flows, not loose screens

    Every button goes somewhere. Play the flow the moment it is drafted.

  • Checked before handoff

    Missing states, contrast and off-grid spacing are flagged while the agent works, not in review.

AGENTIC DESIGN

Brief, review, apply. The whole loop stays on the canvas.

Your agent drafts in Wonderblok. You mark up the screens the way you would for a designer. Your agent reads every comment and fixes it in place.

  1. 1 · Agent drafts

    From brief to linked screens

    Claude Code or Codex reads your rules, starts from a Universe pattern and draws on your tokens.

    use_pattern · apply_ops · link

  2. 2 · You review

    Pins, circles and comments

    Point at exactly what is wrong. Send all comments to your agent in one click.

    notes · annotations

  3. 3 · Agent applies

    Every comment, fixed in place

    Your agent resolves each note, lints the result and shows you before and after.

    get_notes · apply_ops · ack_note

2

Arya marks up the draft and sends every note to the agent.

Wonderblok with three of Arya's notes on the Kopi Senja onboarding, waiting for the agent
3

Claude Code picks up all four notes and fixes them on the canvas.

Claude Code resolving all four notes and drawing the denied location state

TRUST

Built to be trusted with your product.

An agent that edits your design needs limits you can see. These are on by default.

  • Your files stay on your device

    Everything lives in one .wonderblok file. No hosted workspace is required to design or to run your agent.

  • Sync never discards work

    When you and your agent change the same layer, Wonderblok merges per property and keeps both.

  • Rules before edits

    Agents must read your current guidelines. When the rules change, edits stop until they read them again.

  • Every change is reviewable

    See what changed since you last looked, keep or revert it, and pause the agent at any time.

Bring the app in your head. Your agent brings the screens.

Early access on macOS. Windows, Linux and Android and iOS tablets are coming soon. Works on its own, and with Claude Code or Codex when you are ready.

Get early accessRead the MCP docs