# Wonder

把真实应用跑在画布上、让 agent 与你一起修改代码化图层的设计工具。

HTML: https://softbests.com/zh/software/wonder
Markdown: https://softbests.com/zh/software/wonder.md
Website: https://wonder.design/

- 栏目: [设计与原型](https://softbests.com/zh/category/design-prototyping)
- 定价: 免费增值
- 平台: macOS, Windows, 网页

## 适合谁

希望 Claude Code、Codex 或 Cursor 与界面设计在同一块画布上协作的设计师和设计工程师。

## 为什么值得关注

Wonder 会连接 GitHub 仓库，把真实应用直接跑在画布中，因此每个界面都是可编辑图层，背后就是最终上线的代码。它能导入 Figma 选区、导出 React 与 Tailwind，并接入 Claude Code、Codex、Cursor、Claude Desktop、Antigravity 或任意 MCP 客户端；agent 使用你已有的订阅，而不是 Wonder 的 credit。免费版包含一名编辑者、每周 3,000 个 AI 生成图层、无限文件、代码导出、Figma 导入与全部 shader。Pro 按年付为每位编辑者每月 16 美元，取消图层上限，增加 AI 图片与矢量生成、可分享的运行中应用和团队协作。它提供网页版以及 macOS、Windows 桌面端。代价是 Wonder 在 2026 年底围绕 agent 重做过一轮，工作流与文档仍在稳定中。

## 可替代谁

- [Figma](https://softbests.com/zh/software/figma)

## 相关与平替

- [Paper](https://softbests.com/zh/software/paper)
- [Cursor](https://softbests.com/zh/software/cursor)