Wonder (Claude)

Unverified

Create and edit designs with Claude on a canvas where every design is real code.

About Wonder (Claude) MCP Server

Design on a canvas that Claude can read and write to. Generate UI from your code, sync designs and components, and ship faster. Wonder MCP connects Claude directly to your canvas, where it can inspect existing designs, components, variables, and documentation, create new screens and flows, and edit designs in place. Because Wonder is built on real HTML and CSS, Claude works with the actual design structure and styling instead of screenshots. Bring your product context onto the canvas, explore and refine UI, and move approved designs back into production without rebuilding them.

Features

Tools
Getting Started

Open the Claude listing: https://claude.com/marketplace/connectors/wonder. Choose Add to Claude and follow the publisher’s setup instructions. The published connector URL is https://mcp.wonder.so/mcp. Sign-in: Required. Publisher documentation: https://wonder.design/docs. Availability depends on your plan, region, and workspace settings. This integration has not been authenticated or functionally tested here.

Tools (26)
Functions this server exposes to AI clients

close_file

create_artboard

delete_elements

duplicate_elements

execute_action

fetch_image_content

fetch_image_description

find_elements

finish_artboard

finish_session

get_additional_context

get_artboards

get_basic_info

get_design_context

get_design_guidelines

get_element_code

get_element_tree

get_skills

get_wonder_info

list_actions

list_files

open_file

prepare_image_upload

rename_elements

take_screenshot

update_elements

Compatible With
Claude
Claude Code
Claude Desktop