1. 为什么你写的网页 prompt 总是达不到预期
先聊聊我自己的坑。最初用 AI 生成网页时，我也跟大多数人一样，把需求噼里啪啦一顿写：要一个响应式导航栏、要渐变背景、要轮播图、要滚动动画、要深色模式……然后满怀期待地点击发送，最后出来的页面，怎么说呢，像是一个从 2015 年穿越过来的老古董网站，结构凌乱得像草稿纸，CSS 类名全是用 a1、b2、c3 这种毫无意义的命名，更别提什么可维护性了。
反复试了几十次之后，我发现自己总是在重复同一个错误——堆 prompt。以为把需求写得越长越细，AI 就能理解得越透彻，结果反而是信息过载，模型抓不住重点，输出质量越来越差。这个问题的本质是：我们人类写需求文档的习惯是"想到什么说什么"，但大语言模型理解指令的方式跟人类完全不一样，它更擅长处理结构化的、有逻辑层次的信息，而不是一堆零散需求的堆砌。
后来我才慢慢意识到，给 AI 下指令做网页，真正的核心不是"写得有多详细"，而是"结构有多清晰"。同一个需求，你换一种方式表达，出来的效果可能天差地别。这也是为什么明明大家都在用 AI 做网页，有些人几分钟就能出一个效果不错的页面，有些人却对着提示词修改半天仍然不满意。
这篇文章就是要把我这段时间摸索出来的 25 个实战技巧完整梳理一遍。不搞抽象理论，全部是可落地、可复制、照着抄就能用的东西。不管你是刚开始接触 AI 编程的新手，还是已经用过一段时间但总觉得差了点火候的老手，这里面应该都有对你胃口的技巧。
注意：这些技巧主要适用于用 Claude、GPT-4 等大语言模型直接生成网页代码的场景，部分技巧对 VS Code + AI 插件、或者 Cursor 这类 AI 编程工具也完全适用。
2. 根因：把 AI 当成"外包程序员"，而不是"训练营学员"
在讲具体技巧之前，我先把一个影响全局的认知问题掰开揉碎。
大多数人用 AI 做网页时的心态是：我已经告诉你要做什么了，你就给我一个完整的结果。这本质上是一种"外包思维"——把 AI 当成熟练工，给个需求说明就等着收成品。但现实是，现在的 AI 模型更像是一个知识渊博、悟性极强但经验不足的"新员工"。它知道很多技术概念，但不知道怎么把你的抽象需求落地成具体决策。
举个例子：你说"做一个小清新的个人主页"，这个需求在 AI 眼里其实是模糊的。小清新是配色清新？排版留白多？还是整体氛围文艺？它不确定，就只能猜，然后挑一个它认为最合理的默认方案。这个方案可能恰好不是你想要的，于是你继续压缩 prompt，试图通过"加更多描述"来修正方向，但 prompt 越长，AI 越容易在细节里迷路，最后给你一个四不像。
真正有效的思路是换个角度：把 AI 当作一个需要你带领的学员——你要给它明确的目标、清晰的上下文、分批次的反馈循环，而不是一口气把所有要求全部倒给它。
这句话说起来简单，做起来需要一套方法。下面这 25 个技巧，本质上都是在帮你实现从"外包思维"到"带人思维"的转变。有些是关于 prompt 结构本身的，有些是关于交互节奏的，还有些是关于验证和纠错的。我按适用场景分成了四个模块：基础认知、结构设计、迭代交互、高阶实战。每个技巧我都会给出具体的示例和我在实际使用中踩过的坑。
3. 基础认知篇：重新理解 AI 的工作方式
3.1 技巧 1：把 prompt 当成"需求文档"来写，而不是"聊天消息"
这是我调整之后收益最大的一个改变。以前的 prompt 风格是："帮我做一个好看的登录页面，要有背景图，最好还能带动效，配色高级一点。"这种写法的问题在于信息密度太低，AI 只能自由发挥。
后来我改成需求文档式写法，结构大概是这个样子的：
- 角色设定：你是一名资深前端工程师
- 项目背景：这是一个面向年轻用户的在线笔记应用
- 页面目标：登录页需要传达简约、高效的产品气质
- 技术约束：使用原生 HTML/CSS/JavaScript，不引入框架，全端适配
- 设计风格：以白色为主色调，搭配浅灰色分割区域，主按钮使用蓝色系
- 功能清单：邮箱密码登录、记住我复选框、注册入口、第三方登录图标
- 输出格式：单个 HTML 文件，内嵌样式与脚本，附简要注释
这样写完，AI 的处理难度其实变小了。因为它不需要在模糊描述里去猜你的审美和功能期望，所有关键决策点都被你提前锁定了。我实测下来，同样的需求用这种方式写，一次生成质量提升非常明显，至少从"完全没法用"进步到"需要小改"的水平。
3.2 技巧 2：不要一次塞进所有要求，要分清"必须的"和"可选的"
很多人写 prompt 的时候有一个习惯：把自己能想到的所有要求全写进去，觉得写得多 AI 就能做得全。但这个习惯恰恰是页面质量不稳定的根源之一。
我的做法是把需求按优先级拆成三类：
- 硬性要求（必须满足，否则页面不能用）：布局结构、核心功能、技术环境
- 软性要求（影响体验，但可接受不同方案）：动效风格、渐变色深度、圆角大小
- 加分项（有则更好，不影响主流程）：SEO 标签、无障碍支持、代码注释
当硬性要求和软性要求同时塞给 AI 时，它往往会在处理软性要求上花太多精力，反而忽略了硬性要求。比如你既要求"响应式布局"又要求"卡片翻转动画还带光效"，AI 很可能把大部分 token 花在动画上，响应式反而做得很敷衍。我自己遇到的最典型的例子是：让它做一个"带粒子背景的注册页"，结果粒子效果确实炫酷，但表单在小屏幕上完全错位了——因为我把粒子和响应式同时放在了 prompt 里，它优先处理了视觉上更显眼的需求。
现在我的做法是：第一轮 prompt 只强调硬性要求，等页面结构稳定后，再用"追加需求"的方式逐步加入软性要求和加分项。一次只让它专注解决一件事，质量会稳很多。
3.3 技巧 3：给 AI"举例说明"，比抽象描述有效 10 倍
如果你想的是某种具体的视觉风格或交互效果，光靠形容词是不够的。"现代感""高级感""科技感"这类词在 AI 眼里其实非常模糊。所以我强烈建议给出参考例子，这比任何形容词都管用。
比如你想要苹果官网那种简洁大气的风格，可以直接写：
- 风格参考：类似 Apple 官网的结构化排版，大留白、大字号、部分元素悬浮
- 或者参考某个具体网站：可以参考 Stripe 官网首页的 hero 区域排版方式和配色逻辑
我在做一个小型 SaaS 产品落地页时，prompt 里写"高级感、国际化、简约大气"这些词，AI 出来的效果永远是模板感很强的后台管理界面风格。后来我在 prompt 里加了一句"参考 Linear 官网的设计语言"，页面整体质感瞬间就对了。这个技巧的本质是：AI 对具体产品和网站的设计风格是有记忆的，你把记忆激活，比你自己费劲描述半天高效得多。
注意：给 AI 参考网站时，尽量选择它训练数据中覆盖较多的知名网站，一些小众网站它可能并不知道长什么样。
3.4 技巧 4：分阶段使用 prompt，而不是一次性要求完整产出
这是我在反复踩坑后养成的习惯：做一个稍微复杂的页面，我会主动把它拆成"结构 → 样式 → 功能 → 精细调整"四个阶段，每一阶段只输入一个子目标。
以前的做法是让 AI 一次性生成一个完整页面，但它生成的代码往往会有各种隐藏问题：CSS 类名混乱、脚本报错、响应式遗漏。后来我改成先让它生成 HTML 骨架，我确认结构没问题后，再让它加 CSS 样式，然后再加 JavaScript 交互，最后统一调整细节。每个阶段的信息量相对集中，模型犯错的概率反而大幅下降。
举个具体例子：有一次我需要一个多步骤的表单页面，如果一次性要求做出来，AI 通常只是简单地把三个步骤放在同一页里或者用 tab 切换，交互质量很差。但我拆成三段后，效果完全不一样——第一步先确认三个步骤的表单域，第二步加入卡片式步骤指示器和切换动画，第三步添加表单验证和进度反馈。每一步都很清晰，最终结果非常干净。
4. 结构设计篇：让 prompt 自带"骨架感"
4.1 技巧 5：用分隔符明确区分不同的语义区块
大语言模型处理 prompt 时，对信息的"组织感"非常敏感。如果你把角色设定、背景说明、功能需求混在一大段话里，它可能会丢失部分信息。我的做法是用分隔符划分不同语义区块，最常见的做法是使用 XML 标签或者 Markdown 的引用符号。
举个例子：
<role> 你是一名资深前端开发工程师，精通 HTML/CSS/JavaScript。 </role> <context> 我正在开发一个健身打卡网页应用，面向年轻上班族。 </context> <requirements> - 首页展示今日运动目标完成度进度条 - 支持点击记录运动类型和时间 - 页面使用卡片式布局 </requirements>通过这种结构，AI 可以清晰地区分哪些是元指令、哪些是设计目标、哪些是功能期望，处理效率和质量都会有明显提升。我用的是尖括号标签，有朋友喜欢用方括号或者横线分隔，效果都差不多。关键是有明确的边界，而不是一堆文字堆在一起。
4.2 技巧 6：给 AI 设定一个"角色"，但角色描述要与任务强相关
"你是一名前端开发专家"这句话本身没什么问题，但如果你要做一个偏向视觉设计的落地页，加上"同时具备平面设计审美"会更合适；如果你要做一个数据可视化看板，加上"熟悉图表库和数据展示设计原则"会更有效。
角色设定不要太宽泛也不宜太狭窄。太宽泛等于没设定，太狭窄会限制 AI 的发挥。我发现比较有效的写法是：把角色描述与当次任务的关键能力绑定在一起。
你是一名专注于转化率优化的前端工程师，曾参与过多个高转化营销页面的开发，对首屏信息层级、引导按钮位置、内容区块节奏有深入的理解。这种角色设定会把模型引导到相应的知识域里，让它输出的内容更贴近专业实践，而不是泛泛的"资深前端"模板感觉。
4.3 技巧 7：用"约束条件"代替"主观偏好"
这是很多人不小心忽略的一点。主观偏好类的表达，比如"好看一点""更高级""不要太土"，AI 其实不知道怎么量化。但如果转换为约束条件，它就非常明确了。
- 你的需求是"配色高级一点"，约束条件可以写"主色使用深蓝色与金色搭配，背景以米白色为主"
- 你的需求是"布局大气一点"，约束条件可以写"首屏内容居中排列，左右两侧留白不低于 20%"
- 你的需求是"交互顺畅一点"，约束条件可以写"动画时长控制在 200-400ms 之间，使用 ease-out 缓动曲线"
我承认这么做确实需要多花一些心思来思考具体的约束描述，但换取的是 AI 输出的高度可控性。特别是当你做的是商用项目时，主观偏好是没法交付的，可量化的约束条件才是 AI 协作的正确姿势。
经验：自己在脑海里先设想一遍"如果我是 AI，这句话能转化成什么具体代码？"，如果转化不了，就说明这句话写得太虚了。
4.4 技巧 8：明确输出格式，避免 AI"自由发挥"代码结构
AI 生成代码时有一个坏习惯：喜欢自己造轮子。它会用自己的方式组织代码结构，导致你后续修改时很难下手。如果项目需要后续维护，我会在 prompt 里明确输出格式。
常见的输出格式约束有：
- 代码结构约束："将 CSS 样式按 section 分组组织，每组以注释标明对应的页面区块"
- 文件组织约束："将 HTML、CSS、JavaScript 分为三个独立的代码块，分别标注文件名"
- 变量命名约束："所有类名遵循 BEM 命名规范"
- 注释约束："关键交互逻辑必须附中文注释，说明其作用"
- 兼容性约束："需要兼容 Chrome、Edge、Safari 最近两个版本"
这些约束看似细节，实际上决定了你拿到代码后的维护体验。我依赖过完全没有注释的生成代码，改起来真是见鬼——CSS 里全部是简写属性，JavaScript 变量名全是缩写，想找到某个按钮的事件绑定代码都要上下滚动看半天。后来加上了结构约束，同样的事情，效率至少翻倍。
4.5 技巧 9：大任务必须拆小任务，一次对话只做一件事
关于这一点我其实在前面的技巧 4 里已经提到了行程的分阶段推进，但它的应用范围不止于一次页面开发。更广泛的说法是：任何一个可以拆解的独立子任务，都不要混在同一个 prompt 里交给 AI 处理。
常见的应用场景包括：
- 如果你需要做一个"首页 + 列表页 + 详情页"，不要一次让 AI 全生成，会得到一堆质量不统一、风格不一致的页面。按"首页 → 列表页 → 详情页"的顺序逐个完成，每完成一个先审核、再固化风格，下一个页面沿用上个页面的设计语言。
- 如果你需要先搭建页面框架再加入后端逻辑，不要一上来就要求 AI"页面 + 接口对接 + 数据渲染"一步到位。先确定静态页面，再逐步加入 API 调用层。
这种思路本质上是在帮助 AI 聚焦注意力。我多次实测，一次任务只做一件事的成功率远高于多任务并行。其实试想一下，你让一个人同时干三件不同的事，他出错概率也会变大，AI 也一样。
5. 迭代交互篇：像带团队一样和 AI 协作
5.1 技巧 10：第一版生成后，不要急着说"不对"，而是指出"具体哪里不对"
这可能是大多数用户都会犯的错误：第一版出来不满意，就直接跟 AI 说"这个不对，重做"。然后 AI 从头开始重新生成一个版本，往往跟第一个版本并没有太大区别，甚至可能更差。
正确的做法是指出具体的问题点。比如：
- "配色不够后续统一，正文颜色的对比度不够，阅读有点吃力"
- "导航栏在小屏幕下没有折叠，菜单项挤在一起了"
- "建议 hero 区块的文字左对齐，而不是居中"
你可以把修改意见一次性列成编号列表，AI 会逐条处理，比笼统地说"整体重做"高效得多。这个方法的核心逻辑是：让 AI 在已有代码库基础上做局部修改，比重新生成一份新代码更容易控制质量，因为大部分现有结构是好的，只需要修正问题点即可。
5.2 技巧 11：给 AI"思考空间"，让它先输出方案再写代码
这是一个很多人不知道但特别管用的技巧。如果你要做的页面有比较多的设计决策需要做，不要一上来就逼着它生成代码，而是先让它给出实现方案的说明。
我一般会这样写：
先不要写代码。分析以下需求，给出你的实现方案，包括： 1. 页面整体的布局结构规划 2. 配色方案及选择理由 3. 关键交互的实现方式 4. 可能遇到的问题和注意事项这个方法像面试中的"先说思路再动手"。AI 在输出方案时，相当于把散落在各处的决策点集中对齐了一遍，后续生成的代码会更有章法。我印象最深的一次是做一个有复杂筛选逻辑的商品列表页。我先让 AI 给出了筛选状态的管理的方案，它选择了用 URL 参数来同步筛选状态，并解释了刷新页面后还能保持筛选结果。这个决定直接让整个页面的体验提高了一个档次，如果一开始就让它直接写代码，它大概率会用一个简单的 JS 变量保存状态，刷新即丢失。
注意：如果 AI 给出的方案里有你不认同的地方，在这个阶段直接提出修正，比等代码写完再返工要便宜得多。
5.3 技巧 12：使用"反向提问"技巧，让 AI 自己发现需求中的漏洞
这是一个我最近才真正掌握的高级技巧。在你给 AI 下发一个较复杂的需求后，可以主动让它反向提问，把需求中没定义的边界条件补齐。
我的常见做法是：
你可以先向我提一些关于这个页面的实际问题，比如目标用户的设备使用习惯、数据来源、内容更新频率等，这些问题可以帮助你更精确地完成页面开发。AI 会根据它训练数据里积累的类似项目经验，帮你发现一些你可能根本没想过的需求细节。举个例子，我上次做一个在线课程展示页，AI 反问了我两个问题让我印象深刻："这些课程是需要用户登录后购买，还是直接下单？"以及"课程卡片上的日期显示的是开课时间还是报名截止时间？"这两个问题确实是我没细想的，但它们直接影响了页面功能的实现逻辑。通过与 AI 的来回对话，相当于它帮我补全了需求文档里的关键盲区。
5.4 技巧 13：如果第一版跑偏，不要全盘推翻，用示例修正方向
当 AI 输出的风格和你预期差别很大的时候，不要推倒重来。我把这种方法称为"示例修正法"，即通过向 AI 展示你想要的具体例子来校准方向。
举个例子：我想要一个偏"手绘风"的页面，但 AI 生成了一个非常规则的栅格化布局，完全不对路。我没有对它说"太丑了、重做"，而是提供了一段精确的描述：我希望页面有一种手绘草图的随意感，卡片边框用轻微留白模拟手绘的不规则感，标题字体使用手写风格，背景用纸纹质感。
同时我给了一个实现方案的锚点："你可以在 CSS 中使用@font-face引入手写字体，通过border-radius和过渡色营造边缘的不规则感，背景使用噪点纹理图案。" 这样 AI 执行的路径就非常清晰了，因为它有了具体的实现策略，而不是漫无目的地猜"手绘风到底应该做成什么样"。
5.5 技巧 14：多轮对话中，定义上下文记忆的"更新策略"
在多个回合的反复修改中，AI 有时候会"遗忘"你在前面回合里提出的某些要求。比如你在第二轮让它把主色改成紫色，但它生成的后期代码可能又回到蓝色了。
解决这个问题的思路是：每当进入一个新的修改回合时，在最前面重新确认一次需要保留的关键决策，这样即使 AI 的早期上下文变得模糊，你也在不断强化锚点信息。
在继续修改之前，请确保以下要求仍然生效： - 主色调为紫色系（#6C5CE7） - 页面宽度限制在 1200px 内 - 卡片统一使用 12px 圆角 现在开始处理新的问题：...这个方法特别适合多页面项目。如果你在做首页、列表页、详情页三个页面，每开始一个新页面时，先重新描述一遍整个项目的设计规则，页面之间的风格一致性就会好很多。哪怕多花一点 token，也远比事后统一风格轻松。
6. 高阶实战篇：让 AI 产出"可维护"的网页代码
6.1 技巧 15：要求 AI 使用 CSS 变量统一管理设计风格
这是一个从「一次性生成」过渡到「可维护项目」的关键门槛。如果你打算在一个项目里做多个页面，或者后续准备自己手动修改样式，强烈建议让 AI 从一开始就使用 CSS 变量（Custom Properties）来管理颜色、间距、字体等设计令牌。
在 prompt 中明确写：
请使用 CSS 变量定义设计系统中的颜色、字体、间距、圆角等基础令牌，并在组件中统一引用这些变量。这样做的好处非常明显：后续换主题色只需要改一处变量，而不用在修改的同时追踪十几处硬编码的十六进制色值。我记得最开始用 AI 做页面时，它给我生成了 8 个深浅不一的蓝色阴影，分散在整个 CSS 文件的各个角落，我换一个主色几乎要重新定制一遍全部按钮样式。后来凡是涉及多页面的项目，我都会在 prompt 里强制执行 CSS 变量约束。
我个人的习惯是额外指定变量命名规则，比如
--color-primary、--space-md、--radius-card，这样变量名本身就是一种文档，一看就懂什么意思，不需要在代码中额外注释。
6.2 技巧 16：让 AI 按"内容区块"拆分样式，而不是一股脑堆在全局
AI 生成的 CSS 很容易出现全局选择器泛滥的问题——所有元素都定义在一个大的样式块里，页面复杂一点后面就很难维护了。我的解决方法是要求 AI 按照"内容区块"来组织样式。
在 prompt 里可以这样写：
样式编写要求： - 按照 header、hero、features、testimonial、footer 等区块分别组织 CSS 代码 - 每个区块的样式之间使用注释分隔，例如 /* Header */ 与 /* Hero */ - 尽量避免使用全局标签选择器，优先使用类名这种组织方式让我后续定位和修改特定区块的样式变得非常轻松。比如我想把导航栏的高度调小一点，直接搜索"Header"区块的注释就能找到对应代码，不需要上下扫描整个文件找导航栏到底哪里定义了。如果你还打算在后续把 AI 生成的代码交接给团队其他成员，这个习惯更是必不可少。
6.3 技巧 17：多页面项目的"设计语言继承"
这是我处理多页面项目时的一个重要心得。如果你的项目包含多个页面，而不是一个单页，那每个页面生成时的设计一致性就是一个核心难点。AI 单独生成每一页的话，风格可能会跑偏。
我的做法是在每个后续页面的 prompt 中携带一个"设计语言参考块"，这个块描述整个项目的视觉规范，确保每一页都遵循同一套设计约束。比如我做项目管理工具的控制台界面时，每个页面的 prompt 都会包含这样一段：
设计约束（必须遵守）： - 主色 #4F46E5，辅助色 #10B981，背景 #F9FAFB - 所有卡片使用 12px 圆角，阴影为 0 1px 3px rgba(0,0,0,0.1) - 标题字号 20px 加粗，正文字号 14px 常规 - 间距系统基于 4px 增量：8、16、24、32这样生成的每个页面，从视觉上就看起来像一个产品的不同部分，而不是多个互不相干的页面拼在一起。很多 AI 做网站的教程不会提这一点，但如果你认真做产品，这点很重要。
6.4 技巧 18：不要容忍 AI 的"隐形错误"，要主动要求自查
AI 生成的网页代码经常有一些隐藏问题，比如：
- JavaScript 报错但不影响主渲染流程，你根本发现不了
- 图片资源引用了不存在的路径，页面上一堆裂图
- 表单没有正确的 name 属性，数据根本提交不出去
- 响应式断点漏掉了平板尺寸
这些问题如果单纯靠人工看页面是发现不了的。所以我养成了一个习惯：在 prompt 里主动要求 AI 对代码进行一次"自查清单式的审核"。具体写法是：
代码生成完成后，请执行以下自查： - 所有图片引用是否都有有效路径或占位图 - 所有交互事件是否绑定到正确的元素选择器 - 页面在小屏、中屏、大屏下是否都有正确的布局策略 - 表单元素是否都有完整的 name 与 label 对应 - 是否有任何硬编码的路径或缺失的资源引用这个方法算是把"代码评审"的动作前置到生成阶段。虽然 AI 的自查并不总是百分之百准确，但对降低低级错误率非常有帮助——多数情况下它自己就能发现并修正刚才代码里存在的问题。如果它自查后说"没有问题"，但你后来仍然发现了一个隐患，那就是把这个隐患单独发给它修正，比推翻重来要快得多。
6.5 技巧 19：配置好"开发环境约束"，让 AI 适配你的运行环境
很多新手做 AI 网页时，不知道 AI 默认生成的代码可能是用了外部 CDN 依赖的。比如字体、图标库、第三方库都默认走 CDN 链接。但如果你所在的网络环境无法稳定访问某些 CDN，或者你希望项目离线运行时也能完美展示，就需要在 prompt 里明确环境约束。
我会这样写：
技术约束： - 不依赖任何外部 CDN 资源 - 不使用需要额外构建工具的框架 - 所有图标使用内联 SVG 或 Unicode 符号 - 字体使用系统默认字体栈，如 system-ui、sans-serif如果你只是做原型或临时页面，CDN 方式完全没问题，很方便。但如果是一个正式的、要长期维护的项目，或者要捆绑打包给别人的离线演示，那就要提前告诉 AI。因为后期再替换掉外部依赖，有时候等于重写一遍样式。
6.6 技巧 20：让 AI 生成"技术选型建议"，再开始写代码
如果你做一个相对复杂的网页（比如有复杂状态管理、多视图切换、需要和后端交互），上来就写代码不一定是最优解。可以通过 prompt 让 AI 先给出技术选型建议，你确认后再让它按这个方案写代码。
在开始写代码前，请先给出技术选型建议，比较使用原生 JavaScript、React（通过 CDN）、Vue（通过 CDN）三种方式在此项目中的利弊。考虑到这是一个轻量级的公司内部工具页面，没有构建工具，请推荐最合适的方案并说明理由。AI 通常会基于项目复杂度、依赖加载成本、维护难度等因素给出建议。在我看来，对于简单页面，原生 JS 完全够用；对于复杂交互，引入轻量框架反而能减少代码量。让 AI 先做方案再执行，比直接开工靠谱得多。
个人体会：每次让 AI 解释选择理由很重要，因为你学到的不仅是结论，还有背后的权衡逻辑。时间久了，你甚至可以在它给出建议后，判断它说的是否合理，而不是被它带着走。
7. 避免 AI 生成的"坑"，我已经替你踩过了
7.1 技巧 21：AI 生成"假数据"的问题怎么破
AI 生成网页时，为了展示效果，会自动填充一些示例数据。大部分情况下用 lorem ipsum 或占位图片是无害的。但有时候它会生成一些看起来非常真实的数据，比如员工姓名、用户头像、公司名称、甚至是带完整地址的联系信息。这在演示目录折磨死我了——有一次我做好一个企业官网，里面"联系我们"的地址是 AI 编造的一个看起来能对上的街道和门牌号，显然是瞎编的。如果直接上线，歪打正着撞上一个真实地址就尴尬了。
处理方法很简单，在 prompt 里明确：
- 所有文本内容使用占位符文本，如「这里替换为实际文案」 - 所有图片使用占位图服务，如 via.placeholder.com 或 picsum.photos - 不要在页面中使用看起来像真实数据的内容 - 页面注释中说明哪些内容需要替换这个习惯让我省去了校对假数据的麻烦，让整个流程的专业度也提高了一大截。
7.2 技巧 22：AI 生成"死链接"和"无意义交互"的规避
AI 在生成网页时，经常会在按钮上没有写跳转地址，或者把链接 href 写成#，点击没反应。这种"看起来是按钮但实际是死的"的交互组件，在最基本的演示中够用，但真实使用中完全不行。
我在 prompt 里会加这么一条：
- 所有按钮必须有明确的行为定义：点击跳转到指定锚点、弹窗或触发某个事件 - 没有交互目标的可视元素不要设计成按钮，如果只是展示性元素，请不要用 button 标签用一句话概括：凡是长成按钮的东西都得能点、点完之后有反应，要么是跳转，要么是动效。否则就别用 button 标签。这个原则听着很简单，但 AI 经常违背，特别是你在 prompt 中没定义清楚按钮行为而它又给每个视觉效果都套上按钮的时候。
7.3 技巧 23：代码注释要"讲人话"，不要"讲道理"
AI 生成的注释往往非常啰嗦。比如：
<!-- 这是页面的头部区域，包含导航栏 LOGO 和菜单按钮 -->这类注释其实废话可以省略，它没有提供任何额外信息。我在用 AI 做项目时，会要求它精简注释：
注释规范：每个注释只说明这一段代码的功能与修改时必须注意的事项，不需要解释代码本身在做什么。比如「此区块控制导航栏在小屏下的滑出行为，修改时需同步调整 overlay 的 z-index」。像这样特别指向具体问题的注释才有价值。否则注释的存在只是让代码文件更长，没有任何帮助。但说老实话，这个要求对 AI 有一定难度，它有时还是会中规中矩地写很多废话。我后续还会用第二个 prompt 统一清理注释质量，效果也不错。
7.4 技巧 24：不要盲信 CSS 的"零错误"输出，到手后还是要跑一遍
AI 生成完代码后，给你的不一定是最终版本。有些 CSS 样式在它的"脑内模拟"里没问题，但真实浏览器渲染时可能会出现奇怪 bug，比如高度塌陷、定位错位、间距不一致等。
所以我的工作流里有一个不环节不会跳过：把 AI 生成的 HTML 文件保存到本地，在浏览器里打开，然后用浏览器 DevTools 的响应式模式检查几个关键宽度的显示效果。
检查重点一般是：
- 375px（手机屏）
- 768px（平板竖屏）
- 1024px（笔记本）
- 1440px（桌面显示器）
如果有问题，把具体现象描述反馈给 AI（例如："在 768px 宽度下，导航菜单按钮没有显示出来，整个菜单不可用。请检查媒体查询中display:none的触发条件。"）。以这种方式迭代，比直接在会话中让 AI 盲猜调整高效得多。
强烈建议：如果你打算认真用 AI 做网页，浏览器 DevTools 是你最需要熟练使用的工具。没有一个好用的调试环境，AI 的输出质量再高，你也没办法有效验证和反馈。
7.5 技巧 25：建立一个属于自己的"prompt 模板库"
终于讲到最后一个技巧。这可能是最不"技术"，但长期收益最大的一点。
你不可能每次写网页都从零开始构思 prompt。效率最高的方式是建一套属于自己的 prompt 模板库，把常用组件、页面类型、设计规范沉淀成可复用的模板。比如我现在的模板库里就有这些分类：
- 落地页模板（含 hero、功能区块、用户评价、FAQ、CTA 等）
- 后台管理界面模板（侧边栏、顶栏、内容区布局、统计卡片等）
- 表单页模板（校验逻辑、提交反馈、多步骤引导等）
- 组件生成模板（导航栏、轮播图、tab 切换、模态框等）
每个模板的基础结构都由之前在多次实战中使用有效的那套规范组成。新建项目时，我先复制模板，再针对项目需求进行修改，而不是重新写 prompt。时间久了，你的模板库就是你的方法论沉淀，能让你的效率产生质的飞跃。
8. 关于 AI 工具选择与搭配的一点补充
很多朋友问过我，市面上那么多 AI 工具到底选哪个？这个问题没有绝对答案，但我可以分享一下我的选择标准：
- 如果需要纯对话生成网页，以 Claude 和 GPT-4 系模型为优选，它们在代码生成上的理解能力和输出质量都比较稳定
- 如果需要在编辑器里直接操作代码，Cursor 这类 AI 编程工具会让迭代效率大幅提升，因为你可以直接在代码上下文中做上下文指向性修改
- 如果需要从设计稿转代码，Figma 配合相关 AI 插件的效果也不错，但不在本次讨论范围内
- 如果你是零基础，我建议先用网页版对话把流程跑通，再渐进式接触编程工具
但无论选哪种工具，前面 25 个技巧都是核心心法。工具只是载体，真正决定产出质量的，永远是你给的信息结构是否清晰、迭代反馈是否准确。
我个人的建议：刚开始时选定一个工具用扎实深入，别频繁切换。每个工具的行为风格有差异，使用节奏也会略有不同，频繁切换容易让你迷失在工具层面，反而忘记了我们真正要解决的问题是什么。
9. 个人经验：从"堆 prompt"到"搭体系"的转变
最后分享一点我自己的体会。
回头看我从一开始用 AI 做网页到现在，最大的转变不是学到某个高级技巧，而是对待 prompt 的态度。从"把需求写得面面俱到"变成了"把需求拆成一层一层，逐层推进"。从"把 AI 当成代码生成器"变成了"把 AI 当成一个需要协作的初级团队成员"。
这个思维转变带来的影响是全面的：prompt 变得短了，但每次生成结果的质量反而高了；修改次数少了，但最终效果更接近预期了；代码的可维护性也在逐次改善。说白了，AI 生成的代码就是一个起点，你作为一个"带人的人"，真正的关键能力是你的判断力和信息组织能力，而不是简单地把需求复制粘贴。
如果你现在还在跟 AI 生成网页的效果较劲，不妨跳出来想一想，是否你给 AI 的信息够不够结构清晰，反馈够不够具体，迭代节奏是不是一次塞了太多目标。这些维度理顺了，25 个技巧里至少有大半你根本不需要刻意记，自然会变成你工作流的一部分。
