指令库：解决网页构建中的重复性难题
搭建网站时，很多人发现自己在不同页面间不断复制粘贴同样的操作要求。比如在调整模块风格时，要反复叮嘱保持原有设计；在提交给客户审阅前，又得逐项检查布局细节。Divi AI Agent 的指令库（Commands）功能正好解决了这个痛点。它允许用户将常用的操作逻辑保存下来，下次遇到类似任务时直接调用，无需重新输入长篇提示词。
以下整理了 10 条针对常见网页任务的实用指令。每条指令都说明了适用场景，并提示了在使用时需要补充的具体细节，帮助用户快速建立自己的工作流。
理解 Divi AI Agent 指令的工作原理
Divi 5 的可视化编辑器内置了 AI Agent，用户可以用自然语言描述需求，让 AI 执行添加板块、调整参数或审查布局等操作。关键在于，这些对话可以被固化为“指令”。
创建指令的过程很直观：在 Agent 聊天窗口打开指令列表，点击“新建指令”，填入标题和具体的操作说明，保存即可。使用时，在输入框打出斜杠 /，从列表中选取对应指令，再补充当前的具体上下文（Context），AI 就会结合预设逻辑和实时信息执行任务。
10 条可复用的高效指令模板
在设计这些指令时，有一个核心原则：明确告知 AI 在何处操作、期望达到什么效果，和哪些部分必须保留。附上相关的上下文参考（如现有板块或预设样式）能极大提高执行准确度。建议每条指令在正式存入库前，先在测试页面上验证一次。
模式选择提示：涉及创建或修改元素、更新设计资源的指令（第 1、2、4-7 条）建议使用构建模式（Build Mode）仅用于报告问题、不直接改动页面的指令（第 3、8-10 条）建议使用询问模式（Ask Mode）。特别是第 6 条关于变量转换的指令，执行前需人工复核。
1. 基于现有风格新建内容
当需要在现有页面添加新的板块、行或模块时，直接让 AI 参考已批准的现有设计是最稳妥的方法。该指令要求 AI 识别参考对象中的排版、配色和间距，并复用现有的预设（Presets）和全局变量（Global Variables），确保新内容与旧风格统一。
指令逻辑：根据附加消息中的描述构建元素。检查指定的设计参考，匹配相关的字体、颜色、间距等设置。复用兼容的现有预设和全局变量，不要修改它们的定义。遵循消息中指定的内容、结构、位置和响应式要求，保持现有元素不变。如果需求、位置或参考不清晰，先提问。临了总结创建了哪些内容，和使用了哪些现有资源。
应用示例：以一个房地产网站为例，将“值得信赖的专业经验”板块作为上下文。要求 AI 在“认识我们的专家团队”上方插入一个“运作流程”新板块，包含三个编号步骤，解释购房过程。附带消息中提供了标题和步骤名称，要求 AI 撰写简短描述，并设定桌面端三列显示、手机端垂直堆叠。AI 完成构建后，检查它复用了哪些预设和变量，这些连接关系能让新元素在未来风格更新时自动同步。
2. 创建设计变体而不覆盖原版
有时需要尝试不同的视觉方案，但希望保留原版以便对比或给客户选择。此指令通过复制元素并仅对副本应用修改，实现 A/B 测试效果。
指令逻辑：复制指定元素，放置在我指定的位置。仅对副本应用请求的设计更改。保留其内容、结构和我未要求修改的所有设置。不要修改共享的预设或全局变量定义。使用局部覆盖（Local Overrides）来处理变体，保持原始元素和页面其余部分不变。如果目标、位置或请求的更改不清晰，先提问。总结原版与变体之间的差异。
应用示例：附加 Jenny Smith 英雄区域作为上下文，要求在其下方复制一份，并应用更适合时尚作品集的浅色调、柔和色彩。让 AI 决定背景、文本和按钮颜色，但保持内容、图片、排版、布局和间距不变。AI 将变体放置在原版下方，便于直观对比色彩选择。如果原版使用了锚点链接或元素 ID，需检查副本中的这些属性，确保每个元素 ID 的唯一性，避免冲突。
3. 页面与设计稿的偏差比对
在页面开发与最终设计稿核对时，可以让 AI 找出差异并提出修正建议，而不是直接动手改。这样既安全又高效，还能聚焦于具体需要细看的元素。
指令逻辑：将指定页面或元素与我提供的设计参考做对比。审查我指定的设计设置，或未指定时检查相关的布局、排版、颜色、间距和图片位置。按元素或位置报告有意义的差异，并为每个差异建议修正方案。优先列出对整体设计影响最大的差异。区分可观察到的差异和你无法验证的部分，并考虑视口大小造成的差异。如果目标或参考不清晰，请提问。不要做任何更改。
应用示例：测试时，将之前创建的浅色调 Jenny Smith 英雄区域作为审查对象，以原设计截图作为参考。附带消息明确指出了要审查的变体部分和作为基准的原版。AI 输出了差异报告，而非直接修改代码，方便开发者逐条核对。
