Wonder

什么是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 不等，满足从试用探索到日常生产交付的各种需求。

使用场景

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

常见问题