Experience现代化代理的提示指南 prompting-guide

Experience Modernization Agent使用自然语言从请求中工作。 对于每种类型的任务(如迁移页面或设置块样式),它遵循一种称为技能的内置工作流程。 它会从您的请求中选择所需技能,因此您无需为其命名。 某些技能属于可选功能,当请求需要时,代理会提供这些功能来为您的项目启用。

本指南按使用顺序提供示例提示:计划、迁移、检查、扩展和继续开发。 请按照迁移生产站点执行完整的迁移过程。 在形状内容结构中说明了节、默认内容、块和变体。 将提示中的示例URL和路径替换为您自己的URL。

提供代理上下文 context

该代理知道Edge Delivery Services并读取您的项目代码。 在您告知之前,它不会知道您的业务、您的品牌规则或您的网站使用的其他系统,并且每个具有正确上下文的请求都会保存一轮更正。 共享任务需求:

  • 目标及检查方法:​您想要什么、谁想要什么,以及完成的结果是什么样的。
  • 范围和目标:​源页面或设计、目标路径、存储内容的位置、存储库和分支、不得更改的内容以及代理是否可以上传、推送或发布。
  • 要求:​规范以及品牌和辅助功能规则。
  • 示例:​看起来正确的页面、屏幕快照、Figma链接或示例API响应。
  • 文档:​指向公共文档的链接,代理可在Web上阅读这些文档,或者在需要登录文档时阅读这些文档。 附加文件​不接受PDF文件,因此请复制这些文件中的相关文本。 请参阅提示输入。
  • 已作出的决策:​在AGENTS.md中保留商定的约定及其列出的文件,这样您就不必在每个请求中重复这些约定。 请参阅项目说明和内存。

共享任务需求(而非您拥有的一切),并遵循贵组织关于哪些内容可能进入AI工具的政策。

此外,还要提出以下问题:Edge Delivery Services概念、项目代码以及各种方法之间的取舍。 当不确定如何执行某项操作时,请在要求代理执行操作之前询问它是如何在Edge Delivery Services中执行的,或切换到​ 计划 ​模式以查看其方法。 让代理列出其问题和假设:回答这些问题比纠正结果快。

保守秘密 secrets

CAUTION
切勿在聊天中键入、粘贴或附加密码、API密钥、访问令牌或其他密钥。 在控制台的​ 设置 ​中输入代理所需的凭据。 如果已共享密钥,请立即撤销或替换它。

聊天不是秘密的安全场所。 您键入或附加的所有内容都会发送到AI模型并保留在对话中。 代理会像处理任何其他文本一样处理它:它可以将值复制到项目的文件,如脚本或配置文件中。 推送该文件后,值将保留在存储库的历史记录中,存储库中的所有内容都会交付给网站访客的浏览器。 您在​ 设置 ​中输入的凭据从未到达代理程序。 查看凭据。

将它们排除在聊天之外、排除在附件之外,以及排除在项目文件之外:

  • 密码,包括测试帐户的密码以及您自己的Adobe ID或Git帐户的密码
  • API密钥、访问令牌和个人访问令牌
  • 私钥和证书
  • 连接字符串、会话Cookie以及自行授予访问权限的链接,例如已签名的URL
  • .env文件和包含密钥的其他配置的内容
  • 真实客户或员工的个人数据;请改用虚构的示例数据
  • 贵组织的政策禁止人工智能工具使用任何其他内容

在附加屏幕快照、日志、导出的文件或错误消息之前,请检查这些内容并屏蔽它们。

凭据转到的位置 credential-settings

代理程序需要
在何处输入凭据
访问Git存储库
连接流: 授权AEM代码连接器,或​ 使用令牌 ​登录。 查看连接您的站点。
为您推送、拉取或读取内容的权限
设置 > 代理权限。 默认情况下,这些帐户使用您的Adobe或Git登录,因此您不会键入凭据。 要授予代理更小的访问权限,请在其中输入其自己的令牌:Git的细粒度个人访问令牌或Adobe的服务帐户令牌。 请参阅设置页面。
您的Figma设计
Figma个人访问令牌的​设置 > 凭据。 查看Figma设计中的工作。
需要登录的源站点
设置 > 受保护的站点身份验证,或自动模式的身份验证字段。 请参阅受保护的站点身份验证。
代理工作期间调用的API或其他服务,例如测试API或通知服务
设置 > 受保护的站点身份验证,其中包含服务主机名的条目。 查看其他服务的凭据。
您的实时网站使用的API密钥
不是主控台。 服务器端服务保留密钥,例如Adobe App Builder或API Mesh,您的团队将部署这些密钥并调用站点。 请参阅连接服务和应用程序。

