Atoms App 预览

预览你的实时应用，测试其交互，并在发布前运行检查——同时完整了解工具栏以及进行可视化编辑的所有方式。

什么是 App 预览？

当你的 AI 智能体完成任务后，App 预览会在页面顶部打开。你不再只是查看作品的外观，还可以像使用一个完整可运行的应用那样与其交互——点击浏览页面、测试功能，并在无需编写代码的情况下进行可视化修改。它也充当发布前的最后一道检查点：如果有任何地方看起来不对或行为异常，你都可以在用户看到之前发现并修复。

开始之前： 智能体处理可能需要一点时间。任务运行期间，右侧的终端面板会显示实时活动，包括文件创建、代码生成以及过程中遇到的任何错误。你也可以随时使用刷新图标重新加载预览的最新版本。

App 预览工具栏

预览窗口上方有一条简洁的工具栏。从左到右，各个控件的作用如下：

• Design： 切换可视化编辑模式。启用后，点击预览中的任何内容都会选中该元素以进行编辑——请参见下方“修改你的应用”。
• 设备切换： 显示图标可在移动端视图和默认视图之间切换，让你无需离开页面即可检查响应式效果。
• 刷新： 重新加载预览窗口。当预览看起来不是最新状态或卡住时，先点它。
• 主页： 无论你当前导航到哪里，都可将预览直接跳回应用首页。
• 页面选择器： 中间的下拉菜单会列出你应用的各个页面，选择一个即可直接预览，而不必手动点过去。
• 在新标签页中打开： 箭头图标会在单独的浏览器标签页中打开预览。当嵌入式预览卡住或无响应时尤其有用。
• 控制台： 位于右侧边缘，可打开包含系统日志和错误消息的面板；当某些内容看起来损坏时，这里是你首先要查看的地方。

预览上方的工具栏：左侧是 Design，然后依次是设备切换（“显示移动端预览”）、刷新、主页、页面选择器、在新标签页中打开，以及右侧的控制台。

箭头图标会在独立的浏览器标签页中打开正在运行的应用——如果嵌入式预览出现异常，这是一个可靠的应急出口。

如何使用 App 预览

第 1 步：等待预览加载

智能体完成后，App 预览会在主窗口中加载你的预览。这通常需要几秒到一分钟。

超过 2 分钟？ 点击工具栏中的刷新。如果仍然卡住，请检查控制台中的错误（见第 3 步）。

第 2 步：预览并测试交互

加载完成后，你看到的就是你的真实应用：

• 检查响应式效果： 使用设备切换在桌面视图和移动端视图之间切换，确认布局在较小屏幕上也能正常显示。
• 逐一点击测试交互： 打开每个导航链接、点击按钮、提交表单，并触发悬停状态。页面能渲染出来，不代表页面真的可用。
• 走一遍关键路径： 按照最重要的用户路径，从落地页开始，到浏览内容，再到完成主要行动号召，完整走一遍。
• 在真实标签页中测试： 在新的浏览器标签页中打开预览，在用户实际会使用的环境里做最后一轮检查。

第 3 步：检查错误（如果看起来有问题）

如果应用无法加载或看起来损坏，请在 App 预览工具栏中选择控制台。控制台面板会在预览下方打开，而终端则是单独的任务活动区域。它会收集构建过程中生成的系统日志和错误消息。红色错误消息可能包含问题描述以及额外的诊断细节。

要修复错误：

• 点击 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 预览是发布前的最后一站。以下清单可帮助你在用户看到之前发现常见问题：

1. 预览能正常加载，且控制台中没有红色错误消息。
2. 布局在移动端视图中也能正常显示，而不只是桌面端。
3. 所有交互都能正常工作：导航、按钮、表单以及主要行动号召。
4. 占位内容已被替换，像 [Company name] 这样的方括号占位符很容易被忽略，但上线后会非常显眼。
5. 页面选择器中的每个页面至少都快速检查过，而不只是首页。

一切正常？点击右上角的 Publish 并分享链接。

快速参考

• 刷新预览 — App 预览工具栏中的刷新图标。
• 切换设备视图 — 工具栏中的设备切换，用于测试不同屏幕尺寸。
• 在页面之间跳转 — 工具栏中的页面选择器下拉菜单。
• 在新标签页中打开 — 工具栏中的箭头图标。
• 查看错误日志 — 在 App 预览工具栏中选择控制台；日志面板会在预览下方打开。
• 自动修复错误 — 问题报告通知中的 Resolve 按钮。
• 编辑可视化元素 — 点击预览中的任意元素以选中它并打开可视化编辑器。
• 报告问题 — 任意智能体消息上的“…” → Feedback。

