# Wonder Wonder 是一款原生 AI 设计工具，可在画布上生成、编辑设计并与代码同步。 - Findings24: - 网站: - 价格: Freemium - 分类: AI设计助手, AI平面设计 ## 什么是 Wonder？ Wonder 是一款原生 AI 设计工具，以单一画布为核心，可同时用于生成布局、进行编辑，并处理代码上下文。该网站将其定位为一种借助 AI 进行设计、与 AI 对话并让结果始终与真实代码保持一致的方式。 该产品强调从设计到生产的直接路径。Wonder 表示设计由代码支撑，可复制为 React + Tailwind，并可通过其 MCP 服务器连接 coding agents，使工作可以在画布与开发者工具之间流转，而无需传统交接。 Wonder 还支持迭代式探索：您可以开始新的设计项目、创建变体、调整布局与间距、编辑文案、替换图片，并在画布上生成资产。MCP 文档将这一工作流扩展到受支持的 agent，例如 Cursor 和 Claude Code。 公司条款将 Wonder 描述为一款基于真实 HTML 和 CSS 创建、编辑并协作处理设计的工具，支持生产就绪代码导出。该产品可在 wonder.design 上使用，并提供 Free 计划以及面向更高使用量的付费方案。 ## Wonder 能做什么？ ### AI 辅助的画布设计 在可视化画布上生成设计，然后在同一工作区内进行精确修改。 ### 聊天驱动的迭代 通过聊天编辑设计，产品将设计与 AI 交互一起呈现在同一个画布上。 ### 与代码对齐的输出 将 Wonder 的设计格式 1:1 映射到代码，使设计可以在不经过单独交接步骤的情况下回到生产流程。 ### 导出到生产工作流 从设计中复制 React + Tailwind，或将结果发送到您的 coding agent 进行进一步开发。 ### 基于 MCP 的代理连接 使用 Wonder MCP 服务器，让受支持的 coding agents 双向读取和写入画布内容。 ### 可视化资产生成 直接在设计流程中生成图片，并使用 shader 创建更丰富的视觉元素。 ## 使用场景 ### 从零设计产品 UI 生成新的布局，在画布上进行编辑，并让工作与最终将要发布的代码保持一致。 ### 迭代现有界面 在同一工作上下文中调整间距、样式、文案、图片选择和变体。 ### 设计到代码协作 将 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