Wonder

Freemium

Wonder 是一款原生 AI 设计工具，可在画布上生成、编辑设计并与代码同步。

什么是 Wonder？

Wonder 是一款原生 AI 设计工具，以单一画布为核心，可同时用于生成布局、进行编辑，并处理代码上下文。该网站将其定位为一种借助 AI 进行设计、与 AI 对话并让结果始终与真实代码保持一致的方式。

该产品强调从设计到生产的直接路径。Wonder 表示设计由代码支撑，可复制为 React + Tailwind，并可通过其 MCP 服务器连接 coding agents，使工作可以在画布与开发者工具之间流转，而无需传统交接。

Wonder 还支持迭代式探索：您可以开始新的设计项目、创建变体、调整布局与间距、编辑文案、替换图片，并在画布上生成资产。MCP 文档将这一工作流扩展到受支持的 agent，例如 Cursor 和 Claude Code。

公司条款将 Wonder 描述为一款基于真实 HTML 和 CSS 创建、编辑并协作处理设计的工具，支持生产就绪代码导出。该产品可在 wonder.design 上使用，并提供 Free 计划以及面向更高使用量的付费方案。

在可视化画布上生成设计，然后在同一工作区内进行精确修改。

通过聊天编辑设计，产品将设计与 AI 交互一起呈现在同一个画布上。

将 Wonder 的设计格式 1:1 映射到代码，使设计可以在不经过单独交接步骤的情况下回到生产流程。

从设计中复制 React + Tailwind，或将结果发送到您的 coding agent 进行进一步开发。

使用 Wonder MCP 服务器，让受支持的 coding agents 双向读取和写入画布内容。

直接在设计流程中生成图片，并使用 shader 创建更丰富的视觉元素。

生成新的布局，在画布上进行编辑，并让工作与最终将要发布的代码保持一致。

在同一工作上下文中调整间距、样式、文案、图片选择和变体。

将 Wonder 连接到 coding agent，以便 agent 在您在设计与实现之间切换时读取或更新画布。

当项目需要比占位图更丰富的素材时，直接在设计流程中创建图片和基于 shader 的视觉效果。

使用 Free 计划探索工作流，然后如果团队需要更多积分或额外的 MCP 工具调用，再升级到付费方案。

Wonder 用于什么？

Wonder 使用可视化画布，您可以在同一界面中生成设计、进行精确编辑，并与代码上下文协同工作。其 MCP 服务器还允许受支持的 coding agents 读取和写入 Wonder 画布内容。

哪些 coding agents 可以连接到 Wonder？

文档说明 Wonder 目前支持 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable 以及自定义 MCP 客户端，其中通过官方插件接入 Cursor、Claude Code 和 Codex 的路径最快。

Wonder 可以生成什么类型的输出？

Wonder 可以导出可直接用于生产的代码，首页还说明您可以从设计中复制 React + Tailwind。条款同样表明用户可以导出生产就绪代码。

Wonder 有免费方案吗？

定价页面显示有 Free 计划以及付费的 Pro、Pro+ 和 Max 计划。Free 标为每月 0 美元，而 Pro 为每月 20 美元，Pro+ 为每月 60 美元，Max 为每月 200 美元。

Wonder 的 MCP 身份验证如何工作？

MCP 文档说明其使用基于 OAuth 的登录，无需管理 API key，授权后 token 会自动刷新。

类别: 设计工具 / 开发者工具
平台: wonder.design 上的 Web 应用
工作流: 在画布上设计，然后导出或同步到代码
集成: 面向 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable 和自定义客户端的 MCP 服务器
定价: Free 计划以及 Pro、Pro+ 和 Max 付费方案
公司: Aquila Labs, Inc. d/b/a Wonder