App 预览
预览你的实时应用，测试其交互，并在发布前运行检查——同时完整了解工具栏以及进行可视化编辑的所有方式。
预览你的实时应用，测试其交互，并在发布前运行检查——同时完整了解工具栏以及进行可视化编辑的所有方式。
什么是 App 预览？
当你的 AI 智能体完成任务后，App 预览会在页面顶部打开。你不只是查看作品的外观，还可以像使用一个完整可运行的应用那样与其交互——点击浏览页面、测试功能，并在无需编写代码的情况下进行可视化修改。它也是发布前的最后一道检查点：如果有任何显示异常或行为不符合预期的地方，你都可以在用户看到之前发现并修复。
开始之前：智能体处理可能需要一点时间。任务运行期间，右侧的终端面板会显示实时活动，包括文件创建、代码生成以及过程中遇到的任何错误。你也可以随时使用刷新图标重新加载预览的最新版本。
App 预览工具栏
预览窗口上方有一条简洁的工具栏。从左到右，各个控件的作用如下：
- Design：切换可视化编辑模式。启用后，点击预览中的任何内容都会选中该元素进行编辑——参见下方“修改你的应用”。
- 设备切换：显示图标可在移动端视图和默认视图之间切换，让你无需离开页面即可检查响应式效果。
- 刷新：重新加载预览窗口。当预览看起来过旧或卡住时，首先就该点它。
- 首页：无论你当前浏览到哪里，都可将预览快速跳回应用首页。
- 页面选择器：中间的下拉菜单会列出应用中的页面，选择其中一个即可直接预览，而不必一路点击过去。
- 在新标签页中打开：箭头图标会在单独的浏览器标签页中打开预览。当嵌入式预览卡住或无响应时尤其有用。
- Console：位于右侧边缘，用于打开包含系统日志和错误消息的面板；当你发现哪里出问题时，应先查看这里。
预览上方的工具栏：左侧是 Design，接着是设备切换（“显示移动端预览”）、刷新、首页、页面选择器、在新标签页中打开，以及右侧的 Console。
箭头图标会在独立的浏览器标签页中打开正在运行的应用——如果嵌入式预览表现异常，这是一个可靠的应急出口。
如何使用 App 预览
步骤 1：等待预览加载
智能体完成后，App 预览会在主窗口中加载你的预览。这通常需要几秒到一分钟。
超过 2 分钟？点击工具栏中的刷新。如果仍然卡住，请检查 Console 中是否有错误（见步骤 3）。
步骤 2：预览并测试交互
加载完成后，你看到的就是你的真实应用：
- 检查响应式效果：使用设备切换在桌面端和移动端视图之间切换，确认布局在较小屏幕上也能正常显示。
- 逐项点击测试交互：打开每个导航链接、点击按钮、提交表单，并触发悬停状态。页面能渲染出来，不代表页面真的能正常工作。
- 走一遍关键路径：从落地页开始，经过浏览探索，到完成主要行动号召，完整走完最重要的用户路径。
- 在真实标签页中测试：在新的浏览器标签页中打开预览，在用户实际会使用的环境中做最后一轮检查。
步骤 3：检查错误（如果看起来有问题）
如果应用无法加载或显示异常，请在 App 预览工具栏中选择 Console。Console 面板会在预览下方打开，而终端则是单独的任务活动区域。它会收集构建过程中生成的系统日志和错误消息。红色错误消息可能包含问题描述以及额外的诊断细节。
要修复错误：
- 点击问题报告通知中的 Resolve，AI 会自动分析并修复所有已识别的 bug，修复完成后预览会重新加载。你可以在终端面板中实时查看进度。
- 没有 Resolve 按钮？点击智能体最新消息旁边的“…”（更多选项），然后选择 Feedback 联系支持团队——请附上你的 Chat Link 和错误截图。
有关完整的错误处理流程，请参见 问题报告。
步骤 4：修改你的应用
方法 1 — 点击编辑（最适合可视化修改）
首先在 App 预览工具栏中选择 Design 以启用可视化编辑模式。Design 仅在符合条件的桌面项目状态下，对具有编辑权限的用户可用；如果你没有看到它，请在聊天中使用方法 2。然后直接点击预览中的任意元素。该元素会以轮廓高亮选中，并显示一个标记，说明你选中了什么以及它的尺寸，例如 h1、按钮或卡片。元素旁边会出现一个内联的“Ask the Atoms to change…”栏，因此你可以描述仅针对该位置的修改；左侧还会打开可视化编辑器，供你进行手动调整：
- 颜色：通过取色器调整文本、背景和边框颜色。
- 间距：padding、margin，以及元素之间的间隔。
- 排版：字体大小、字重和字体族。
- 布局：对齐方式、flexbox 和 grid 属性。
- 文本内容：直接在原位置编辑文字。
每次修改都会立即更新预览，因此你可以实时看到结果。可视化编辑器还包含一个 Library 标签页，用于浏览并添加预构建资源：图标、图片和 UI 组件，可直接插入你的项目中。
点击编辑的实际效果：标题已被选中（显示其标签和尺寸），内联栏允许你仅针对这个元素提出修改要求。
方法 2 — 在聊天中描述
用自然语言告诉智能体你想修改什么，它们会将更改应用到应用中：
把背景颜色调深一些。
减少标题区域周围的内边距。
把按钮颜色改成蓝色。
发布前检查
App 预览是点击 Publish 之前的最后一站。这个检查清单可帮助你在用户看到之前发现常见问题：
- 预览能正常加载，且 Console 中没有红色错误消息。
- 布局在移动端视图中也能正常显示，而不仅仅是在桌面端。
- 所有交互都能正常工作：导航、按钮、表单以及主要行动号召。
- 占位内容已被替换，像 [Company name] 这样的方括号占位符很容易被忽略，但上线后会非常显眼。
- 页面选择器中的每个页面至少都快速检查过一遍，而不只是首页。
一切正常？点击右上角的 Publish 并分享链接。
快速参考
- 刷新预览 — App 预览工具栏中的刷新图标。
- 切换设备视图 — 工具栏中的设备切换，用于测试不同屏幕尺寸。
- 在页面之间跳转 — 工具栏中的页面选择器下拉菜单。
- 在新标签页中打开 — 工具栏中的箭头图标。
- 查看错误日志 — 在 App 预览工具栏中选择 Console；日志面板会在预览下方打开。
- 自动修复错误 — 问题报告通知中的 Resolve 按钮。
- 编辑可视化元素 — 点击预览中的任意元素将其选中并打开可视化编辑器。
- 报告问题 — 任意智能体消息上的“…” → Feedback。
常见问题
为什么我的 App 预览会显示加载画面？
网站正在加载，App 预览工作正常，请稍等片刻。如果超过 2 分钟，请点击刷新图标或检查 Console 面板中是否有错误。
为什么我的 App 预览会显示红色错误消息？
智能体在构建过程中可能会遇到问题，这有时会导致网页错误。点击 Resolve，智能体会为你修复；修复完成后，预览会恢复正常。红色消息是一个信号，不是危机。
为什么我无法从已发布页面中移除 Atoms 徽章？
移除徽章需要 Pro 套餐或更高版本。点击右上角的头像，选择 Settings，然后进入 Plans & Billing 并选择 Pro 套餐或 Max 套餐。升级后，Atoms 徽章会自动从你已发布的页面中移除。
如何使用 Design Mode 修复页面布局或样式问题？
- 打开 Design Mode 并选中那个对齐错误或样式不正确的确切元素。
- 说明页面和断点、当前问题、期望结果，以及哪些内容不能改变。
- 使用可量化的指令，例如 padding、对齐、宽度、颜色或换行行为。当视觉匹配很重要时，请附上参考图片。
- 每次只应用一项更改，然后验证桌面端和移动端布局，以及加载、空状态、悬停和错误等重要状态。
- 如果结果破坏了其他区域，请回到上一个可正常工作的版本，并以更小的范围重试。
为什么 App 预览会显示空白白屏？
- 确认问题是否只影响 App 预览、Preview URL，还是已发布站点也受影响。
- 刷新一次，在新标签页中打开 Preview，并测试无痕窗口。
- 检查当前任务或构建是否仍在运行。等待其完成后再重试。
- 如果有明确消息提示 Cloud & AI 余额不足或应用已暂停，请打开 Settings → Cloud & AI 并检查该余额。不要仅凭空白屏幕就进行充值。
- 记录任何 Console 或 Network 错误，但不要分享 cookies、tokens 或机密值。
如果屏幕仍然空白，请联系支持团队，并提供 Chat Link、完整的 Viewer URL、时间和时区、受影响环境、截图以及已脱敏的错误详情。
为什么我的 Preview 或 App 预览会显示空白屏幕或一直加载？
- 检查是否只有 App 预览、Preview URL 或已发布站点受到影响。
- 刷新一次，在新标签页中打开 Preview，并测试无痕窗口。
- 检查当前任务或构建是否仍在运行，并等待其完成。
- 测试最后一个已知可正常工作的版本。如果该版本正常，请对比最近引入空白屏幕的更改。
- 仅当产品明确提示余额不足或应用已暂停时，才打开 Settings → Cloud & AI。
如果问题仍然存在，请联系支持团队，并提供 Chat Link、完整的 Viewer URL、版本、时间和时区、受影响环境、截图，以及已脱敏的 Console 或 Network 错误。
为什么我的 Design Mode 更改在 Preview 中看起来正确，但在已发布站点上却不生效？
Preview 和已发布站点是相互独立的通道。保存或预览不会将更改推送到生产环境。
- 点击 Publish 面板中的 Update — 打开 Publish 面板并点击 Update。等待状态显示为 Up to date。
- 强制刷新线上站点 — 按 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows），或在无痕窗口中打开 URL，以排除浏览器缓存影响。
- 检查已发布的版本号 — 在 Publish 面板中，确认版本与你在 Preview 中看到的一致。如果不一致，请重新发布。
- 测试平台 Prod 子域名 — 如果你使用自定义域名，请单独打开默认的 Prod URL。如果 Prod 子域名已更新而自定义域名未更新，则问题出在 DNS 或 CDN 缓存。
如果问题仍然存在，请提供 Preview URL、Prod URL、并排对比截图，以及你点击 Publish 或 Update 的时间。
为什么智能体修改后，我的页面在移动端看起来坏掉了？
当智能体修改布局或样式时，可能会无意中破坏小屏幕上的响应式行为。
- 先以移动端宽度预览 — 使用 App 预览工具栏中的设备切换切换到移动端视图，并在发布前检查结果。
- 在移动端视图中使用 Design Mode — 当设备切换设置为移动端时切换到 Design Mode。点击出问题的元素，这样智能体只会针对该屏幕尺寸下的那个组件进行修改。
- 提供明确的响应式约束 — 准确告诉智能体移动端布局应是什么样。示例：“在小于 768px 的屏幕上，将卡片堆叠为单列，并将 padding 设置为 16px。”
- 要求智能体保留现有媒体查询 — 在请求桌面端更改时，补充说明：“不要修改任何现有的响应式或移动端样式。”
如果问题仍然存在，请提供 Chat Link、移动端布局异常的截图，以及期望布局的参考图片。
为什么图片在 Preview 或已发布站点中缺失或无法加载？
如果图片显示损坏、出现占位图标或无法加载：
- 检查图片文件路径 — 打开 Files 部分，确认图片文件存在于代码中引用的路径。智能体可能在编辑过程中移动或重命名了文件。
- 验证文件大小和格式 — 过大的图片或不受支持的格式可能无法加载。请压缩图片或转换为 PNG、JPG 或 WebP。
- 检查云存储 — 前往 Settings > Cloud & AI，确认你有可用的存储空间。
- 强制刷新 — 按 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows）以清除缓存的图片引用。
如果问题仍然存在，请提供 Chat Link、缺失图片的 URL，以及异常状态的截图。
智能体修改了错误的元素，或破坏了页面其他部分。我该怎么办？
当智能体修改了无关元素，或在页面其他部分引入回归问题时：
- 回滚 — 前往 History，并从最后一个稳定版本进行克隆。这会重置聊天上下文，同时保留你的代码。
- 使用 Design Mode 进行隔离 — 切换到 Design Mode，并直接点击具体元素。这样可以将智能体的编辑范围锚定到该组件。
- 添加明确约束 — 清楚说明哪些内容绝对不能改。示例：“只将页眉背景色改为 #1A365D。不要修改导航栏、页脚或任何其他组件。”
- 每个提示词只做一项更改 — 做一项修改，验证结果，然后再继续下一项。
如果智能体反复导致其他元素回归，请从稳定版本进行克隆，并以严格限定范围的指令重新尝试。
为什么 Preview 会显示构建错误或缺失依赖？
如果 Preview 面板显示构建错误、红色错误横幅，或提示缺少包：
- 使用 Resolve 按钮 — 如果 App 预览中出现问题报告通知，请点击 Resolve，AI 会自动分析并修复所有已识别错误。如果没有出现 Resolve 按钮，请从 Console 面板复制准确的错误消息，并将其粘贴给智能体，同时附上：“修复这个构建错误：[error message]。”
- 检查最近的更改 — 如果错误是在某次特定编辑后出现的，请前往 History，并与最后一个可正常工作的版本进行比较，以找出导致问题的更改。
- 从最后一个可正常工作的版本进行克隆 — 如果错误难以解决，请从你上一个成功检查点进行克隆，并逐步重新应用更改。
- 检查包兼容性 — 如果错误提到了某个特定包，请让智能体执行：“检查 [package name] 是否与当前项目设置兼容，并修复任何版本冲突。”
注意：如果错误消息提到了平台组件（App 预览、启动脚本、Publish、部署记录）或第三方包内部文件（例如 @vue/compiler-core、vite），这可能是平台问题，而不是智能体问题。请携带完整错误消息联系支持团队。
如果问题仍然存在，请提供完整的错误消息、Chat Link 以及错误截图。
为什么我的字体、颜色或间距更改没有生效？
如果智能体确认更改已完成，但视觉结果没有变化：
- 强制刷新 — 按 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows）。CSS 更改经常会被浏览器缓存。
- 检查 CSS 优先级冲突 — 智能体可能添加了被现有规则覆盖的样式。请让智能体执行：“检查我请求的样式是否被其他 CSS 规则覆盖，并在需要时修复优先级。”
- 使用 Design Mode 检查 — 切换到 Design Mode 并点击该元素。左侧的可视化编辑器会显示当前应用的颜色、间距、排版和布局属性，因此你可以查看请求的更改是否已被应用。
- 确认文件是否正确 — 对于同时包含全局样式表和组件级样式的项目，智能体可能编辑了错误的文件。请询问：“你把更改应用到了哪里？把文件路径和行号告诉我。”
如果问题仍然存在，请提供 Chat Link、未变化元素的截图，以及你请求的准确样式值。
为什么我点击时，Design Mode 会选中错误的组件？
Design Mode 使用可视化布局来判断你要操作的是哪个组件。嵌套或重叠元素可能导致选中错误。
- 放大查看 — 点击前先放大该区域。这有助于区分彼此紧密嵌套的组件。
- 使用文字描述作为备用方案 — 如果反复点击都会选中错误元素，请改为在聊天中描述它。示例：“选中右侧列定价卡片中的第二个按钮。”
- 通过文件路径引用 — 如果你知道哪个文件包含该组件，请直接告诉智能体：“编辑 src/components/PricingCard.tsx 第 42 行中的元素。”
如果选中问题仍然存在，请提供高亮标出目标元素的截图以及 Chat Link。