可视化编辑和预览

可视化编辑可直接在 App 预览 中使用。使用预览下方的工具栏来选择元素、编辑文本、替换图片、应用主题，并在发布前预览你的更改。

使用 Select element 进行 AI 辅助更改，使用 Edit Text 直接修改文本，使用 Theme 设置颜色、字体和效果等全局样式。

可视化编辑如何工作

当 AI 智能体完成任务后，App 预览 会显示在项目顶部。可视化编辑工具栏位于预览下方。

• Select element 让你可以选择一个或多个元素，并要求智能体修改它们。
• Edit Text 让你可以直接在预览中编辑文本。
• Theme 打开全局样式的主题控制。

当你不需要工具栏时，可以将其折叠。

开始之前

在开始编辑之前，请确保：

• 你的项目已有已完成的构建。可视化编辑工具会在智能体完成任务后于 App 预览 中提供。
• 你知道更改在 发布之前不会生效。 在你发布更新版本之前，你的公开 URL 不会受到影响。
• 你知道 主题只会影响共享样式。 使用固定值构建的元素在主题更改后会保留原有外观。请参阅下方的 如果主题显示不正确。

使用 Theme 设置全局样式

主题是你项目的设计系统。它定义了全局变量——调色板、排版和间距——这些会应用到整个应用，而不是只作用于某一个元素的设置。

Theme 最适合在准备阶段使用，也就是在你开始构建之前。尽早应用主题意味着智能体从一开始生成的所有内容都会遵循它。

选择主题

从 App 预览 下方的工具栏中选择 Theme。Theme 面板包含一个 Search Themes 字段，并将主题分组到不同部分：

• Current Theme —— 你的项目当前使用的主题。在你应用任何主题之前，这里会显示 No theme applied yet，其旁边的 + 按钮可用于创建新主题。
• Featured Theme —— 15 个由设计师精选的预设。每个主题都会显示为使用该主题构建的页面预览，并附带其名称和一排展示调色板的色块。这些主题无法删除。
• Your Theme —— 你创建或自定义的主题。这些主题可以重命名和删除。

每个主题都会显示为使用该主题构建的页面预览，并附带其名称和一排展示调色板的色块，因此你可以在应用前判断其设计方向。

Theme 标签页，顶部是已应用的主题，下方是你保存的主题。

应用主题的方法：

1. 选择你想要的主题。
2. Atoms 会询问 "Do you want to apply theme name?"
3. 选择 Apply 进行确认，或选择 Cancel 返回。
4. 检查预览。

预期结果： 预览会更新为你选择的主题，并且它现在会显示在 Current Theme 下。

注意： 如果你有未保存的文本或图片更改，Atoms 会在应用新主题前提示你保存或放弃这些更改。

更新已应用的主题

Theme 标签上的一个圆点表示你当前应用的主题有可用的新版本。

如需更新，请在当前主题上选择 Update，并确认 Do you want to re-apply theme name? 之后你的项目将使用较新的版本。

你不必更新。如果你不更新，项目会继续使用你已应用的版本。

注意： 注意：如果你的应用看起来不像你选择的主题，可能是某些单独元素具有覆盖主题的样式。这些覆盖针对特定内容，并且在主题更改后仍会保留。

在 Theme Manager 中创建或编辑主题

选择 Current Theme 旁边的 + 可从头创建主题，或者打开现有主题进行修改。两者都会打开 Theme Manager，你可以在其中结合实时预览微调主题。

其设置位于三个标签页中：

• Color —— 应用使用的颜色角色，按用途分组：Base Colors、Card、Popover、Primary、Secondary 等。每个角色都有自己的值，因此更改 Primary 会影响所有使用它的元素。
• Fonts —— 你的 Serif、Sans-serif 和 Mono 字体。
• Effects —— 圆角 Radius，以及可通过颜色、不透明度、模糊、扩散和偏移控制的 Shadow。

旁边的预览由真实组件构成——登录表单、按钮、输入框、正文和等宽文本——因此你可以立即判断更改效果，而不是靠猜测。使用其下方的明暗切换来同时检查两种模式，因为在浅色表面上效果良好的调色板，在深色表面上可能会失去对比度。

在预览下方，你还可以使用 Undo 和 Redo 逐步回退或重做更改，并使用 Reset 将主题恢复到初始状态。

Theme Manager。你更改某个值时，预览会随之更新，其下方的控件包括撤销、重做、导出、导入和重置。

保存主题

1. 选择 Save。
2. 输入一个 Theme Name，或保留建议名称。
3. 选择 Save 进行确认。

预期结果： 你的主题会显示在 Theme 标签页的 My Theme 下，并以色块形式显示其调色板。你可以像应用其他主题一样应用它。

注意： 在你保存之前，编辑内容不会被保留。如果你在存在未保存更改时尝试应用其他主题，Atoms 会阻止你并提供保存或放弃的选项。

跨项目复用主题

Theme Manager 在预览下方提供 Export 和 Import。将主题导出为文件，然后导入到另一个项目中，以复用相同的设计方向，或者将其交给队友，使他们的项目与你保持一致。

如果主题显示不正确

应用主题并不是兼容性检查，因此通常不会失败。主题会替换你的应用所基于的共享样式值，这意味着选择器中的任何主题通常都可以应用到任何项目。

你更可能看到的情况是：主题应用成功了，但并未影响所有内容。对此不会出现错误消息——它只是看起来不对。

应用中的一部分仍保留旧外观。 这是最常见的问题。某个元素如果被赋予了固定值——例如直接在该元素上设置了特定颜色或字体，而不是使用应用的共享样式之一——那么主题更改就无法影响它，因此它会保留之前的外观，并可能与周围内容不协调。请选择受影响的元素，并在项目聊天中描述你想要的更改。