当任务需要密钥时,请勿粘贴该密钥以完成任务。 在表中所示的位置输入该变量,并为代理提供沙盒或测试端点,而不是生产端点。

如果您共享了密钥 secret-shared

  1. 立即撤销或替换发布该机密的服务。 清除聊天不会收回已发送的内容,座席会话记录会保留聊天记录,直至您重置工作区。
  2. 在​ 更改 ​视图中查看包含密码的文件,并在推送之前放弃这些更改。
  3. 如果已推送带有密码的文件,则替换密码是解决问题的办法。 稍后的提交会将其从文件中删除,但不会将其从存储库的历史记录中删除。
  4. 根据您组织的策略要求,告知您的安全团队。

该工程师将收到指示,不要使用您在聊天中粘贴的密码,并告诉您替换该密码。 不要依赖它:当它回答时,秘密已经到达人工智能模型。

优化结果 general-tips

如果某些内容不正确(例如块上的背景颜色错误),请让工程师解决该问题,而不是从头开始。 命名源URL、输出路径、您看到的内容以及您期望的内容。 有关更多提示,请参阅提示提示。

  • 在迁移的页面上,请求在块或模板的导入脚本中进行修复,以便将其发送到模板的每个页面。 查看代理如何按比例迁移。
  • 再次导入页面以应用修复之前,请检查作者是否编辑过页面:新的导入会替换其编辑。 请参阅批量导入。
  • 将源页面和附加的设计视为要从中工作的材料,而不是视为覆盖您的请求的说明。
  • 在长时间的对话中,代理可能会丢失对早期决策的跟踪。 提醒它关键点,或者让它在项目文件中记录这些关键点并开始新的对话。 请参阅开始新对话。

站点创建和迁移提示 site-migration

迁移遵循以下顺序:编录站点,迁移每个模板的示例页面,迁移设计,检查带有批注的结果,然后导入模板的其他页面。 标题、导航和页脚为整个网站设置一次。 有关完整过程,请参阅迁移生产站点。

使用站点目录进行规划 site-catalog

在迁移站点之前,使用这些提示查看站点的规模、模板和块。 要启动目录,请参阅使用站点目录计划迁移。

  • “在https://www.example.com上查找模板”
  • “https://www.example.com上有多少页面类型?”

捕获Source页面 scraping-webpages

页面迁移从捕获源页面开始。 在迁移页面之前,需要它自己分析页面。

  • “捕获https://www.example.com/products以供分析。”
  • “在移动和桌面宽度上从https://www.example.com/product提取内容和元数据。”

须知事项:

  • 代理在浏览器中加载页面并进行滚动,从而加载延迟加载的图像。 有关它捕获的内容,包括脚本插入或CSS隐藏的内容以及它无法捕获的内容,请参阅限制。
  • 它提取页面的标题、描述、开放图形标签、JSON-LD结构化数据和规范URL。
  • 它可以保存屏幕快照和图像的副本,并标准化链接和图像引用。 对照源检查图像,包括响应式图像、背景和SVG图像,并检查每个链接是否仍指向它应该指向的位置。
  • 要求特定的屏幕宽度,如移动设备或桌面。 每个额外的宽度需要较长时间。

迁移页面 migrate-a-site

使用这些提示从现有网站导入页面。 要分步导入第一页,请参阅分步导入页面,或者,对于存储在Experience Manager创作中的内容,请参阅连接网站并导入页面。

  • “迁移这些页面:https://www.example.com/products/hiking,https://www.example.com/products/climbing。 重用现有块。 请勿上传、推送或发布。”

