重新设置站点样式 restyling
使用Experience现代化代理可在迁移期间应用设计或更改现有Edge Delivery Services项目的外观。 忠实复制源站点的外观并有意将其替换为新设计是不同的请求。 您想要的状态。
外观存在于项目的代码中：全局CSS可设置默认内容的外观，每个块都有自己的CSS和JavaScript。 它们可以一起提供相同的语义内容而不重新构建它，因为JavaScript可以在浏览器中重建标记；请参阅如何构建和更新您的站点。 因此，纯粹的视觉重新样式会更改Git中的代码，而只保留创作内容。
本指南适用于领导重新造型的人。 如果您是进行开发人员审阅的单个可视化更改的设计师，请从进行可视化更改开始。
同意更改的内容和保留的内容 prepare
连接项目并确认修改它的权限。 保存基线代码修订版本，并在更改之前保留受影响的内容。
提供：
- 内容源：必须保留其文本、图像、链接、元数据和含义的现有页面，或批准的新内容。
- 设计参考：特定的Figma组件或框架、授权参考网站、屏幕快照或设计规范。 命名其版本以及重要的桌面和移动设备状态。
- 范围：全局令牌（颜色、排版和间距的CSS自定义属性）和默认内容、选定块、页面或整个网站。
- 不能更改的内容：内容、URL、创作模型、辅助功能行为和集成。
- 输出：在项目使用的存储选项中作者可以编辑的内容，或静态设计原型（如果仅此而已）。
屏幕截图和引用站点可能会将交互和响应规则保留为未指定。 先在示例页面上结算这些参数，然后再将其应用于整个网站。
引用、原型和交付 design-output
该代理支持来自源站点、Figma和提供的引用的设计工作。 Figma导入和引导式重新设计是可选功能，可在请求需要时为您的项目启用这些功能。 它们有不同的输入和输出；不要假定它们的工作方式相同。
- 对于一个Figma块，提供其组件或节点链接。 对于新页面，请提供特定框架而不是整个文件。
- Figma导入需要Figma访问令牌和读取文件的权限。 查看Figma设计中的工作。
- 静态HTML设计预览会在页面的副本上显示新设计，这有助于您选择方向。 作者无法编辑这些副本；它们不是站点的文档或Experience Manager页面。
- 如果作者必须编辑结果，请在项目使用的存储选项中请求网站内容和块模型，然后按照相关说明检查基于文档的内容或Experience Manager创作。
引导式重新设计 guided-redesign
引导式重新设计会分阶段将网站或网站的一组页面应用到新设计中。 它由Stardust加载项stardust@excat-extended提供。 代理会捕获当前设计，记录所需的方向，构建前后原型以供审查，然后将批准的设计转换为块和内容。 使用它重新设计多个页面，而不是重新设计一个页面或块。 代理程序将工作文件和重新设计的进度保留在存储库中，以便您可以在以后的对话中继续它。
你不需要知道这些阶段的名字。 描述您想要的结果，例如“以更轻巧、更易编辑的风格重新设计主页和产品页面”，然后代理提出步骤。 您也可以直接要求执行一个步骤：
启用引导式重新设计还会启用设计工艺附加功能，该功能可将前端设计质量指导应用于每个页面。 在继续之前，请检查每个阶段，并验证如下所述的部署结果。
迁移期间重新设置样式 during-migration
当内容来自现有网站但目标设计不同时，请使用此路径。
- 完成项目和迁移范围，包括内容的存储位置。
- 定义目标设计系统：排版规则、颜色、间距、默认内容和可重用块。 根据需要重复使用现有项目约定。
- 对于Figma，设置访问权限，然后从特定组件节点创建所需的块或变体。 请参阅使用Figma中的块重新设计和从Figma创建块。
- 将每个模板的示例页面迁移到该块集合中。 将实时站点保留为内容源，将图片或批准的引用保留为设计源。
- 将内容与源网站进行比较，将外观与目标设计进行比较。 不要根据旧网站的外观来判断重新设计的页面。
- 检查作者是否可以编辑结果，以及它是否适用于每个屏幕宽度。 根据需要更正内容映射或模型，然后在批次中继续。
例如：
迁移
https://www.example.com/products/tents时在https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345应用批准的设计。 实时页面是内容源；引用定义新外观。 保留文本、链接、元数据和有意义的图像。 首先选中一个示例页面。 创建可供作者在Experience Workspace中编辑的内容。 请勿上传、推送或发布。
将示例URL替换为您自己的，对于Experience Manager创作，假定内容存储在JCR中。
如果新页面没有源网站，请参阅从Figma创建新页面：特定框架提供文本和资产以及设计。 这不同于将现有网站内容映射到新设计中。
重新设置现有站点的样式 existing-site
不需要新迁移。
-
连接现有项目和目标分支。 要求代理读取项目的设计约定、块和创作模型。
-
确定涵盖受影响模板和变体的基线页面。 记录其当前外观和重要交互。
-
说明更改的范围和必须保留的内容。 例如：
使用在
https://www.figma.com/design/AbC123/Brand-Refresh上批准的设计，重新造型此现有项目。 在/和/products上更改全局颜色和排版规则以及卡片演示。 保留内容、URL、模型、分析、键盘行为和集成。 重用我们的令牌和块。 首先显示建议的范围；请勿重新导入内容或上传、推送或发布。将示例URL和路径替换为您自己的路径。
-
首先更新共享令牌和全局样式，所做的更改将是全局的。 仅在需要时应用块特定的样式。
-
预览所有受影响的示例页面，而不仅仅是用于派生设计的页面。 包括移动设备宽度、长标题、缺少可选内容和不同的变体。 全局令牌更改会影响原始示例之外的页面，因此也包含这些页面。
-
如果设计需要结构或模型更改，请单独做出明确决定。 规划现有内容如何移动到新结构，而不是静默重写作者内容。
-
查看代码差异和项目检查，然后通过现有项目的工作流推送和交付。 样式更改为代码：它们会在分支合并到
main后立即访问实时网站，因此请首先检查分支预览URL上受影响的页面。 查看更改如何上线。
验证和恢复 validate
当内容保持正确、批准的设计按每个屏幕宽度工作、交互保持可用并且作者仍可以编辑、保存和重新打开示例页面时，将完成重新样式。 检查对比度、焦点、阅读顺序、图像含义以及项目的性能要求。 相似性得分不会决定这一点。
如果结果错误，请确定受影响的页面或块，并确定问题为令牌、共享样式、块样式、结构或内容映射。 修复该层并重新检查所有受影响的变体。 对于Figma访问错误，请检查节点链接、文件权限、令牌，并检查项目的Figma导入是否已打开，然后重试。
通过项目的Git工作流还原不需要的代码。 单独还原任何更改的远程内容；代码还原不会撤消上传。 保留基线，直到重新样式被注销。
使用项目切换移交批准的引用及其版本、更改的文件、受影响的页面、模型和内容更改、检查结果、已知空白以及如何恢复代码和内容。