使用Experience Modernization Agent进行可视化更改 visual-changes
本指南适用于更改网站外观的设计师和其他人员：颜色、字体、间距及其块的布局。 您描述了“体验现代化控制台”中对“体验现代化代理”所做的更改，在预览中选中它，然后将其发送给开发人员进行审阅。 代理将编写代码，因此您无需编写CSS或JavaScript。 但是，您的更改是通过其Git存储库到达网站的，因此您需要了解以下基本信息：将您的工作推送到分支，然后通过拉取请求将其移交。 如果这些术语是您的新术语，请参阅本指南中使用的单词。
开始之前 before-you-start
向项目负责人询问以下事项：
- 访问控制台。 使用您的Adobe ID登录。 请参阅打开Experience Modernization Console。
- 要处理的站点。 将站点的Git存储库连接到控制台工作区，您需要具有存储库的写入权限才能执行此操作。 查看连接您的站点。
- 您工作的一部分。 同意哪些块、页面或样式是您的块、页面或样式，这样其他人就不会同时更改相同的文件。 查看从一个人开始，然后划分工作。
- 如何移交。 大多数团队会保护主分支，以便开发人员查看每个更改。 询问您是否使用 创建新PR 进行推送。 查看移交审核。
- 对于Figma设计，为可以读取文件的Figma座位。 查看Figma设计中的工作。
在您推送之前，您的工作将保留在您自己的控制台工作区中。 您在预览中尝试的任何内容都不会单独访问实时网站。
您可以更改的内容 what-you-can-change
在Edge Delivery Services网站上，由作者编写内容，并由代码决定内容的外观。 因此，可视更改会更改网站的代码（主要是其CSS），并使作者输入的内容保持原样。 您无需再次导入或上传页面。
代码的每个部分都会到达网站的不同部分。 在请求更改之前，请确定它应到达的距离：
--link-color。变体、区域样式和模板仅在作者应用它们时才生效。 要求代理将其中一个页面应用于您正在处理的页面，以便您查看该页面并告知作者何时使用它。
有些请求超出了网站的外观。 添加由作者填写的字段、更改块内容的结构方式，或者添加行为（例如轮播）会更改块的内容模型或其逻辑。 描述您需要的内容，并将这些决策留给开发人员。 请参阅创建、更新和重构块。
限制对某些页面进行更改 impact
对块或全局样式的更改会更改使用它们的每个页面。 在请求之前，请先询问代理在何处使用卡片或样式，例如“我工作区中的哪些页面使用卡片块？”
当更改仅应用于某些页面时，请改为请求以下任一项：
- 块变体，但只有块的某些实例看起来不同。
- 当页面的一部分（如高亮显示的区域）需要其自身外观时，节样式。
- 当某个类型的页面（如所有产品页面）需要其自身的外观时，页面模板。
显示您的意思 references
图片通常比描述更精确。 在提示中使用附加文件 （回形针图标）进行附加：
- 您想要的结果或问题的屏幕截图，其中包含要查看哪些内容的句子。
- 品牌样式指南的页面，以图像或Word或PowerPoint文件的形式显示。
您还可以指向一个看起来正确的网站页面：“使/adventures上的信息卡看起来像/magazine上的信息卡。” 仅使用您的团队可以使用的设计和引用站点。
代理程序不记得对话之间的品牌规则。 一旦确定了规则（如按钮样式或标题大小），请让代理将其写入项目的说明文件中，以便遵循每个对话中的规则。 请参阅项目说明和内存。
从图形设计开始工作 figma
工程师可以通过Figma导入加载项从Figma中读取设计。 它会将设计的颜色、排版规则、间距和变量转换为网站的设计令牌，并将它的组件转换为块或块变量。
须知事项：
- 一次一个组件或帧。 代理从组件构建一个块，或从框架构建一个页面。 在发送下一个链接之前检查每个结果。 请参阅从Figma创建块和从Figma创建新页面。
- 您的令牌，您的文件。 个人访问令牌读取您可以打开的每个Figma文件，而不会读取任何其他文件。 Figma会发布它并设置它的限制。 每个人都存储自己的令牌。 它与设计令牌、代理从设计中读取的颜色和间距无关。
- 您的Figma座位。 您需要一个Dev或Figma完整座位；请参阅Figma和Design Systems。 如果控制台报告状态为429的Figma API错误，则令牌已达到Figma的速率限制。
- 加载项。 图形导入是可选功能。 如果您的项目未启用此功能，代理会提供启用此功能的功能。
- 设计令牌。 比较新令牌和现有令牌。 当Figma值与现有令牌仅略有不同时，请决定保留哪一个令牌，而不是同时保留两个令牌。
有关用户在代理中使用Figma之前组织批准的内容，请参阅Figma和设计系统。
进行第一次更改 first-change
- 在控制台的预览面板中打开页面。
- 在 视区 菜单中，选择要检查的宽度： 桌面、平板电脑或移动设备。
- 使用预览面板中的选择图标打开检查模式。
- 选择要更改的元素，如标题、图像或按钮。 元素将添加到您的提示中：代理将接收其HTML及其在页面上的位置，并限制对该元素所做的更改。
- 描述更改及其达到的范围，然后发送提示。 例如：“使此按钮使用我们的主要样式，无论是在此处还是在每个页面。”
- 代理完成后，选择刷新预览（如果尚未更新预览）。 检查每个 视区 大小的结果。
- 如果某些内容不正确，请说出您所看到的内容，例如“在手机上，文本会触摸图像。” 一次请求一个更改，然后在请求下一个更改之前对其进行检查。
要撤消更改，请要求座席恢复更改。 要将所有未推送的更改拖放到文件中，请打开 更改 视图，然后选择该文件旁边的放弃。 请参阅更改操作。
如果代理在几次尝试后仍无法立即获得更改，请咨询您的开发人员，或在菜单栏中选择请求支持，并描述您的请求和看到内容。 您的请求将发送到构建代理的团队。 当对话不顺利时，控制台还可以在 需要帮助？ 下提供帮助 请参阅请求支持。
示例提示 example-prompts
- “使所有标题都使用附加样式指南中的标题字体。”
- “将卡块中的卡片设置为等高，其按钮位于底部。”
- “添加Teaser块的
dark变体，在深色品牌颜色上使用白色文本，并将其应用于/adventures上的第二个Teaser。” - “添加浅色背景且上下有更多空间的
highlight分区样式，并将其用于主页的新闻稿分区。” - “在移动设备上，栈叠列并将图像放在文本上方。”
- “我工作区中的哪些页面使用主页块？ 请向我展示每个人在完成这项更改后的情况。”
- “将我们商定的按钮样式写入项目的说明文件中。”
交出前先检查 check
- 检查每 视区 大小，特别是移动设备。
- 选中使用同一块、样式或模板的其他页面，而不只是您处理的页面。
- 检查设计如何处理实际内容：长标题、短标题、缺少图像和包含许多项目的列表。
- 检查文本在背景中是否保持可读状态。 您可以询问代理：“根据WCAG AA检查Teaser块中文本的颜色对比度。”
- 推送之后，请打开拉取请求中列出的预览URL，然后查看那里的页面。 查看控制台预览与站点不同。
移交以进行审核 hand-over
- 按照推送代码更改中的说明，使用 创建新PR 推送代码。 只存放属于您更改的文件，并以纯句子描述它，例如“圆角和卡片阴影”。
- 在通知中选择查看PR，并将拉取请求的链接发送给审阅该请求的开发人员。
要进行审阅者请求的更改，请继续处理同一分支并使用推送至当前分支；拉取请求将更新。
当开发人员合并实时网站时，您的更改会到达该网站。 如果您还更改了页面上的文本或图像，则属于内容更改：它仅在页面上传和发布时到达网站。 同意作者的看法。 请参阅协调内容更改。
本指南中使用的单词 glossary
--link-color。main分支。在形状内容结构下更深入地说明了节、块和默认内容。