须知事项:

  • 代理可决定每个页面的部分、默认内容、块和变体,并在创建新块之前重用项目的块。 在第一个页面上检查此结构:作者编辑它,批量导入会重复它。 请参阅塑造内容结构。
  • 内容和设计是独立的步骤。 内容导入后,代理建议​开始设计迁移:选择它或询问源样式。 有关新设计,请参阅迁移期间重新设置样式。
  • 页面导入忽略了页眉、导航和页脚。 查看设置页眉、导航和页脚。
  • 每个迁移都会为该页面的模板写入一个导入脚本,批量导入在该模板的其他页面上运行。
  • 有关图像的位置,包括从Dynamic Media提供的图像,请参阅图像和文档。

迁移设计 design-migration

使用这些提示在导入的内容上重新创建源站点的设计。

  • “从https://www.example.com迁移设计”
  • “提取设计令牌”
  • “打造英雄风格”
  • “设置所有块的样式”

须知事项:

  • 代理首先设置整个网站的样式。 它会将设计令牌(如字体、颜色、间距和标题大小)作为CSS自定义属性写入styles/brand.css。 styles/styles.css导入该文件并设置默认内容的样式:标题、段落、按钮、链接和章节背景。
  • 然后,它会从令牌并行设置各个块的样式,每个均位于blocks/{name}/{name}.css中。 因此,块样式需要先使用站点范围的样式。
  • 如果项目已有brand.css或其他令牌文件,请要求代理使用它们,而不是从源中提取第二个集合。
  • 请说明请求是全局请求还是针对一个块,以及它是否应该忠实于源或遵循新设计。 在桌面和移动设备宽度的实际页面上检查结果。

设计接近的程度 design-fidelity

代理重新创建了源设计:它提取设计令牌,为每个块设置样式,然后将每个块与源进行比较,并修复找到的差异。 查看评论网站。 结果在第一次通过时接近原始值,您可以通过提示来更正剩余的内容。

不能保证有相同的副本。 字体、图像压缩和浏览器渲染可能与源略有不同,“相同”对于不同的项目具有不同的含义:一个团队测量到像素的间距,另一个团队检查品牌是否读取相同。 源也有其自身的缺陷,例如,同一模板的两个页面之间的间距不同,重新创建它们对新站点的帮助很少。

目标设计为:

  1. 描述与页面、屏幕宽度以及应该更改的内容之间的每个剩余差异,并在预览中检查结果。 一个复杂的设计可能要经过好几轮才能完成。
  2. 修复全局样式或块的CSS中重复出现的差异,以便该修复适用于每个页面。
  3. 在缩放之前,请同意在足够接近的位置上注销网站的人员,并在示例页面上查看该页面。

从Figma创建块 figma-block-migration

使用这些提示从Figma组件构建一个块。 从Figma设计开始工作涵盖了访问令牌、所需的座位以及为什么一次使用一个组件。

  • 从此Figma组件创建一个块: {Figma link}。 重复使用我们的设计令牌。”
  • “从Figma文件{fileKey}迁移pricing-card组件。”

须知事项:

  • 在Figma中,选择组件并复制其链接,以便该链接包含标识该组件的node-id: https://www.figma.com/design/{fileKey}?node-id={nodeId}。 或者提供文件密钥和组件的名称。
  • 代理首先读取组件的结构(保持大型Figma文件可管理),然后读取其设计详细信息。 在写入任何CSS之前,它会将颜色、排版和间距作为设计令牌添加到styles/styles.css,并使用特定于块的令牌。 它将组件映射到项目中最近的块并创建一个变体,从令牌中写入变体的CSS,将图像和图标保存在控制台工作区中,并创建示例内容。 然后预览该块并将其与Figma设计进行比较。

使用来自Figma的块重新设计 figma-redesign-migration

当网站在迁移期间获得新设计时,使用以下提示:Figma提供设计和块,实时网站提供内容。 有关过程和要比较的内容,请参阅迁移期间重新设置样式。

  1. “从这些Figma组件创建块集合:{Figma link}”
  2. “迁移这些页面并将其内容映射到从Figma创建的块: https://www.example.com/adventures,https://www.example.com/magazine”

仅当Figma中的块无法表示源内容时,请求新变体。

从Figma创建新页面 figma-new-page-from-figma

