设计和预览
调整应用的外观，然后在发布前预览结果。
调整应用的外观，然后在发布前预览结果。
Design 会在实时预览旁边打开，让你 无需编写代码 即可更改项目外观。
本指南将介绍如何使用 Theme 设置全局样式、使用可视化编辑编辑单个元素、从 Library 替换图片、用自然语言描述更改，以及在正式上线前跨设备检查你的工作。
Design 的工作方式
当 AI 智能体完成任务后，App 预览 会出现在页面顶部。选择 Design 可在屏幕左侧打开设计面板，旁边就是实时预览。它包含三个标签页：
- Theme 为整个应用设置全局规则——颜色、字体和效果。最适合在开始构建前使用。
- 可视化编辑 用于调整你已选中的元素。适用于任何项目、任何时间。
- Library 用于替换图片或生成新图片。
Theme 负责设定规则，而可视化编辑负责打磨细节。选择 Exit 可关闭面板。
Design 面板会在左侧打开。在你选择某个内容之前，可视化编辑会提示你先选择一个元素。
开始之前
在打开 Design 之前，请确认：
- 你的项目已有 已完成的构建。 Design 从 App 预览 中打开，而它只会在智能体完成任务后出现。
- 你知道这些更改在发布前不会生效。 在你发布更新版本之前，公开 URL 不会受到影响。
- 你知道 theme 只会影响共享样式。 使用固定值构建的元素在 theme 更改后会保留原有外观。请参见下方的 如果 theme 看起来不对。
使用 Theme 设置全局样式
theme 是你项目的设计系统。它定义全局变量——调色板、排版和间距——这些设置会应用到整个应用，而不是只作用于某一个元素。
Theme 最适合在准备阶段、开始构建之前使用。尽早应用一个 theme，意味着智能体从一开始生成的所有内容都会遵循它。
选择一个 theme
Theme 标签页会显示一个 Search Themes 字段，并将 themes 分组到不同区块中：
- Current Theme —— 你的项目当前使用的 theme。在你应用任何内容之前，这里会显示 No theme applied yet，旁边的 + 按钮可创建一个新 theme。
- Default Theme —— 14 个由设计师精选的预设。每个都会显示为使用该 theme 构建的页面预览，并附带名称和一排展示调色板的色块。这些不能删除。
- My Theme —— 你创建或自定义的 themes。这些可以重命名和删除。
每个 theme 都会显示为使用它构建的页面预览，并附带名称和一排展示调色板的色块，这样你可以在应用前先判断整体方向。
Theme 标签页，顶部是已应用的 theme，下方是你保存的 themes。
要应用其中一个：
- 选择你想要的 theme。
- Atoms 会询问 "Do you want to apply theme name?"
- 选择 Apply 进行确认，或选择 Cancel 返回。
- 检查预览。
预期结果：预览会更新为你选择的 theme，并且它现在会显示在 Current Theme 下。
注意：如果你在可视化编辑中有未保存的更改，Atoms 会显示 Unsaved Changes，并要求你先保存或放弃这些更改，然后才能应用新的 theme。
更新已应用的 theme
Theme 标签页上的一个圆点表示你当前应用的 theme 有可用的新版本。
要使用它，请在当前 theme 上选择 Update，并确认 Do you want to re-apply theme name? 之后你的项目将使用较新的版本。
你不一定要更新。如果你不更新，项目会继续使用你当前应用的版本。
注意：如果你的应用看起来不像你选择的 theme，可能是某些单独元素在可视化编辑中被覆盖了。这些覆盖针对的是特定内容，因此在 theme 更改后仍会保留。
在 Theme Manager 中创建或编辑 theme
选择 Current Theme 旁边的 + 可从零开始创建一个 theme，或者打开现有 theme 进行修改。两者都会打开 Theme Manager，你可以在其中结合实时预览精细调整 theme。
其设置分布在三个标签页中：
- Color —— 应用使用的颜色角色，按用途分组：Base Colors、Card、Popover、Primary、Secondary 等。每个角色都有自己的值，因此更改 Primary 会影响所有使用它的元素。
- Fonts —— 你的 Serif、Sans-serif 和 Mono 字体。
- Effects —— 圆角 Radius，以及可通过颜色、不透明度、模糊、扩散和偏移控制的 Shadow。
旁边的预览由真实组件构成——登录表单、按钮、输入框、正文和等宽文本——因此你可以立即判断更改效果，而不是靠猜测。使用其下方的明暗切换来同时检查两种模式，因为在浅色表面上有效的调色板，在深色表面上可能会失去对比度。
在预览下方，你还可以使用 Undo 和 Redo 逐步回退或重做更改，以及使用 Reset 将 theme 恢复到初始状态。
Theme Manager。你更改某个值时，预览会同步更新；其下方的控件包括撤销、重做、导出、导入和重置。
保存 theme
- 选择 Save。
- 为它输入一个 Theme Name，或保留建议名称。
- 选择 Save 进行确认。
预期结果：你的 theme 会显示在 Theme 标签页的 My Theme 下，并以色块形式展示其调色板。应用方式与其他 theme 相同。
注意：在你保存之前，编辑内容不会被保留。如果你在仍有未保存更改时尝试应用其他 theme，Atoms 会拦截并提供保存或放弃选项。
在多个项目中复用 theme
Theme Manager 在预览下方提供 Export 和 Import。你可以将 theme 导出为文件，再导入到另一个项目中，以复用相同的设计方向，或者交给队友，让他们的项目与你保持一致。
如果 theme 看起来不对
应用 theme 并不是兼容性检查，因此通常不会失败。theme 会替换应用所基于的共享样式值，这意味着选择器中的任何 theme 通常都可以应用到任何项目。
你更可能看到的情况是：theme 成功应用了，但没有覆盖所有内容。对此不会出现错误消息——它只是看起来不对。
应用的一部分仍保留旧外观。 这是最常见的问题。某个元素如果被赋予了固定值，例如直接设置了特定颜色或字体，而不是使用应用的共享样式之一，那么 theme 更改就无法影响它，因此它会保留之前的外观，并可能与周围内容不协调。请在可视化编辑中修复，或在聊天中让智能体将固定值替换为你的 theme 样式。
文本变得难以阅读。 如果将深色 theme 应用于原本为浅色表面设计的布局，文本可能会因对比度不足而难以辨认。请在可视化编辑中调整受影响的元素，或选择一个更接近现有设计的 theme。
Atoms 告诉你无法应用该 theme。 这种情况不常见，意味着你的项目界面并不是基于 Atoms 的 theme 系统构建的。请改用可视化编辑——你仍然可以逐个元素实现所有效果。
重要：如果可以，请尽早选择 theme。当智能体在已应用 theme 的情况下开始构建时，它们会从一开始就使用其共享样式，因此后续无法被 theme 更改覆盖的固定值元素会更少。
使用可视化编辑编辑单个元素
在预览中选择一个元素即可编辑。若要同时处理多个元素，在 Windows 上按住 Ctrl 并点击，在 Mac 上按住 Cmd 并点击。
重要：下方介绍的属性控件一次只作用于 一个元素。当你选中了多个元素时，请改为在聊天中描述你想要的更改——参见 描述更改，而不是点击操作。
你的选区上方会显示一个标记，标明元素名称及其尺寸——文本显示字体大小，容器显示尺寸——这样你就能确认自己选中的是目标元素，而不是它的容器。
随后，可视化编辑 标签页会显示该元素可用的属性，并按区块分组：
- Layout —— 外边距和内边距。
- Appearance —— 背景颜色、不透明度和圆角半径。Radius 的范围从 None 到 Small、Medium、Large、XL、2XL、3XL，直到 Full。
- Content —— 元素的文本内容。
- Style —— 字体家族、字重、字号、文本对齐和装饰。
- Class —— 应用于该元素的样式类，默认折叠。
显示哪些区块取决于你选择的内容：文本元素会提供 Content 和 Style，而容器可能只显示 Layout、Appearance 和 Class。
你的选区上方还会出现一个浮动工具栏，提供最常用的控件——例如文本的字体、字重、对齐和颜色——以及删除控件和下文提到的提示词输入框。
你进行更改时，预览会同步更新。若要放弃这些更改，请使用预览底部的 Discard。
保存你的更改
在你保存之前，编辑内容不会被保留。一旦你做出更改，预览底部就会出现 Discard 和 Save。
- Save 会保留你的更改。
- Discard 会丢弃这些更改，并将元素恢复到原来的状态。
预期结果：保存后，这些按钮会消失，而你的更改现在已成为项目的一部分。
注意：如果你在仍有未保存工作的情况下尝试离开 Design、应用其他 theme，或使用 选中以对话，Atoms 会显示 Unsaved Changes，并要求你先保存或放弃更改后再继续。
保存只会将更改保留在你的项目中，并不会将其发布到线上站点——请参见 发布你的更改。
选中某个元素后，可视化编辑会显示其属性。选区上方的浮动工具栏可在“描述更改”和“直接编辑”之间切换。
提示：
- 可视化编辑适合外观层面的更改，而聊天更适合结构性更改，例如新页面、新功能或后端逻辑。
- 如果要对一排卡片或按钮进行相同更改，请使用 Ctrl-click 或 Cmd-click 全选后，在聊天中一次性描述更改。若通过属性控件逐个编辑，就需要重复操作。
使用 Library 替换图片
Library 会将图片应用到你当前选中的元素，因此请先选择图片要放置的位置。
- 选择元素：在预览中选择你想更改的元素。在此之前，Library 会显示 Select an element to start visual editing。
- 打开 Library 标签页并选择来源——Image、Generate 或 Upload。
- 应用你的图片。 具体方式取决于图片来源。对于内置图片，将鼠标悬停其上并选择 Use asset。对于你生成或上传的图片，选择其完成后的缩略图即可。
- 检查预览。 图片会立即应用到你选中的元素上。
- 在预览底部选择 Save，或选择 Discard 撤销。
预期结果：你选择的元素会显示新图片，保存后 Save 和 Discard 按钮会消失。
Library 标签页，显示图片分类和 Popular Images。
图片来源说明
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 只会出现在内置图片上。你生成或上传的图片则需要通过选择其缩略图来应用。
描述更改，而不是点击操作
当某项更改更适合用语言描述，而不是逐项点击完成时，你可以直接让智能体来处理。有两个位置可以这样做，而且两者都会作用于你当前选中的内容。
- 选区上的浮动工具栏。 你选中元素后，其上方会出现一个小型工具栏。两个图标可在“描述更改”和“直接编辑属性”之间切换。在 Ask the Atoms to change… 中输入内容并发送。
- Design 面板下方的聊天输入框。 当某个元素被选中时，输入框会显示一个 Design 标签，以及提示语 Ask the Atoms team to modify the selected element…，这样智能体就会将你的指令应用到该元素，而不是整个项目。
浮动工具栏位于你的选区上方。左侧的标签会显示该指令将应用到哪个元素。
描述结果，而不是实现方式：
- "让这里更平静一些——留白更多，标题更小。"
- "让这个按钮的样式与定价页面一致。"
像 "make it look better" 这样模糊的指令会带来不可预测的结果。
注意：在可视化编辑中点击某个属性会立即生效。发送提示词则是让智能体代为完成，这会花更长时间。对于简单的颜色或间距更改，请直接编辑属性。
预览你的更改
使用预览上方的工具栏：
- Device view —— 在不同屏幕尺寸之间切换以测试响应式效果。Theme 和排版在桌面端看起来正常，往往在移动端会出问题，因此发布前一定要检查移动端。
- Page selector —— 在应用的不同页面之间切换。
- Refresh —— 如果预览看起来不是最新状态，可重新加载预览。
- Open in a new tab —— 在单独的浏览器标签页中以全宽查看应用。
- Console —— 当某些内容看起来不对时，打开日志面板。
预期结果：你的更改会在你打算支持的每个页面和每种设备宽度下都清晰可见。
从预览问题中恢复
如果预览看起来不是最新状态、一直在加载，或显示红色错误，那么问题出在预览本身，而不是 Design。请参阅 Build and preview troubleshooting 了解排查步骤——包括 Refresh、Console 面板、Resolve，以及如何报告持续存在的错误。
有一件与 Design 特别相关的事：如果你的编辑似乎消失了，请检查你是否已保存。离开 Design 时，未保存的更改会被丢弃——请参见 保存你的更改。
发布你的更改
Design 中的更改会保留在你的工作项目中，直到你发布为止。选择右上角的 Publish；如果项目已上线，则选择 Update。
注意：如果你的项目使用的是 Specify Version 而不是 Always Latest，线上站点会锁定在你选择的版本上，你的设计更改在发布新版本之前不会公开显示。
有关智能体在构建期间报告的错误，请参见 问题报告。