1. 25 个技巧的核心不是更多而是更准——先看你卡在哪一环我见过太多人用 AI 做网页第一反应就是拼命堆 prompt把需求写成小作文塞满形容词、技术名词、参考链接恨不得把自己脑子里所有想法一次性倒给 AI。结果呢生成出来的页面要么是看着很酷但代码根本跑不起来要么是结构全对但细节根本不是你要的来回改了十几轮最后干脆自己动手重写。说实话我在这个坑里也待过相当长一段时间。后来把大量项目拆开复盘才慢慢意识到一个反直觉的结论用 AI 做网页的效率瓶颈从来不是 prompt 不够长、不够全而是你根本没有管理好 AI 的工作状态。同样的需求换个拆解方式、换个上下文组织方式、换个迭代策略出来的效果天差地别。这篇文章把我在实战里反复验证过的 25 个技巧按五个方向串起来每个技巧背后都有具体的场景、示例和可以照抄的写法。不管你是刚接触 AI 编程的新手还是已经在拿 AI 写生产级页面的人我猜这里面总有几条是你漏掉的——至少我自己回头看前几个项目里漏掉的不止一半。文章里我不会从头讲什么是 prompt这种基础概念默认你已经用 AI 生成过页面只是觉得结果不如意。如果你连一次完整的 AI 建站流程都没跑过建议先从最简单的帮我写一个带导航栏的静态首页跑通一次再回来看这篇文章。2. 把需求当需求写而不是当 prompt 堆先解决方向偏的问题很多人在最开始就把方向带偏了。给 AI 的第一条消息不是描述项目而是直接命令写一个漂亮的营销落地页。这等于让一个刚入职的实习生去做产品经理、设计师、前端工程师三个岗位的活还不给任何背景资料。AI 只能靠猜而猜出来的东西通常就是那种放到作品集里会被同行一眼看穿的产物。2.1 技巧 1用一句话需求 三个约束替代长篇大论我实测下来开头第一段不要超过 5 行。超过 5 行之后AI 对每条信息的注意力会严重稀释尤其是越靠后的内容越容易被忽略。正确的结构是一句话需求这个页面解决什么问题三个约束必须包含哪些内容、不能出现什么、目标用户是谁比如你想做一个小型工作室的作品集页面可以这样写需求一个设计工作室的作品集展示页展示 8 个项目每个项目有封面图和一句话介绍。 约束必须包含首页、项目列表、关于我们、联系表单四个区块不能使用任何 JS 框架纯 HTML CSS文件结构要清晰目标用户是潜在甲方客户视觉风格偏简洁、稳重、少动效。三句话就够了。后面 AI 在生成代码时如果缺了什么你再补但开头千万别贪多。我在实际项目里发现约束越具体AI 的自由发挥空间就越小产出就越贴你的预期。一个好的规则是每条约束都是 AI 无法自行推断的信息。比如目标用户是年轻潮牌消费者和目标用户是金融机构客户对视觉风格的影响是天差地别的。2.2 技巧 2给 AI 画不要做清单比要做清单更管用这是一个反向思维。大多数人习惯告诉 AI 你要什么却很少告诉 AI 你不要什么。但在网页这个场景里不要往往比要更能防止灾难性的输出。举几个我常用的不要示例不要用任何 CSS 框架Tailwind、Bootstrap 都不要所有样式手写不要给图片加复杂特效滤镜、渐变叠加之类图片保持原样不要在移动端隐藏导航菜单用同一套水平导航适配所有屏幕不要用花哨的字体全站只用系统字体栈这些限制有几个明显好处第一AI 不会自作主张引入你没学过、没验证过的依赖第二生成出来的代码风格更统一后期维护成本低第三排查问题的范围大幅缩小。不要做清单写得好等于给 AI 上了一道安全护栏它能自由发挥的空间全在王婆卖瓜式的加功能上被刹住了。2.3 技巧 3把感觉翻译成可验收的标准这是新手和熟手之间最大的分水岭。你说我想要一个更有科技感的设计AI 会给你配一堆霓虹渐变、发光按钮、粒子动画结果页面像游戏宣传海报。科技感这个词太模糊了每个人脑子里的画面都不一样。你需要把感觉拆成 AI 能执行的像素级标准。比如科技感可以拆成背景色用深色#0A0E1A 到 #1A2332 的渐变色系标题字体用无衬线加粗正文用 16px、1.7 倍行高所有圆角统一用 4px 或 8px不要用大圆角配色主色一种 辅助色一种禁止超过三种颜色区块之间用细线分割不用卡片阴影把这些细节写进 promptAI 生成的页面基本就是你要的。检验标准很简单如果你能拿着你的需求描述让另一个人类师傅做出一模一样的页面那这份描述就是合格的如果你自己都说不清楚别怪 AI 瞎猜。2.4 技巧 4一次只问一个问题不要让 AI 猜你的全局意图我看到很多人喜欢在一条 prompt 里同时要求帮我做一个电商首页同时左侧要有分类筛选轮播图要自动播放还要支持暗黑模式价格用美元还是人民币你帮我定…… 这种写法AI 大概率会在中途丢掉一两个要求或者在自己决定了一些你没想过的问题时给出一个奇奇怪怪的方案。正确的做法是把项目拆成多个小对话或者在一个对话里逐步解锁需求。先让它搭整体框架框架确定后再一轮一轮地做区块细节。每轮只聚焦一个目标比如把这个 Hero 区的标题改成更激进的文案或把产品卡片的价格改成粗体加大。这样每一次修改你都能清楚看到变化是什么、是哪次 prompt 引起的出了问题也容易回滚。如果你担心多个小对话会丢失上下文别急后面有个专门解决这个问题的技巧。2.5 技巧 5需求文档里必须有竞品参考的部分AI 的确看过无数网站但它不知道你心里的标杆是什么。你给它一张截图、一个链接或者直接描述参考网易云音乐首页的 Banner 布局但配色换成我们品牌色它就能少走非常多弯路。这里有个细节要注意只给链接通常是低效的如果链接需要登录或者加载了动态内容AI 往往抓不到关键信息。更有效的方式是写清楚参考 XXX 网站里的哪些具体元素参考 apple.com 产品页的 hero 区和导航栏交互参考 stripe.com 的文案排版节奏配色完全换成我们自己的品牌色系。你甚至可以附上一段你手写的参考页面特征摘要比如参考页面 A 的优点是结构简洁缺点是信息密度太低我要在保留简洁感的同时把三个核心卖点放到首屏可见区域。这样 AI 的认知就不是模仿而是借鉴 调整产出会更贴近你的真实想法。3. 结构化输出让 AI 按你的零件清单干活而不是自由发挥方向摆正之后下一个高频问题是AI 生成的东西结构混乱、代码风格不一致、改动一处就要重写一大段。这个问题的根源在于你没有定义输出格式。3.1 技巧 6开场先定义输出格式HTML 结构、CSS 变量、JS 函数很多人第一句话就写着帮我写个页面AI 就会按它自己的默认习惯输出。但你要做的其实是像给外包团队发技术规范一样先定好代码的组织规则。拿我自己常用的一个开头举例你是一个资深前端工程师。请用原生 HTML CSS JavaScript 生成一个响应式落地页。 输出要求HTML 放入一个完整的 index.html 文件包含head和body的完整结构CSS 使用 :root 变量定义所有颜色、间距、字体大小不允许硬编码单个页面的颜色值JavaScript 只处理导航栏展开/收起其他交互暂不实现文件结构以三个代码块输出index.html、style.css、script.js你看我连输出成几个代码块都定了。这不是强迫症而是明确的结构约束能大幅减少你二次整理代码的时间。如果不规定AI 可能给你用内联样式、可能按 JS 生成结构、可能把 CSS 全堆在 head 里拿回来你都懒得改。3.2 技巧 7用 JSON Schema 或 TypeScript 接口约束数据流如果你的页面不是纯静态的而是要从某个接口拿数据渲染列表建议在 prompt 里直接给出数据结构的类型定义让 AI 按这个结构去写渲染逻辑而不是让它自己假设一个数据结构。比如你要做一个博客列表页接口返回的数据大概是interface Article { id: number; title: string; excerpt: string; coverUrl: string; publishedAt: string; // ISO 8601 tags: string[]; }把这段定义贴给 AI告诉它按这个接口渲染列表标题用h2摘要限制在 2 行内超出省略日期用相对时间格式显示。你会发现AI 生成的数据处理代码几乎一次就过不会出现它自己假想一个content字段结果渲染出 undefined 的情况。这个技巧同样适用于与后端联调的场景你在 prompt 里把 API 的 request/response 格式写清楚AI 生成的接口调用代码就能直接接入你现有的服务。省掉的不是一点点时间而是整个猜字段名 改 bug的循环。3.3 技巧 8先让 AI 出组件清单再逐组件实现这是一个非常好的前置设计姿势。不要在一条 prompt 里让 AI 把整个页面写完而是先让 AI 列出它打算拆分成哪些组件每个组件的职责范围是什么。先给我一个组件清单包含组件名、职责、布局要点、需要的数据字段。确认完这个清单后再一个个组件地生成代码。这一步的好处是你可以提前拦截不合理的设计。比如 AI 把猜你喜欢和浏览历史建成了两个重复的组件你可以让它们合并AI 把支付弹窗放在首页组件里你可以移到独立的 modal 目录。等到真正生成代码时AI 是在同一个对话里基于已经确认的清单迭代不是凭空重写质量会稳定得多。我统计过先出清单再生成的方案总对话轮数可能增加了 2~3 轮但最终返工量减少了一半以上绝对值非常划算。3.4 技巧 9CSS 命名规范要主动喂给 AIAI 默认的 CSS 命名风格非常AI 味——你可能见过.container1、.section2、.card3这种杂草丛生的代码改起来要命。解决办法很简单把你的命名规范写进 prompt要求它照做。比如你可以这样说CSS 类名使用 BEM 风格例如.block__element--modifier。区块命名以语义为准禁止使用数字后缀。所有颜色值统一使用 CSS 变量引用间距使用 4px 基数的倍数。加了这一句之后AI 生成的样式类名就工整多了。后续你再想看代码、查样式效率会高很多。命名规范这种东西AI 不会主动给你的只有你要求它它才会按你的规矩来。你付出的只是 prompt 里一句话得到的却是可长期维护的页面结构。3.5 技巧 10让 AI 先生成讨厌的重复代码再人工精改很多人让 AI 生成页面的时候最讨厌的就是那些枯燥的重复区块8 张团队介绍卡片、6 个服务列表、12 个 FAQ 手风琴。其实 AI 特别擅长干这个真正重要的是你先给它一个单区块模板。操作顺序是先让 AI 生成一个区块的完整代码比如一张团队成员卡片你在第一步代码基础上微调样式细节觉得满意了把这一步生成的代码作为模板让 AI 按这个模板重复生成 8 次替换内容即可这一步的关键在于不要让 AI 一次性生成 8 张卡片的内容否则它会自由发挥每张卡片的细节总会有点差异。先做模板再套用模板出来的效果才会整齐统一。我甚至会在 AI 生成了 8 张卡片后自己再抽查几个确保文案没有重复或语气不一致。4. 迭代策略从一步到位改成小步快跑——AI 是一件半成品半成品磨出来的这条大概是 25 个技巧里最能缩短你总体耗时的部分。很多人把 AI 生成的第一个版本当成最终版然后开始修修补补越补越乱。实际上你完全可以在初期就设计好迭代节奏。4.1 技巧 16先让 AI 搭骨架再让 AI 填肉所谓骨架是指页面结构已经完整、所有区块都有占位内容但空白无排版。让 AI 在一轮对话里只做骨架是比直接要成品更有效的策略。先输出这个页面的完整 HTML 骨架所有区块用语义标签划分给每个区块一个占位标题和描述文字不需要任何 CSS。目标是把信息架构先定下来风格细节后面再调。骨架定了之后你跟 AI 说下一步为这些区块设计样式或把hero区块改成左文右图的布局每次只动一块。这样做的好处是信息架构不会被推翻——如果你一开始就要全部色彩和排版很可能在调某个配色时不小心重排了结构改完一看布局也乱了非常耗时间。4.2 技巧 17一次只改一个变量别同时要求改颜色 加动画 换字体这条听起来像常识但实操中特别容易被忽略。一次对话里同时提出多个修改需求AI 往往只能记住其中一个或者用折中的方式处理所有要求结果每个改动都不彻底你还要花更多轮次去返工。我给自己定的规矩是每轮对话只提一个修改点改完验证完再提下一个。比如把主按钮的背景色改成品牌色#1677FF改完验收之后再说给导航栏加一个 sticky 效果页面滚动时保持吸顶。这样改一步稳一步很安心。如果你真的有多个改动需求把它们拆成多轮或者写成明确的改动清单并按顺序执行第一步改什么、第二步改什么——别让 AI 并行处理。4.3 技巧 18差分 prompt只说改动点不重复整个需求很多人在第二轮迭代时会把原始需求重新粘贴一遍然后在最后加一句另外把 XX 改一下。这其实是个低效且容易出错的做法因为 AI 会把重贴的内容当成新指令容易和之前的上下文发生混淆。差分 prompt 的思路很简单只描述从当前状态到目标状态的变化。把当前header区域改为通栏透明背景导航文字颜色改为白色其他区域不做任何修改。这样 AI 的注意力就集中在你要改的那部分。我还会加上其他区域不做任何修改这句话强烈暗示它不要动别的地方。实测下来这句提示能减少大量 AI 擅自优化其他代码的行为。4.4 技巧 19让 AI 做完后自检三遍视觉、功能、边界很多 AI 生成的代码初看没问题但一跑起来就各种小毛病图片路径写错、按钮 hover 效果没写、小数像素导致布局错位。与其等你手动测出来不如让 AI 自己先过一遍。在 prompt 末尾加一句生成完代码后请自查一遍以下清单HTML 标签是否闭合、语义是否合理CSS 是否适配 375px / 768px / 1440px 三个宽度JavaScript 是否有潜在报错比如空值访问或重复绑定AI 的自检当然不完全可靠但能过滤掉 70% 的低级错误。剩余 30% 靠浏览器里的真实测试来兜底这部分后面有专门技巧。4.5 技巧 20善用代码审查模式让 AI 找自己的 bug比自检更进一步的是让 AI 以审查者身份重新看一遍自己的代码。这是一个被低估的能力非常值得单独拿出来说。当页面出现一个 bug你不需要自己读整段代码去定位直接把现象告诉 AI整个页面加载后浏览器控制台报错Cannot read properties of undefined (reading map)请分析 index.html 中的 JavaScript 哪一步会导致这个错误然后给出修复后的完整代码。AI 在修复 bug模式下的表现往往比生成新功能更稳定。因为修复的答案是唯一的——找到报错路径改掉它就行。但要让 AI 高效定位必须把错误现象、控制台报错、操作步骤都写清楚。你提供的信息越精确它定位就越快。5. 上下文管理AI 的记忆是稀缺资源你得学会省着用用 AI 做网页另一个隐秘的坑叫上下文窗口。无论是 64K、128K 还是 200K都会在长对话中逐渐耗尽。一旦上下文溢出AI 的行为会变得非常诡异忘了你最开始的设计约束、重复生成已经存在的代码、甚至开始胡言乱语。这一节我们就讲怎么把 记忆花在刀刃上。5.1 技巧 11维护一份项目记忆卡与其每次对话都重复所有背景不如把项目关键信息浓缩成一张项目记忆卡放在每条重要 prompt 的开头。我的做法是这样的【项目背景】 项目XX 品牌官网 技术栈HTML CSS 原生 JavaScript不使用框架 风格极简、白底、黑色文字、圆角 8px、不设无用装饰 核心内容品牌介绍、案例展示、联系方式 全局约束不引入任何外部库字体用系统 font-family这段卡片大概 5 行但承载了 AI 迭代所需的全部世界观。它会显著减少 AI 因为上下文丢失而产生的风格漂移。5.2 技巧 12每次提问带上当前状态和目标状态而不是一长串聊天记录上下文管理另一个重要技巧是别指望 AI 从长长聊天的历史里推测你的意图。大多数时候AI 无法知道你刚才是不是改了某个局部样式因为你可能根本没在对话里提到。正确做事方式是在每条 prompt 里带上当前的页面状态和你想要的状态当前主页 hero 区的标题在样式表里被设为 48px 加粗背景是浅灰色渐变。 目标将标题文字缩小到 40px并让背景图全屏铺满不居中显示。这种明确的状态描述比标题再小一点、背景再大一点这种模糊说法高效太多。它也大幅降低了 AI 对上下文长时间遗忘带来的风险——就算它记得不全至少当场你给我设定了一个起点和终点。5.3 技巧 13重构时用契约式描述锁定接口如果你让 AI 做一次较大规模的重构比如把传统 HTML 改成组件化结构你很可能遇到一个新问题重构完原有的页面功能没了。因为 AI 在重构的过程中改了变量的名字、挪动了 DOM 结构但没有同步保持事件绑定逻辑。应对方法是接口契约思维。在重构指令里你先定义清楚哪些是外部不能破坏的接口重构当前页面把首屏部分拆成 header、hero、feature 三个组件。原有 ID 和类名保留JavaScript 中通过#btn-submit、.js-nav-toggle选择器绑定的事件不要修改。重构完成后页面视觉和交互必须与重构前保持一致。明确哪些是稳定契约之后AI 会小心翼翼地在拆组件的同时保留选择器不会顺手把 ID 改成别的。这一招在多次迭代时特别好用。5.4 技巧 14把 AI 当成轮岗实习生——每次对话都要重新交代背景这条听起来有点怪毕竟前面刚讲要维护项目记忆卡这里怎么又让重新交代背景其实道理很简单AI 的记忆不是永久的每次对话开始时它都不会记得上一次对话的内容。即使你在同一个会话里它也随时可能因为上下文太长而忘记最初设定的需求。我建议的做法是每当你发现 AI 开始答非所问、风格漂移、或者生成了明显不符合项目定位的东西不用废话直接开新对话然后把项目记忆卡重新贴一遍再继续。开新对话是对抗上下文老化的最猛手段。养成这个习惯后你就不太会被AI 怎么突然变笨了这种问题困扰——从来不是它变笨了是它的记忆被你塞爆了。5.5 技巧 15用文件分割来管理上下文而不是无限滚动聊天跟上下文管理最相关的一个实操技巧是当你项目已经有一定体积时别再把整个项目放在一个对话里反复调试。比如你有index.html、style.css、script.js三个文件不要让 AI 每次从零输出一整份代码。正确做法是只贴出当前需要修改的文件内容并说明其他文件保持不变如果文件太大只贴出待修改的函数或样式类名让 AI 输出修改后的完整 diff或第 10~20 行替换为某内容。这样做可以最大限度减少 token 消耗也避免 AI 因为上下文太长而把之前写好的代码改坏。我在实际项目中当单个文件超过 300 行时就已经开始考虑分片管理上下文了。一次性贴 1000 行代码让 AI 改效果不但不会更好反而很容易让它输出一段简化版代码然后你的页面渲染结构全变了。6. 验证、兜底与提效AI 写完只是开始剩下的是你的战场这节是收尾篇也是很多人最容易忽略的部分。AI 给你生成的网页代码即使整体结构没问题也几乎一定会有小毛病。下面几个技巧就是专门处理AI 生成后到底怎么落地的。6.1 技巧 21浏览器里直接改然后反向给 AI 最终版我身边很多朋友拿到 AI 生成的代码后就直接在本地打开看然后手痒在 DevTools 里改来改去等最终效果满意了却发现自己改的样式在源文件里并没有同步——所有调试白干了。更好用的流程是先让 AI 生成版本 A在浏览器 DevTools 里调整样式、排版找到满意的视觉效果把版本 A 的 HTML 代码和你在 DevTools 里做出的最终改动的 CSS 变更或者改动说明一起发给 AI让它把这些修改合并进源文件。你不需要把 DevTools 每行改动用文字描述出来那样太累直接给 AI 发当前样式文件里第 30~45 行以及第 78~102 行的 CSS 规则请替换为以下内容……就行。核心思想是让 AI 把你在浏览器里做的临时修改落回代码源文件而不是你在源文件里再抄写一遍。6.2 技巧 22拆 template 的时候保留AI 可读注释如果你的页面需要长期迭代建议在代码里适当留下给未来 AI 对话的注释。注释不只要写这是页头更要有这部分由 AI 生成时请保持结构约定的信息。比如!-- HEADER-COMPONENT-START -- !-- 导航栏组件类名固定为 site-header请勿修改结构 -- header classsite-header.../header !-- HEADER-COMPONENT-END --有了这种标记后来你再让 AI 改这个页面时它会很自然地把注意力放在两个标记之间的内容上而不会碰其他代码。这对多轮 AI 协作尤其重要——AI 越能快速找到它要改的位置改错的概率就越低。等所有迭代结束你再手动把这些注释删掉也不迟。6.3 技巧 23用 AI 批量生成页面变体create variations做网页经常会遇到要出 5 种风格草案的场景。这时候不要一个个让 AI 写而是先定义好风格变量再让 AI 一次批量输出多个变体。例如基于我们已经确认的这个落地页内容一次性生成 5 套不同的视觉方向 变体一科技蓝 圆角卡片 渐变点缀 变体二墨绿 衬线标题 大面积留白 变体三黑白极简 高对比 等宽字体 变体四暖橙 手写风格 大圆角 变体五深紫 玻璃拟态 发光元素 每套变体只输出 style.css 和关键 HTML 差异不要重复整个 HTML。这样你拿到的是一组并列可选方案。然后你只需要从中挑一个方向再深化细节就行。一次让 AI 出 5 套比来 5 次对话效率高得多前提是你要先有一个固定内容骨架。这个技巧每年能给我省下一整个下午。6.4 技巧 24把重复的 UI 模式变成可复用的 prompt 片段如果你经常做某一种类型的页面比如作品集、落地页、电商列表那一套固定的 prompt 片段值得沉淀下来。比如我自己就存了一个叫 hero-section-prompt 的片段库内容大概长这样Hero 区块要求全屏高度100vh或视口高度min-height: 60vh二选一背景图片使用 object-fit: cover加载时用低分辨率占位标题用 clamp() 做响应式字号最小 28px最大 64px左侧文字、右侧背景图移动端堆叠包含一个主要 CTA 和一个次要文字链接把这套片段存下来以后无论做哪个新页面都能直接复用这部分描述。真正高效的人不是每次重新写一遍 prompt而是建立自己的 prompt 组件库。25 个技巧布满项目的全过程但长期来看你建立了几个可复用的片段回报率是最高的。6.5 技巧 25最后的兜底——人工审查清单30 分钟搞定AI 生成页面我最后一定会亲自过一遍检查。但这里有一个关键经验人工检查只处理 AI 自己发现不了的问题不重复 AI 已做过的自检。所以我不检查标签闭合、样式类名这类 AI 大概率已经弄对的东西而是检查四件 AI 最容易出问题的语义化与 SEO 基本标签title、meta description、heading 层级是否合理可访问性图片是否有 alt、按钮是否有 aria-label、对比度是否达标真实交互走查手点一遍所有按钮弹窗和表单关注控制台报错极端尺寸把浏览器窗口拉到 320px 宽先确认页面不崩这四件事做完一个页面基本就能安心上线了。实际花的时间通常不到 30 分钟但能替你挡掉很多上线后才发现的问题。说实话我写这篇的时候一直在想到底是哪一个技巧最重要。想来想去还是觉得上下文管理那组最值钱——因为一个人如果方向对了只是效率慢一点总能把页面做出来但如果 AI 的上下文一会儿对一会儿错你会在一堆无意义的返工里消耗掉所有热情最后抱怨AI 生成的网页根本没法用。另外还有一点个人体会分享给所有看到这篇文章的朋友25 个技巧不用一次全用上刚开始能抓住 5 个高频的就够了。我自己是在做第二、第三个项目的时候才慢慢补齐的。毕竟工具是越用越顺手的prompt 也是一样。你如果试过其中几条发现确实能减少返工、减少抱怨那这篇就算没白看。