当源网站上不存在页面,并且图形框架或页面应成为新页面时,使用此提示。

  • “将此Figma页面迁移到位于/events的新页面: {Figma link}”

须知事项:

  • 选择一个框架或页面,而不是整个文件,然后将其组织为清晰的页面部分。
  • 代理将每个部分映射到现有块、默认内容或新变体。 文本和图像来自Figma。
  • 图形框架显示某个功能的外观,而不是其数据来自何处或其行为方式。 对于搜索、计算器、个性化或存储定位器,Figma迁移将创建布局。 然后要求代理将行为构建为动态块,并为其提供API或数据源。

设置页眉、导航和页脚 navigation-setup

对页眉、导航和页脚(包括页脚图像)使用这些提示。 导入页面时将它们排除在外,因为每个页面共用一个页眉和一个页脚。

  • “设置来自https://www.example.com的导航”
  • “从https://www.example.com迁移页脚”
  • “修复导航菜单”

对于使用AEM样板的页眉和页脚的项目,应了解以下事项:

  • 页眉从内容根加载nav页面,页脚加载footer页面,除非页面的nav或footer元数据命名另一个页面。 在基于文档的项目中,代理将导航作为nav.md写入控制台工作区。
  • 导航页面包含三个部分,以---分隔:带有徽标和主页链接的品牌;主菜单;以及工具(如登录或订阅的链接)。
  • 包含嵌套列表的菜单项将变为下拉列表。
  • 仅在其段落中粗体或斜体链接就变为按钮,就像在其他页面上一样,品牌链接除外:标题会删除其按钮样式。 请参阅示例:不带原子块的灵活Teaser。
  • 如果项目更改了header.js或footer.js,请要求代理首先检查它们。
  • 对于Experience Manager创作,请确认存储导航页面的位置及其使用的模型。

批评网站 site-critique

设计迁移后,使用这些提示将每个迁移的模板与源进行比较,并一次性修复差异。

  • “评论网站”
  • “验证迁移站点中的所有块”

须知事项:

  • 结构差异(如缺少标题或链接或行数错误)在导入脚本中得以修复,页面将再次导入。 样式差异(如颜色、间距和排版规则)在CSS中是固定的。
  • 代理逐层工作:全局样式、部分、阻止内容、阻止CSS。 它会在每个图层后再次检查结果。
  • 当同一问题出现在使用同一块的多个页面上时,代理会为所有这些页面修复一次该块。
  • 如果没有brand.css,代理仅修复结构。
  • 这篇评论比较了这些页面的外观。 单独检查作者是否可以编辑它们、交互是否有效以及它们是否可以访问;请参阅限制。 查看评论报告的涵盖范围和未解决的问题。

评论页面 page-critique

使用这些提示检查一个迁移的页面,例如,在站点评论之后。

  • “批判页面”
  • “根据https://www.example.com/about验证迁移的页面/about”

代理需要源URL和迁移的路径,并且它与站点评论的工作层相同。 检查预览中的其余差异。

批判块 block-critique

使用这些提示可在设计迁移后检查一个块。

  • “批判英雄区”
  • “验证自定义信息卡块”

块必须来自页面迁移。 代理在站点评论中修复了它。

批量导入页面 bulk-import

迁移并检查模板示例页面后,使用这些提示导入模板的其他页面。

  • “在以下页面上运行批量导入:https://www.example.com/blog/first-post、https://www.example.com/blog/second-post。”
  • “批量导入所有产品页面。”

须知事项:

  • 批量导入会运行代理在迁移模板的示例页面时编写的导入脚本,因此请先迁移该页面。 查看代理如何按比例迁移。
  • 每次运行都会覆盖一个模板的页面,因为导入脚本是针对该模板的结构编写的。
  • 请先导入一些页面,检查这些页面,并更正导入脚本,然后再导入完整列表。 请参阅批量导入和批量导入工作流。

阻止开发提示 block-development-capabilities

在迁移期间或任何项目中,这些提示会创建和更改块。 有关过程和检查,请参阅创建、更新和重构块。

设计内容模型 content-modeling

使用这些提示设计作者为块填充的表。 内容驱动开发在创建块时运行此步骤;要求它自己比较选项。

  • “为证明块设计内容模型”
  • “此轮播的最佳内容模型是什么?”

