AI 建站时代，网页开发已经不再是难题，现在的矛盾已经转移到如何精准控制 AI 开发想要实现的效果，并且能够最大化性能，减少浪费服务器资源的行为。日常过程中，通过 AI 开发经常会遇到各种各样的问题，这些问题主要在于网页开发不够规范，AI 随意发挥。下面我整理了一些常用的提示词，用于规范 AI 的网页开发。
页面还原 Prompt
使用场景：有些外部合作需要搭建的网页，使用对方提供的代码进行部署搭建时应遵守以下规范，实际情况会更复杂，需要根据情况进行调整。
- 使用 Elementor MCP 创建；
- 充分使用 Elementor 原生组件和自身的样式设置，不能实现的先用elementor 创建基础元素，再用额外的css 或者 js 实现效果，尽量使用 elementor 原生组件；
- 网页中涉及的素材直接添加到本地的 wordpress 素材库并在代码中调用，避免使用外部资源；
- 代码要求精简，性能最大化；
- 要求页面还原程度95%以上，完成后可以调用浏览器检查页面的效果对比原页面；
- 顶部和底部导航均采用官网的样式，无需调整，如第三方网页有单独的导航，可以隐藏官网菜单；
- 所有的素材基于在网页中的实际显示宽度和高度进行压缩，所有非动图 gif 的图片格式需处理为webp；
- 字体采用官网本地已有字体部署，如果源网页采用非官网的字体需要进行替换；
- 要求页面还原程度95%以上，完成后可以调用浏览器检查页面的效果对比原页面，如果还原度不够请继续优化调整，调整3次以后仍有问题，直接输出结果并告知页面存在哪里问题；
- 网页始终保持草稿状态；
- 输出预览页面链接和编辑的入口。
基于 Elementor MCP 的网页开发
使用场景：需要在官网直接通过 MCP 开发页面。
- 使用 Elementor MCP 创建；
- 每次修改前查索引、修改后清理失效代码；
- 充分使用 Elementor 原生组件和自身的样式设置，不能实现的先用 elementor 创建基础元素，再用额外的 css 或者 js 实现效果，尽量使用 elementor 原生组件；
- 网页中涉及的素材直接添加到本地的 wordpress 素材库并在代码中调用，避免使用外部资源；
- 如果使用的是媒体库不存在的资源，基于在网页中的实际显示宽度和高度进行压缩，所有非动图 gif 的图片格式需处理为webp，在保持显示清晰的情况下最小化静态资源；
- 如果使用的资源是网站已有图片，请直接调用该资源，避免重复上传，占用服务器空间；
- 代码要求精简，实现网页性能最大化；
- 网页始终保持草稿状态；
- 输出预览页面链接和编辑的入口。
红线行为
- 禁止直接发布页面；
- 禁止修改其他页面；
- 禁止直接发布 php 代码，如果需要php代码实现需求，请先询问。