### [Wonder](https://dkwy.com/)

**Published:** 2026-05-18T06:19:24

**Author:** 蛋壳

**Excerpt:** Wonder 是一款基于画布的设计工具，将设计与前端开发整合到同一个工作流中。与传统设计工具需要单独交付给工程师不同，Wonder 生成的设计与生产级代码（React + Tailwind）一一对应。设计师可以直接在画布上发起 prompt、迭代和打磨视觉效果，底层代码则会实时同步更新。它还通过 MCP server 与 Cursor、Claude Code 等编码 Agent 集成，让开发者无需截图或重建即可将设计上下文直接引入代码库。

## 产品概述

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 实时获取设计上下文，加速前端实现。
-   **用真实代码做可视化原型：**创业者和独立开发者无需专门的设计或工程团队，即可将早期想法转化为可交互、可上线的原型。



---