Wonder

Wonder 是什么？

Wonder 是一款设计工具，将 AI 设计生成、基于聊天的迭代和单一画布编辑相结合。其核心目的是帮助团队从早期想法直接过渡到生产就绪的 UI，而无需单独的手动交接步骤。

Wonder 以真实代码作为设计格式构建。页面将 Wonder 定位为一种工作流，即你在画布上创建的内容直接映射到你交付的代码，包括复制 React + Tailwind 的能力。

主要功能

• 直接在画布上用 AI 生成设计：通过描述想要设计的内容，即可在原地生成视觉效果，减少来回沟通。
• 编辑时与设计系统聊天：使用聊天界面在同一画布上迭代和优化工作。
• 精确编辑和变体：更改样式、创建变体、调整间距、替换图像资源，作为同一工作流的一部分。
• 基于代码构建，即生产就绪：设计即“真实代码”，可复制为 React + Tailwind，避免手动重建。
• 基于先前工作迭代（保留流状态）：在先前设计基础上构建，探索选项而不丢失正在进行的编辑上下文。
• 结合代码上下文和代理工作流：页面描述“代码与画布，终于连接”，包括导出或发送给代理；还提到“探索 Wonder MCP”和“Wonder Toolkit”。

如何使用 Wonder

1. 在应用中启动新设计项目（从公开 Alpha 入口开始）。
2. 描述想要设计的内容，在画布上生成初始布局。
3. 通过聊天和直接编辑优化——例如，调整间距、更改主题/样式，并创建变体。
4. 复制或导出结果 为 React + Tailwind（或发送回你的编码代理），确保设计与实现保持一致。

使用场景

• 0 到 1 的 UI 布局创建：通过描述所需设计快速生成新流程的首个版本，然后迭代直到符合预期方向。
• 不丢失上下文的设计迭代：重访早期选项并探索新变体，同时保留先前画布工作的编辑/流状态。
• 减少设计师主导的生产交接：通过直接从 Wonder 创建的内容复制 React + Tailwind，从设计过渡到可实现代码。
• 不同主题或样式的变体生产：更改主题和样式创建多个版本，然后调整布局细节如间距。
• 代理辅助的设计到代码工作流：结合编码代理使用 Wonder，通过导出或发送工作回项目继续实现。

常见问题

• Wonder 中的“所见即所得”是什么意思？ 页面说明设计格式与代码 1:1 映射，设计即真实代码，可复制（React + Tailwind）交付，旨在减少重建和交接。

• 生成设计后可以编辑吗？ 可以。工具支持与 AI 结合的精确编辑，包括更改样式、创建变体、调整间距和替换图像内容。

• Wonder 只针对设计师，还是涉及开发者？ 页面强调设计师掌控全流程，同时突出结合代码上下文和代理，表明两种角色均可使用同一工作流。

• Wonder 支持跨多个版本的迭代工作流吗？ 描述为可在先前设计基础上构建迭代，而不丢失流状态。

替代方案

• 带设计到代码导出器的 Web UI 设计工具：这些工具专注于专用画布设计，然后后期导出资源或代码；关键区别在于设计/代码映射可能需要额外步骤，而 Wonder 采用“真实代码”方式。
• AI 辅助设计和原型工具：这些通常从提示生成模型或原型，然后需单独实现；Wonder 则强调可直接交付的代码支持设计。
• 组件驱动的 UI 开发工作流（如设计系统和代码优先方法）：团队可能从代码组件开始，而非设计画布；与 Wonder 相比，工作流可能更少聊天和画布驱动，更偏向实现优先。
• IDE + UI 库的自动化代码生成：这些在开发者环境中帮助生成或修改 UI 代码；Wonder 的定位聚焦于共享画布上的生成和编辑，直接映射回代码。