文本变得难以阅读。 如果将深色主题应用到为浅色表面设计的布局上，文本可能会因对比度不足而难以阅读。请在可视化编辑器中调整受影响的元素，或选择一个更接近你现有设计的主题。

Atoms 告诉你主题无法应用。 这种情况不常见，意味着你的项目界面并不是基于 Atoms 主题系统构建的。请改用可视化编辑器——你仍然可以逐个元素实现所有更改。

重要： 尽可能尽早选择主题。当智能体在已应用主题的情况下进行构建时，它们会从一开始就使用其共享样式，因此最终使用固定值、导致后续主题更改无法影响的元素会更少。

使用 Visual Editor 编辑元素

1. 将鼠标悬停在可视化编辑工具栏上并选择 Select element。
2. 工具栏会显示 Click to select, Ctrl/Cmd + Click for multiple。
3. 在预览中选择一个元素。要选择多个元素，请在选择时按住 Windows 上的 Ctrl 或 Mac 上的 Cmd。
4. 你的选择会附加到项目聊天中。工具栏会显示已选择的数量，例如 Edit 1 selection in chat window。
5. 在项目聊天中描述你想要的更改并发送消息。
6. 再次选择 Select element 以退出选择模式。

对于布局、颜色、间距、样式或影响多个已选元素的更改，请使用项目聊天。

直接编辑文本

1. 从 App 预览 下方的工具栏中选择 Edit Text。
2. 当出现 Click text content to edit 时，选择你想更改的文本。
3. 直接在预览中编辑文本。
4. 你可以在保存前编辑多个文本元素。工具栏会显示待处理编辑的数量，例如 1 text change 或 2 text changes。
5. 选择 Save 以保留所有待处理的文本更改，或选择 Discard 将其移除。

你也可以在使用 Select element 时双击文本，直接开始编辑。

保存或放弃你的更改

直接的文本和图片更改在你保存之前不会应用。当存在待处理更改时，工具栏会显示更改数量以及 Discard 和 Save。

• Save 会应用所有待处理的直接编辑。
• Discard 会移除待处理编辑，并将受影响元素恢复到之前的状态。

如果你在有待处理更改时尝试离开编辑模式，Atoms 会显示：

未保存的更改

你有未保存的更改。请在离开编辑模式前保存或放弃更改。

选择 Cancel 继续编辑，或选择 Discard 在不保留更改的情况下离开。

保存会更新工作中的项目。它不会在你发布之前更新线上站点。

替换图片

1. 进入 Select element 模式。
2. 选择你想替换的图片。
3. 从图片库中选择一张图片，或使用所选图片上的上传控件。
4. 在预览中检查替换效果。
5. 选择 Save 以应用图片更改，或选择 Discard 将其移除。

如果你还在项目聊天中输入了一条指令，图片替换和聊天指令可以一起提交。

带有图片分类和 Popular Images 的 Library 标签页。

图片来源说明

Image 是内置图片集合。你可以使用 Search assets 查找特定内容，或浏览分类——Backgrounds、Nature、Education、Health、Fashion、Science、Feelings 和 People，其余分类可通过 More tags 查看。选择某个分类即可打开它；使用返回箭头可返回。下方的 Popular Images 会显示一组通用图片。将鼠标悬停在任意图片上并选择 Use asset 即可应用。

Generate 可根据描述创建新图片，并且需要 Pro 或 Max 套餐。在 Describe the image you want to generate 下输入你想要的内容，然后选择 Generate。结果会显示在该字段下方。选择已生成完成的缩略图即可将其应用到你的元素。

Upload 可通过拖放、粘贴或点击来添加你自己的文件。图片可以是 JPEG、PNG、GIF、BMP、TIFF 或 WEBP 格式，大小不超过 4MB。上传的图片会显示在拖放区域下方——选择其中一张即可应用。

注意： Use asset 仅出现在内置图片上。你生成或上传的图片则是通过选择其缩略图来应用。

在聊天中描述更改

使用 Select element 选择一个或多个元素后，在项目聊天中描述你想要的结果。

例如：

• “让这个部分更平静一些，留白更多，标题更小。”
• “让这些按钮匹配定价页面上的样式。”

请明确说明你期望的结果。像“让它看起来更好”这样的指令可能会产生不可预测的结果

预览你的更改

使用预览上方的工具栏：

• Device view —— 在不同屏幕尺寸之间切换以测试响应式效果。Theme 和排版更改在桌面端看起来合适，往往在移动端会出问题，因此发布前务必检查移动端。
• Page selector —— 在应用的不同页面之间切换。
• Refresh —— 如果预览看起来不是最新状态，可重新加载预览。
• Open in a new tab —— 在单独的浏览器标签页中以全宽查看应用。
• Console —— 当某些内容看起来不对时，打开日志面板。

预期结果： 你的更改会在你打算支持的每个页面和每种设备宽度下都可见。

从预览问题中恢复

如果预览看起来不是最新状态、一直在加载，或显示红色错误，问题可能出在 App 预览 而不是你的可视化编辑。请参阅 构建和预览故障排查 了解排查步骤——Refresh、Console 面板、Resolve，以及如何报告持续存在的错误。

如果你的直接文本或图片编辑似乎消失了，请检查你是否已保存。未保存的更改可能会在你离开编辑模式时被放弃——请参阅“保存或放弃你的更改”。

发布你的更改

可视化编辑会保留在你的工作项目中，直到你发布。选择右上角的 Publish，如果项目已经上线，则选择 Update。

注意： 如果你的项目使用 Specify Version 而不是 Always Latest，线上站点会锁定在你选择的版本上，在你发布新版本之前，你的设计更改不会公开显示。

有关智能体在构建期间报告的错误，请参阅 问题报告。