产品概述
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 不等，满足从试用探索到日常生产交付的各种需求。 |
使用场景
- 产品 UI 设计：无论是构建 Web 应用还是移动端界面，设计师都能在画布内完成生成、迭代，并导出可直接投产的 React + Tailwind 组件。
- 消除设计与开发的交付鸿沟：饱受设计到开发还原失真困扰的团队，可以借助 Wonder 确保上线产品与设计稿完全一致，无需人工重建。
- 营销与落地页：市场和增长团队可在同一画布中快速制作并交付落地页、产品宣讲稿和宣传图。
- Agent 辅助开发：使用 Cursor、Claude Code 等 AI 编码 Agent 的开发者，可通过 MCP 实时获取设计上下文，加速前端实现。
- 用真实代码做可视化原型：创业者和独立开发者无需专门的设计或工程团队，即可将早期想法转化为可交互、可上线的原型。