什么是Wonder?
Wonder 是一款基于画布的设计工具，将设计与前端开发整合到同一个工作流中。与传统设计工具需要单独交付给工程师不同，Wonder 生成的设计与生产级代码（React + Tailwind）一一对应。设计师可以直接在画布上发起 prompt、迭代和打磨视觉效果，底层代码则会实时同步更新。它还通过 MCP server 与 Cursor、Claude Code 等编码 Agent 集成，让开发者无需截图或重建即可将设计上下文直接引入代码库。
主要功能
实时设计转代码
画布上创建的每一个元素都由真实的 HTML/CSS 支撑。设计格式与代码 1:1 对应，设计师所见即开发者所交付，毫无差距。
基于画布的 AI 生成
只需描述你的想法，Wonder 即可直接在画布上生成布局、组件和样式变体。选中任意元素即可就地优化。
MCP Server 集成
通过内置的 MCP server，将 Wonder 与 Cursor、Claude Code 等编码 Agent 连接。Agent 可直接读取设计上下文，无需手动重绘或截图。
内置图像生成
无需切换工具，直接在画布上生成图像。告别占位素材——只需描述需求，图像便会出现在对应位置。
Shader 支持，打造交互视觉
为设计添加 GPU 加速的 Shader 特效，打造超越静态原型的丰富交互视觉效果。
分级 Credit 计费
提供 Free、Pro、Pro+、Max 四档方案，每月 Credit 配额从 300 到 60,000 不等，满足从试用探索到日常生产交付的各种需求。
1. Wonder 与 Figma 等工具有何不同？⌄
Figma 生成的是静态设计文件，需要工程师重新编写代码。而 Wonder 生成的设计本身就是代码——无需交付，也无需重建。
2. Wonder 导出的是什么代码？⌄
导出搭配 Tailwind CSS 的 React 组件。产物可直接投产，并与画布上的内容完全对应。
3. MCP server 有什么用？⌄
它让 Cursor、Claude Code 等编码 Agent 可以直接读取你的设计上下文，从而无需截图或人工编写规范即可实现 UI。
4. Wonder 可以免费使用吗？⌄
可以。免费版每月包含 300 Credit，支持代码导出、图像生成和社区支持，无需信用卡即可开始使用。
5. Credit 用在什么地方？⌄
Credit 用于 AI 生成任务——布局、图像生成、样式变体等。更高的方案提供更多每月 Credit。
6. 我不是开发者，可以使用 Wonder 吗？⌄
可以。设计师在画布上以可视化方式工作，代码会自动生成。无需编写或理解代码即可使用 Wonder。
7. Wonder 目前的开发状态如何？⌄
Wonder 目前处于公开 Alpha 阶段，由 Aquila Labs 提供支持。