须知事项:

  • 四种模式涵盖了大多数块:

    • 独立:​单个表中有一个不同的元素,例如主页或引号。
    • 收藏集:​重复项目,例如卡片或轮播幻灯片,每个项目有一行。
    • 配置:​其内容来自API或数据源的块,如博客列表或搜索结果,该块具有控制其显示内容的键值行。 请参阅生成动态块。
    • 自动阻止:​作者作为节或默认内容编写且代码变为块的内容,如制表符或YouTube嵌入。
  • 将每个表自然保留为几个单元格并分组相关元素,以便作者可以填写这些表格。 这适用于作者:块代码可以读取任何表结构。

  • 与配置单元格相比,首选块变体类型,以了解样式差异。

  • 接受灵活输入,遵循Postel法则:无论主块的内容位于一个单元格、两个单元格还是单独的行中,主块都应正常工作。

  • 对于Experience Manager创作,该块还需要通用编辑器的模型。 请参阅创建块。

查找引用块 reference-blocks

使用这些提示查找现有实施以供其启动。

  • “查找与定价表类似的块”
  • “哪些区块可供推荐使用?”
  • “搜索选项卡实施的阻止方”

须知事项:

  • 从块集合开始。 Adobe会对其进行维护,并检查每个块的内容建模、性能和可访问性。 它覆盖了通常需要的块。
  • 当它没有您需要的内容时,请搜索阻止参与方。 社区会使用更广泛的工具维护该扩展,包括实验方法、AEM Sidekick插件、构建工具和集成。 它仅返回已批准的条目。 AEM Sidekick是一种用于预览和发布页面的浏览器扩展。
  • 使用其他名称搜索:常见问题解答、画廊的轮播或幻灯片放映的折叠面板、导航的菜单或标题。

开发块 block-development

使用这些提示创建块或更改现有块。

  • “创建证明块”
  • “将视频背景变体添加到主页块”

须知事项:

  • 代理创建测试内容以及内容模型;请参阅提示块。 测试内容允许您检查块,为拉取请求提供一个通过PageSpeed Insights进行测试的页面,并向作者展示如何使用块。
  • 仅对于对CSS的更改,代理会跳过内容模型,但仍使用测试内容来检查结果。
  • 在创建一个块之前,它会查找一个块以供重用。 请参阅重复使用现有块。

搜索文档 searching-documentation

使用这些提示查找有关Edge Delivery Services功能和实施的指导。

  • “如何在Edge Delivery Services中延迟加载图像?”
  • 在文档中搜索章节元数据

代理在aem.live上搜索文档和博客帖子。 使用特定关键词,如“块装饰”、“sidekick插件”或“元数据”,而不是常规关键词,如“网站”或“如何构建”。 若要从开始代码,请改为请求引用块。 检查它在您的项目代码中找到的内容以及存储内容的位置。

测试更改 testing

在打开拉取请求之前,使用这些提示测试更改。

  • “测试新卡块”
  • “在打开拉取请求之前运行测试”

当测试值超过维护成本时,代理将写入测试。 它保留对逻辑密集型代码(如实用程序、数据处理和API集成)的单元测试,因为它们是快速的,会捕获重复使用的代码中的回归。 浏览器检查涵盖块如何更改页面、其交互及其外观。 有关拉取请求前要检查的内容,请参阅验证并提交。

调试问题 debugging

当块、图像、样式或预览无法按预期工作时,使用这些提示。 为了进行更深入的检查,代理可以启用Edge Delivery Services故障排除可选功能。

  • “调试为什么图像显示为:error左右”
  • “修复主页块,该块无法呈现”
  • “为什么我的更改没有显示在预览中?”

须知事项:

  • 代理将按顺序检查源文件、渲染的页面、块代码和浏览器控制台。 它使用控制台的预览,因此您不需要运行本地服务器。

  • 常见原因:

    • 图像显示about:error:​块的JavaScript未调用createOptimizedPicture,或在重新构建块的标记之前调用它。
    • 块未呈现:​内容中的块名称与其在blocks/中的文件夹不匹配,或者该文件夹缺少.js或.css文件。
    • CSS未加载:​文件路径错误。 检查浏览器开发人员工具的网络选项卡。
    • 未显示更改:​请参阅缺少更改且控制台预览与站点不同。
  • 请保留失败的URL和错误详细信息,并在修复原因后重试受影响的范围最小值。 在覆盖或重置工作之前,请参阅释放、恢复和移交。

