Wonder

认领

Wonder 是一款原生 AI 设计工具，支持团队在可视化画布上生成和编辑设计，并导出或同步到代码。支持基于 MCP 的 coding agents 连接，提供 Free 计划和付费方案。

AI设计生成器 AI设计助手 AI建站工具

访问网站

连接到代码的 AI 设计画布

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

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

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

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

核心能力

AI 辅助的画布设计

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

聊天驱动的迭代

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

与代码对齐的输出

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

导出到生产工作流

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

基于 MCP 的代理连接

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

可视化资产生成

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

实用工作流

从零设计产品 UI
生成新的布局，在画布上进行编辑，并让工作与最终将要发布的代码保持一致。
迭代现有界面
在同一工作上下文中调整间距、样式、文案、图片选择和变体。
设计到代码协作
将 Wonder 连接到 coding agent，以便 agent 在您在设计与实现之间切换时读取或更新画布。
制作视觉资产
当项目需要比占位图更丰富的素材时，直接在设计流程中创建图片和基于 shader 的视觉效果。
在采用前评估工具
使用 Free 计划探索工作流，然后如果团队需要更多积分或额外的 MCP 工具调用，再升级到付费方案。

Pros and Cons

Pros

支持在一个画布中生成、编辑和迭代设计。
让设计与真实代码保持一致，包括 React + Tailwind 导出。
通过 MCP 连接 coding agents，实现画布与代码之间的双向工作流。
提供 Free 计划供用户上手，并为更高使用量提供清晰的付费方案。
同时提供可视化设计工具和资产生成功能，例如图片和 shader。

Cons

定价页面显示按积分计费的使用限制，因此高频工作会受方案容量影响。
MCP 设置说明会因客户端而异，如果没有可用插件，某些集成需要手动配置。
源材料没有明确说明高级企业控制或合规功能。

FAQ

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 会自动刷新。

Quick Facts

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