尧图网页设计 
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 技巧 21AI 生成假数据的问题怎么破AI 生成网页时为了展示效果会自动填充一些示例数据。大部分情况下用 lorem ipsum 或占位图片是无害的。但有时候它会生成一些看起来非常真实的数据比如员工姓名、用户头像、公司名称、甚至是带完整地址的联系信息。这在演示目录折磨死我了——有一次我做好一个企业官网里面联系我们的地址是 AI 编造的一个看起来能对上的街道和门牌号显然是瞎编的。如果直接上线歪打正着撞上一个真实地址就尴尬了。处理方法很简单在 prompt 里明确- 所有文本内容使用占位符文本如「这里替换为实际文案」 - 所有图片使用占位图服务如 via.placeholder.com 或 picsum.photos - 不要在页面中使用看起来像真实数据的内容 - 页面注释中说明哪些内容需要替换这个习惯让我省去了校对假数据的麻烦让整个流程的专业度也提高了一大截。7.2 技巧 22AI 生成死链接和无意义交互的规避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 个技巧里至少有大半你根本不需要刻意记自然会变成你工作流的一部分。 AI生成网页的25个实战技巧：从Prompt结构化到代码可维护
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 技巧 21AI 生成假数据的问题怎么破AI 生成网页时为了展示效果会自动填充一些示例数据。大部分情况下用 lorem ipsum 或占位图片是无害的。但有时候它会生成一些看起来非常真实的数据比如员工姓名、用户头像、公司名称、甚至是带完整地址的联系信息。这在演示目录折磨死我了——有一次我做好一个企业官网里面联系我们的地址是 AI 编造的一个看起来能对上的街道和门牌号显然是瞎编的。如果直接上线歪打正着撞上一个真实地址就尴尬了。处理方法很简单在 prompt 里明确- 所有文本内容使用占位符文本如「这里替换为实际文案」 - 所有图片使用占位图服务如 via.placeholder.com 或 picsum.photos - 不要在页面中使用看起来像真实数据的内容 - 页面注释中说明哪些内容需要替换这个习惯让我省去了校对假数据的麻烦让整个流程的专业度也提高了一大截。7.2 技巧 22AI 生成死链接和无意义交互的规避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 个技巧里至少有大半你根本不需要刻意记自然会变成你工作流的一部分。