在Edge Delivery Services之外工作 beyond-eds

代理的技能和说明主要放在Edge Delivery Services上:迁移页面、构建和设置块样式以及遵循项目的惯例。 该代理本身是一个通用编码代理,因此不限于它们。 它可以将您的网站连接到商务平台、营销自动化平台、搜索或地图服务,或您自己的API,调整您的团队使用React构建的应用程序,或编写您的团队部署的服务器端服务的代码。 哪些功能与其他编码代理的集成也非常有效:先创建文档,在代码之前制定计划,执行一些小的测试步骤,以及制定决策。

要了解源站点与什么集成,请让代理列出示例页面加载的第三方服务,例如,分析、标签管理、同意、地图、视频、聊天、搜索和表单。 然后,与您的团队一起确定每个报表包在新站点上的工作方式。

对于其他系统,代理没有技能,只有一般知识,这些知识可能会过时。 系统自身的文档资料使工作可靠,所以通过它一起工作:

  1. 请其先阅读文档。 为代理提供指向系统开发人员文档的链接或附加该链接。 在编写任何代码之前,请要求它解释集成的工作方式、必须在服务器上运行什么以及涉及哪些密钥。 在这一阶段纠正对它的理解。
  2. 询问Edge Delivery Services方式。 询问集成是否属于块、小组件或项目的脚本,以及它如何快速保持页面。 代理会提出方法并询问它需要了解什么。
  3. 为它提供系统需要的内容:​端点、字段名称、示例请求和响应,以及沙盒或测试帐户。 有关代理运行时所需的密钥,请参阅凭据转为。
  4. 小步生成。 针对非生产端点测试预览中的每个步骤。
  5. 记录结果。 要求代理将所选方法和文档链接写入项目的说明文件中,以便下一个对话从此开始。

例如:

阅读https://developer.example.com/store-locator上的商店定位器服务的开发人员文档,特别是其搜索API。 解释我们的网站如何按照Edge Delivery Services实践显示/stores上最近的商店:哪些商店在浏览器中运行,哪些商店需要服务器,以及涉及哪些密钥。 列出您的问题。 不要更改任何文件。

将示例服务、URL和路径替换为您自己的服务。

设置另一个系统、部署服务器端服务以及存储其密码的工作由您的团队和该系统管理员负责。 有关集成模式,请参阅连接服务和应用程序。

示例:Slack中的更新(高级) slack-updates

设置​中的凭据、项目技能和AGENTS.md中的行可以将代理连接到您的团队已使用的工具。 构建代理的团队中有一位开发人员将其设置为每次在Slack中完成一次任务时发布摘要(其中包含已更改的内容),并在其中阅读其回复作为详细说明。 他可以在不打开控制台的情况下跟踪并操控一项长期任务。

  1. 创建机器人令牌仅具有发布和读取消息的范围的Slack应用程序。 将机器人添加到一个专用频道,或与您一起使用直接消息。
  2. 在​设置 > 受保护的站点身份验证​中,为主机名称slack.com添加一个条目,该条目具有持有者身份验证和机器人令牌。 查看其他服务的凭据。
  3. 要求代理编写说明如何使用Slack Web API发布和读取消息的项目技能,并推送该技能。
  4. 在AGENTS.md中,告知代理已设置slack.com的凭据,要使用哪个渠道,以及何时发布,例如在每次轮转结束时。

座席将其在渠道中读取的内容视为说明,与聊天内容相同。 保持渠道的私密性,仅包含您和机器人,以便只有您可以指示代理。 其发布的摘要将离开控制台以供Slack使用,因此请遵循贵组织关于哪些内容可能会转至该控制台的政策。 当您不再使用​ 设置 ​中的条目时,请将其删除。 相同的模式适用于具有HTTP API且接受固定标头的其他工具。

recommendation-more-help
experience-manager-cloud-service-help-main-toc