常见问题

为什么我的 App 预览会显示加载画面？

网站正在加载中，App 预览工作正常，请稍等片刻。如果超过 2 分钟，请点击刷新图标或检查控制台面板中的错误。

为什么我的 App 预览会显示红色错误消息？

智能体在构建过程中可能会遇到问题，这有时会导致网页报错。点击 Resolve，智能体会为你修复；修复完成后，预览会恢复正常。红色消息是提示信号，不是危机。

为什么我无法从已发布页面中移除 Atoms 徽章？

移除徽章需要 Pro 或更高套餐。点击右上角的头像，选择 Settings，然后进入 Plans \& Billing 并选择 Pro 或 Max 套餐。升级后，Atoms 徽章会自动从你已发布的页面中移除。

如何使用 Design Mode 修复页面布局或样式问题？

1. 打开 Design Mode 并选中错位或样式不正确的确切元素。
2. 说明页面和断点、当前问题、期望结果，以及哪些内容不能改变。
3. 使用可衡量的指令，例如 padding、对齐、宽度、颜色或换行行为。若需要视觉匹配，请附上参考图片。
4. 每次只应用一项更改，然后验证桌面端和移动端布局，以及加载、空状态、悬停和错误等重要状态。
5. 如果结果破坏了其他区域，请回到上一个正常版本，并用更小范围的目标重新尝试。

为什么 App 预览会显示空白白屏？

1. 确认问题是否只影响 App 预览、Preview URL，还是已发布站点也受影响。
2. 刷新一次，在新标签页中打开 Preview，并测试无痕窗口。
3. 检查当前任务或构建是否仍在运行。等待其完成后再重试。
4. 如果有明确消息提示 Cloud \& AI 余额不足或应用已暂停，请打开 Settings → Cloud \& AI 并检查该余额。不要仅凭白屏就充值。
5. 记录任何控制台或网络错误，但不要分享 cookie、tokens 或机密值。

如果屏幕仍然空白，请联系支持团队，并提供 Chat Link、完整的 Viewer URL、时间和时区、受影响环境、截图以及已脱敏的错误详情。

为什么我的 Preview 或 App 预览会一直空白或持续加载？

1. 检查是只有 App 预览、Preview URL，还是已发布站点受到影响。
2. 刷新一次，在新标签页中打开 Preview，并测试无痕窗口。
3. 检查当前任务或构建是否仍在运行，并等待其完成。
4. 测试最后一个已知正常的版本。如果该版本正常，请对比最近引入白屏的问题改动。
5. 仅当产品明确提示余额不足或应用已暂停时，才打开 Settings → Cloud \& AI。

如果问题仍然存在，请联系支持团队，并提供 Chat Link、完整的 Viewer URL、版本、时间和时区、受影响环境、截图，以及已脱敏的控制台或网络错误。

为什么我的 Design Mode 更改在 Preview 中看起来正确，但在已发布站点上却不正确？

Preview 和已发布站点是彼此独立的渠道。保存或预览不会将更改推送到生产环境。

1. 点击 Publish 面板中的 Update — 打开 Publish 面板并点击 Update。等待状态显示为 Up to date。
2. 强制刷新线上站点 — 按 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows），或在无痕窗口中打开 URL，以排除浏览器缓存影响。
3. 检查已发布版本号 — 在 Publish 面板中，确认版本与 Preview 中看到的一致。如果不一致，请重新发布。
4. 测试平台 Prod 子域名 — 如果你使用自定义域名，请单独打开默认的 Prod URL。如果 Prod 子域名已更新而自定义域名未更新，则问题出在 DNS 或 CDN 缓存。

如果问题仍然存在，请提供 Preview URL、Prod URL、并排对比截图，以及你点击 Publish 或 Update 的时间。

为什么智能体修改后，我的页面在移动端看起来坏掉了？

当智能体修改布局或样式时，可能会无意中破坏小屏幕上的响应式行为。

1. 先以移动端宽度预览 — 使用 App 预览工具栏中的设备切换切换到移动端视图，并在发布前检查结果。
2. 在移动端视图中使用 Design Mode — 当设备切换设置为移动端时切换到 Design Mode。点击出问题的元素，这样智能体只会针对该屏幕尺寸下的该组件进行修改。
3. 提供明确的响应式约束 — 准确告诉智能体移动端布局应是什么样。示例："在宽度小于 768px 的屏幕上，将卡片堆叠为单列，并将 padding 设为 16px。"
4. 要求智能体保留现有媒体查询 — 在请求桌面端修改时补充说明："不要修改任何现有的响应式或移动端样式。"

