调整你的应用外观，然后在发布前预览结果。

Design 会在你的实时预览旁打开，让你 无需编写代码 即可更改项目外观。

本指南介绍如何使用 Theme 设置全局样式、使用可视化编辑编辑单个元素、从 Library 替换图片、用自然语言描述更改，以及在正式上线前跨设备检查你的作品。

Design 的工作方式

当 AI 智能体完成任务后，App 预览 会出现在页面顶部。选择 Design 可打开屏幕左侧的设计面板，实时预览会显示在其旁边。它包含三个标签页：

• Theme 为整个应用设置全局规则——颜色、字体和效果。最适合在构建前使用。
• 可视化编辑 调整你已选中的元素。适用于任何项目、任何时间。
• Library 用于替换图片或生成新图片。

Theme 负责设定规则，而可视化编辑则完善细节。选择 Exit 可关闭面板。

Design 面板会在左侧打开。在你选中某个内容之前，可视化编辑会提示你选择一个元素。

开始之前

在打开 Design 之前，请确认：

• 你的项目已有 已完成的构建。 Design 从 App 预览 中打开，而它只会在智能体完成任务后出现。
• 你知道更改 在发布前不会生效。 在你发布更新版本之前，公开 URL 不会受到影响。
• 你知道 主题只会影响共享样式。 使用固定值构建的元素在主题更改后会保留原有外观。请参见下方的 如果主题显示不正确。

使用 Theme 设置全局样式

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

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

选择主题

Theme 标签页会打开并显示一个 Search Themes 字段，并将主题分组到不同区块中：

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

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

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

应用主题的方法：

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

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

注意： 如果你在可视化编辑中有未保存的更改，Atoms 会显示 Unsaved Changes，并在应用新主题前要求你保存或放弃这些更改。

更新已应用的主题

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

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

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

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

在 Theme Manager 中创建或编辑主题

选择 Current Theme 旁边的 <strong>+</strong> 可从零开始创建主题，或打开现有主题进行修改。两者都会打开 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 主题系统构建的。请改用可视化编辑——你仍然可以逐个元素实现所有效果。

重要： 如果可以，请尽早选择主题。当智能体在已应用主题的情况下进行构建时，它们会从一开始就使用该主题的共享样式，因此后续不会出现太多带固定值、无法被主题更改影响的元素。

使用可视化编辑编辑单个元素

在预览中选择一个元素即可编辑它。若要同时处理多个元素，请在 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、应用其他主题，或使用 选中以对话，Atoms 会显示 Unsaved Changes，并要求你先保存或放弃后再继续。

保存只会将更改保留在你的项目中。它不会将更改发布到线上站点——请参见 发布你的更改。

选中元素后，可视化编辑会显示其属性。选区上方的浮动工具栏可在描述更改和直接编辑之间切换。

提示：

1. 可视化编辑适合做外观调整，而聊天更适合结构性更改，例如新增页面、新功能或后端逻辑。
2. 如果你想对一排卡片或按钮做相同更改，请使用 Ctrl-点击 或 Cmd-点击 全选，然后在聊天中描述一次即可。通过属性控件逐个编辑意味着你需要重复操作。

使用 Library 替换图片

Library 会将图片应用到你当前选中的元素，因此请先选择图片要放置的位置。

1. 在预览中 选择你想更改的元素。在你选择之前，Library 会显示 Select an element to start visual editing。
2. 打开 Library 标签页并选择来源——Image、Generate 或 Upload。
3. 应用你的图片。 具体方式取决于图片来源。对于内置图片，将鼠标悬停其上并选择 Use asset。对于你生成或上传的图片，选择其完成后的缩略图即可。
4. 检查预览。 图片会立即应用到你选中的元素上。
5. 选择预览底部的 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…，这样智能体就会将你的指令应用到该元素，而不是整个项目。

浮动工具栏位于你的选区上方。左侧的标签会显示指令将应用到哪个元素。

描述结果，而不是实现方式：

- "让这里更平静一些——留白更多，标题更小。"

- "让这个按钮的样式与定价页面一致。"

像 "让它更好看" 这样模糊的指令会产生不可预测的结果。

注意： 在可视化编辑中点击某个属性会立即生效。发送提示词则是让智能体代为完成，这会花更长时间。对于简单的颜色或间距调整，请直接编辑属性。

预览你的更改

使用预览上方的工具栏：

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

预期结果： 你的更改在你打算支持的每个页面和每种设备宽度下都能正常显示。

从预览问题中恢复

如果预览看起来不是最新状态、一直在加载，或显示红色错误，那么问题出在预览本身，而不是 Design。请参见 构建与预览故障排查 获取排查步骤——Refresh、Console 面板、Resolve，以及如何报告持续存在的错误。

有一点是 Design 特有的：如果你的编辑看起来消失了，请检查你是否已保存。离开 Design 时，未保存的更改会被丢弃——参见 保存你的更改。

发布你的更改

Design 中的更改会保留在你的工作项目中，直到你发布为止。选择右上角的 Publish，如果项目已上线，则选择 Update。

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

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