如果问题仍然存在，请提供 Chat Link、移动端损坏布局的截图，以及预期布局的参考图。

为什么图片在 Preview 或已发布站点中缺失或无法加载？

如果图片显示损坏、出现占位图标或无法加载：

1. 检查图片文件路径 — 打开 Files 部分，确认图片文件存在于代码中引用的路径。智能体可能在编辑过程中移动或重命名了文件。
2. 验证文件大小和格式 — 过大的图片或不受支持的格式可能无法加载。请压缩图片或转换为 PNG、JPG 或 WebP。
3. 检查 Cloud 存储 — 前往 Settings \> Cloud \& AI，确认你有可用的存储空间。
4. 强制刷新 — 按 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows）以清除缓存的图片引用。

如果问题仍然存在，请提供 Chat Link、缺失图片的 URL，以及损坏状态的截图。

智能体改错了元素，或者破坏了页面的其他部分。我该怎么办？

当智能体修改了无关元素，或在页面其他部分引入回归问题时：

1. 回滚 — 前往 History，并从最后一个稳定版本进行克隆。这会重置聊天上下文，同时保留你的代码。
2. 使用 Design Mode 进行隔离 — 切换到 Design Mode，并直接点击具体元素。这样可以将智能体的编辑范围锚定到该组件。
3. 添加明确约束 — 清楚说明哪些内容 不能 改变。示例："只将页眉背景颜色改为 #1A365D。不要修改导航栏、页脚或任何其他组件。"
4. 每个提示词只做一项更改 — 做一项改动，验证结果，然后再继续下一项。

如果智能体反复导致其他元素回归，请从稳定版本进行克隆，并使用范围更严格的指令重新尝试。

为什么 Preview 会显示构建错误或缺少依赖？

如果 Preview 面板显示构建错误、红色错误横幅，或提示缺少包：

1. 使用 Resolve 按钮 — 如果 App 预览中出现问题报告通知，请点击 Resolve，AI 会自动分析并修复所有已识别错误。如果没有 Resolve 按钮，请从控制台面板复制准确的错误消息，并将其粘贴给智能体，同时附上："Fix this build error: [error message]."
2. 检查最近的更改 — 如果错误是在某次特定编辑后出现的，请前往 History，并与最后一个正常版本对比，以找出导致问题的改动。
3. 从最后一个正常版本进行克隆 — 如果错误难以解决，请从你上一个成功检查点进行克隆，并逐步重新应用更改。
4. 检查包兼容性 — 如果错误提到了某个特定包，请让智能体执行："Check whether [package name] is compatible with the current project setup and fix any version conflicts."

注意：如果错误消息提到平台组件（App 预览、启动脚本、Publish、部署记录）或第三方包内部文件（例如 @vue/compiler-core、vite），这可能是平台问题，而不是智能体问题。请将完整错误消息提交给支持团队。

如果问题仍然存在，请提供完整错误消息、Chat Link 以及错误截图。

为什么我修改字体、颜色或间距后没有生效？

如果智能体确认更改已完成，但视觉结果没有变化：

1. 强制刷新 — 按 Cmd+Shift+R（Mac）或 Ctrl+F5（Windows）。CSS 更改经常会被浏览器缓存。
2. 检查 CSS 优先级冲突 — 智能体可能添加了被现有规则覆盖的样式。请让智能体执行："Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
3. 使用 Design Mode 检查 — 切换到 Design Mode 并点击该元素。左侧的可视化编辑器会显示当前应用的颜色、间距、排版和布局属性，因此你可以查看请求的更改是否已应用。
4. 确认文件是否正确 — 对于同时包含全局样式表和组件级样式的项目，智能体可能编辑了错误的文件。请询问："Where did you apply the change? Show me the file path and line."

如果问题仍然存在，请提供 Chat Link、未变化元素的截图，以及你请求的准确样式值。

为什么我点击时，Design Mode 会选中错误的组件？

Design Mode 使用可视化布局来判断你要定位的组件。嵌套或重叠元素可能导致选中错误。

1. 放大 — 点击前先放大该区域。这有助于区分紧密嵌套的组件。
2. 使用文字描述作为备用方案 — 如果反复点击都会选中错误元素，请改为在聊天中描述它。示例："Select the second button inside the pricing card in the right column."
3. 通过文件路径引用 — 如果你知道该组件所在的文件，请直接告诉智能体："Edit the element in src/components/PricingCard.tsx, line 42."

如果选中问题仍然存在，请提供标出目标元素的截图以及 Chat Link。