前两天一位读者把AI生成的网页截图发给我说“这跟我想要的完全不是一回事”。他让AI做的是小区棋牌室活动通知页结果AI给的是带粒子背景、滚动动画、四屏营销落地页。这不是他第一次遇到AI写代码跑偏了——很多人试用AI编程时第一轮惊喜翻车都从“帮我做个网页”这五个字开始。AI编程跑偏这件事乍看是工具不够聪明实际多半是需求投喂出了问题。你想吃一碗炸酱面却跟后厨说“来点吃的”端上来满汉全席也不能怪厨师。第一课我不想教你怎么敲代码而是想先解决一个更根本的问题怎么把需求说清楚让AI写出来的第一版网页就能用。我自己实测下来一份简单的需求模板能把跑偏率至少降低六成。下面这套东西没有高深理论都是可以直接抄走用的实战内容。1. 为什么AI一写代码就爱自己发挥从输入端找根源1.1 你给AI的是“开放式作文题”不是施工图很多人第一次让AI写网页输入往往是这样的“帮我写一个网页。”如果你对面坐的是资深前端他大概率也会愣住什么网页企业官网、个人博客、活动报名页、在线简历、后台管理系统这里面的代码量和复杂度能差出几十倍。AI也是一样的困惑只是它不会反问你它会硬答。基于语言模型的预测机制当输入信息不足时它就从训练数据里找“最常见”的网页结构来补全。最常见的是什么是那种带导航栏、轮播图、产品介绍、价格套餐、底部备案信息的营销落地页。于是你明明想要一张白纸黑字的通知AI给你铺了一层炫光渐变背景还自作主张加了滚动入场动画。这个问题的根源在输入端你用自然语言给了一个太宽泛的指令。自然语言本身充满歧义但代码世界要求精确。AI没法追问它就按自己对“网页”的平均印象去生成。这个过程用一句话总结就是你没写的约束AI会替你决定。1.2 边界条件缺失AI只能替你拍板我把跑偏的AI输出拆开看过发现它特别喜欢在四个维度上自行加戏视觉风格你没说配色它默认用蓝紫色渐变加圆角阴影。页面数量你只要一个页面它给你做出五六个板块硬凑成长页面。交互复杂度你没提交互它给你加鼠标悬停、点击弹窗、平滑滚动。外部依赖它经常引用网上CDN上的字体、图标库、图片链接哪怕你没要求。这些自行加戏不是因为它“故意乱来”而是因为模型在概率空间里找不到明确答案时会选择一条看起来最合理、最完整的路径往下走。训练数据里的热门网页长什么样它就会往那个方向靠。你想想哪怕让同一个AI写“一个网页”如果你补一句“不要导航栏、不要动画、不要轮播图”它跑偏的概率立刻小一半。这不是玄学是约束条件起作用了。1.3 “全能感”让脑补看起来特别自信AI编程还有一个让人哭笑不得的特点它不确定的时候不会说“我不确定”它会流畅地输出一段结构完整、注释详细、看起来非常专业的代码。新手看到这种输出很容易被带进去觉得“这么完整肯定对”结果一打开浏览器要么样式崩了要么功能不是自己要的。这种“全能感”是语言模型的副作用。它本质上在做概率预测追求的是“下一段文字最像什么”而不是“这段代码能不能运行”。你要求越模糊它的预测空间越大输出的东西就越有可能只是“像”而不是“是”。我之前跟一个朋友解释这件事用了个比喻AI像一个话特别多、做事很积极的实习生。你把事情交代得模糊一点它就自己编个方案去执行。你批评它两句它下次可能改得更离谱因为它把你批评的点和自己脑补的目标混在一起了。想让这个实习生靠谱就得把施工图画清楚。放在AI编程里施工图就是需求模板。2. 一份能“治跑偏”的需求模板七个字段内幕2.1 先直接给你模板框架下面这个模板是我拿十几个页面反复试出来的精简版适合第一课的单页场景。它不是标准产品需求文档每一条都是用来约束AI行为、减少跑偏的你可以直接复制着用。字段要写清楚什么示例项目定位一句话说清是什么页面小区二手书互换活动的报名信息页目标用户给谁看用户有什么特点小区居民35-60岁不熟悉手机操作页面结构从上到下有哪些内容模块活动标题、时间地点、可换书单、报名表单、常见问题核心功能页面必须完成哪些事表单提交后页面不跳转显示“报名成功”提示视觉风格颜色、字体、整体气质绿色米白圆角卡片大字号简洁干净技术边界用什么、不用什么单个HTML文件内嵌CSS和JS不用框架不用数据库验收标准做到什么程度算完成双击文件能在Chrome打开手机上显示正常没有破图每个字段填的时候不用长篇大论说人话、说清楚就行。AI需要的是“明确的约束”不是“漂亮的文案”。2.2 七个字段为什么能堵住跑偏我把每个字段的作用拆开说一下你就知道为什么缺了它容易出问题。项目定位是最重要的一道锚。它让AI先判断“这是一个什么类型的页面”。同样是网页报名页和营销着陆页的结构完全不同。你不说定位AI默认往“高端大气”方向做你说了“小区活动通知”它至少不会给你放一个全屏视觉焦点。目标用户直接影响字号、按钮大小和配色。给老年人用的页面字体要大、对比要清楚给年轻人看的技术项目页用暗黑风也没问题。这个字段相当于让AI替用户着想而不是替自己“炫技”。页面结构是给AI画好的骨架。它相当于告诉AI“我只想要这几层楼别给我盖五十层。”AI跑偏最常见的方式就是多出板块、多出区块你在结构里把清单列出来它就没法自由扩编。核心功能这个字段最容易漏。很多人上来就说“做个报名页”但不说清楚提交按钮点了之后要干什么。AI可能会做成跳转到某个网址也可能会自己写一个邮件发送接口而这些都不是你想要的。你明确写“点击后页面不跳转就地显示成功提示”它就不会去画蛇添足。视觉风格是给AI的审美做限制。不说配色它就用最保险的蓝白渐变说了配色它至少会照着来。想进一步省事可以在模板里写“CSS变量统一管理颜色方便以后改主题色”这样后续修改也会轻松很多。技术边界对新手来说最关键。很多AI生成的网页用到了在线CDN、外部字体库、远程图片这些资源一旦断网或者链接失效页面就大面积空白。你在技术边界写清楚“单文件、无外部依赖”出来的页面会更皮实也更容易上手。验收标准是最后一道防跑偏闸门。它不直接约束AI生成过程但它约束你拿到代码后你不要继续聊“再帮我加点这个、加点那个”而是先对照验收标准检查有没有达标。这一步能拦住很多无效折腾。2.3 进阶加一条“负向清单”模板里最好再加一个“负向清单”也就是明确告诉AI“不要做什么”。AI特别擅长加戏负向清单就是给它划上限。举个例子可以在技术边界里追加一句“不要使用轮播图不要使用弹窗不要使用任何动画和动效不要使用外部图片链接。”一句话就能省掉很多翻车机会。负向清单不一定要写很长把你最不想要的三五样东西列出来就行。我一般至少会写“不要新增额外板块不要自动弹窗所有装饰性图形用纯CSS画。”然后在AI开始写代码前直接把这句话当成最高优先级。3. 用模板做出第一个网页一次完整的实战记录3.1 这次我选的案例与填好的模板理论说再多不如直接跑一遍。下面我以“小区二手书互换活动报名页”为例走一遍完整流程。你可以把这个案例替换成自己的项目比如个人介绍页、宠物领养信息页、读书笔记汇总页等。我的模板填写如下项目定位小区二手书互换活动的报名与信息展示页静态单页。目标用户小区居民年龄段35-60不熟悉新技术习惯大字号和手机浏览。页面结构顶部活动标题、活动时间地点说明、可交换书单列表、报名表单、常见问题三问。核心功能表单填写姓名、楼栋号和手机号点击报名提交后页面不跳转按钮下方显示“报名成功活动当天现场签到即可”书单列表用表格展示包含书名、原主人、交换条件。视觉风格绿色和米白为主圆角卡片字体偏大排版宽松避免花哨效果。技术边界只用一个HTML文件CSS写在style标签里JavaScript写在script标签里不用框架不用数据库不引用任何CDN和外部图片。验收标准双击html文件能在Chrome正常打开手机宽度下内容不横向溢出没有破图或乱码所有文字清晰可读。3.2 第一句提示词这样写模板填好之后不是直接把七段文字复制给AI就行还要加一句引导词。重点是要让AI知道“这条需求说了算你别发挥。”我实际使用的提示词是这个结构请严格按照下面的需求模板生成一个网页。必须遵守技术边界不要新增任何需求里没有提到的功能和板块。代码写在单个HTML文件中包含完整的CSS和JavaScript。如果某项功能较复杂不要自行实现用 TODO 注释标出即可。需求如下 【项目定位】小区二手书互换活动的报名与信息展示页静态单页。 【目标用户】小区居民年龄段35到60手机浏览为主。 【页面结构】顶部活动标题、活动时间地点说明、可交换书单列表、报名表单、常见问题三问。 【核心功能】表单包含姓名、楼栋号、手机号点击报名提交后页面不跳转按钮下方显示“报名成功活动当天现场签到即可”书单表格包含书名、原主人、交换条件。 【视觉风格】绿色和米白配色圆角卡片大字号排版宽松不要动画。 【技术边界】只用一个HTML文件CSS写在style标签里JS写在script标签里不使用框架、数据库不引用CDN、外部图片。 【验收标准】双击打开显示正常手机宽度下无横向滚动。这段提示词的核心特点有两个一是把“不要新增需求外功能”写在了开头二是用“如果复杂就用 TODO 标出”替代了AI自行扩功能。后面这一点特别管用很多AI看到复杂需求时不告诉你做不到而是硬造一段看起来很厉害但根本不运行的代码。尽早让它学会“标TODO”能少踩很多坑。3.3 拿到第一版代码先做“验收”别急着继续改AI生成后把代码复制到电脑上命名成index.html双击用Chrome打开。这个动作一定要先做不要着急让AI“再帮我改改”。先对照验收标准走一遍页面有没有显示完整表格有没有正常展示表单提交后有没有显示成功提示把浏览器窗口拖窄模拟手机宽度内容有没有溢出我第一次跑的时候页面整体结构比预期好但发现两个问题一是手机宽度下表单输入框有点挤二是“提交成功”提示出现后页面滚动位置没变化用户不容易看到。这两点属于“验收阶段”发现的典型问题适合进入下一步修改。3.4 两轮修改记录每次只提一条明确指令修改AI生成代码时最忌讳一次提五条意见。AI会努力满足所有需求结果常常为了某个细节把其他部分改崩。我的做法是“一轮只改一件事”。第一轮我提的是按钮反馈问题请修改表单提交流程点击报名按钮后不要跳转页面在按钮下方显示一行绿色文字“报名成功活动当天现场签到即可”。其它所有布局、颜色、结构保持不变只改JavaScript部分。第二轮我处理的是手机端适配请优化手机宽度显示所有卡片和表单中宽度不超过屏幕的95%输入框左右留出适当空间不要出现横向滚动条。只调整CSS不要动HTML结构和JavaScript逻辑。两次修改之后页面已经达到验收标准。整个过程我没有手写一行代码但我全程在扮演“验收人”和“改需求的产品经理”这两个角色。这种意识比背100条提示词都重要。4. 跑偏高发场景与急救方案我帮你提前踩过这些坑模板不是万能的它在大多数情况下能把跑偏率压到很低但AI生成的过程依然有随机性。下面三个场景是新手最容易遇到的我把急救方法一起写出来遇到时照着抄就行。4.1 场景一越改越乱刚改好的功能转眼就没了这是最常见的情况。你在一个对话里不断让AI追加修改聊了七八轮之后突然发现第一版里正常的表格变了按钮样式也丢了。你想往回找但聊天记录已经滚得密密麻麻。原因在于长对话里AI收到的信息太多新指令和旧代码之间出现矛盾。它为了满足你最新这句话可能偷偷丢弃了前面的某个约束。急救办法很简单每改完一轮就把当前代码保存成一个版本文件比如index_v1.html、index_v2.html。不要在同一个会话里连改超过三轮。三轮还改不明白就另起新会话。新会话里重新粘贴简洁版需求模板然后把旧代码整段发过去再说目标改动。我自己的习惯是每轮修改前先另存旧版本。这不用什么高级工具就是文件管理器里复制粘贴。跑偏不可怕可怕的是没有后悔药。4.2 场景二图片和图标全是“空气”打开全是破图AI生成网页时经常引用外部图片链接。问题在于这些链接可能是模型“编”出来的也可能来自不可靠的第三方站点。你双击打开页面显示出一堆破图标和空白占位效果非常劝退。这也是我在“技术边界”里围堵外部图片的原因。如果你已经生成的代码里出现了外链图片不用跟AI讨论“为什么用外部链接”直接给它下死命令删除所有外部图片链接。凡是原来放图片的位置都用CSS渐变或Unicode文字符号代替确保不依赖任何外部请求。如果页面里确实需要真实图片比如活动海报那就提前把图片下载到本地跟html文件放在同一个文件夹里然后在需求里明确写“图片使用相对路径例如 img/poster.jpg”。这一步看起来简单却是很多新手完全没意识到的问题。4.3 场景三你说“换个颜色”AI把整个页面重建了一遍颜色这种需求听起来很明确但AI的“换颜色”可能指全局色板、按钮色、背景色、文字色。它一激动干脆把所有CSS都重构了结果你原本满意的布局也被顺带改掉。急救方案是在提示词里把“只改CSS”和“不动结构”一句话钉死把页面的主题色从蓝色改成绿色。只改CSS中变量和涉及颜色的部分不要动HTML结构、不要新增样式类、不要改任何JavaScript逻辑。如果你一开始就在模板里写了“用CSS变量统一管理颜色”这时只需改一个变量值AI的发挥空间会被压缩到最小。这也是为什么我总强调技术边界和代码规范性。还有一个通用紧急句让AI先列计划再动手。先不要修改任何代码。请列出你打算调整的3个点我确认后再执行。这句话能拦住绝大多数“大刀阔斧式跑偏”。AI先花几秒钟输出计划你一看不对就喊停比让它直接改完再看结果省时得多。4.4 生成结果忽然崩了优先级最高的处置顺序真遇到代码崩了、页面白屏的情况不要慌按这个顺序处理把当前代码复制回AI请求它“先解释哪一行导致报错再给修复方案”。如果解释不清直接回滚到最近能正常打开的版本。新会话里粘贴回滚版本代码重新提出修改需求。修改需求必须包含一句“不要重构整体结构只做局部修复”。这套顺序我用了很久很少有一次解决不了的。核心思路是保住能用的版本再在小范围内做手术。5. 第一课把期待值放对模板能兜底但别指望全自动5.1 模板的适用边界这套需求模板最适合做单页、展示页、轻交互页面。如果你想做登录系统、在线支付、内容社区、实时聊天光靠模板聊天是聊不出来的你需要先理解后端、数据库、接口这些概念。第一课不用碰那些东西但心里要有个边不要拿着模板去硬啃一个复杂项目最后让AI给你“造”一堆根本跑不起来的接口代码。更务实的做法是如果一个功能听起来复杂就在需求里明确写“先不做”或者“用按钮提示功能开发中”。一个能在浏览器里正常打开的简单页面比一个写着“登录、分享、收藏”但全是死按钮的豪华页面有价值得多。5.2 第一课成功的标准第一课的“会做网页”到底指什么我的判断标准很简单能独立把需求模板填出来。能把AI给的代码保存成html文件并用浏览器打开。能对照验收标准发现问题。能通过一轮只改一件事的方式把页面调成自己想要的样子。这四条里没有一条要求你“手写代码”但每一条都是编程思维的地基。你会开始像一个开发者那样思考先定义问题再确定边界然后验收输出。比起背语法这个思维过程才是长期有用的。5.3 下一课可以练什么方向如果你第一课已经走通下一步我建议从“文字模板”升级到“图像配合”也就是先把页面结构用线框图画出来再让AI照着还原。你可以用纸笔画也可以用PPT、Figma这类工具。把线框图转成一句话发给AI这是页面的线框结构。按这种结构生成HTML不要新增任何线框里没有的模块。这种做法的好处是页面结构更稳AI几乎不会再自由扩版。等到这一步也熟练了你再去看基础HTML标签和CSS属性会发现自己理解得非常快因为你已经带着实际项目问题在学习。6. 一份我常用的“反跑偏”句式清单直接抄走用6.1 单轮修改专用句式“只做一个修改……。其余CSS、HTML结构、JavaScript逻辑全部保持原样。”“不要新增页面区块、不要新增交互、不要新增文案。”“对于修改效果请先说明你打算改哪几处我确认后再改。”这三句能覆盖绝大多数局部调整场景。核心是给AI画一个“最小改动范围”。6.2 兜底保护句式“不要使用任何外部链接资源包括CDN、字体、图片、图标库。”“如果某处不确定怎么做不要自己编造数据或功能用TODO注释标出。”“如果某项改变会影响现有布局请采用更保守的方案并在回复第一行说明。”兜底句作用于AI的“自信脑补”强迫它遇到歧义时选择保守路线而不是炫技路线。我不要求它“不犯错”只要求它“犯错时留有余地”。6.3 记录习惯比工具更重要最后说点实在的我见过很多人收藏了两百个AI编程教程最后依然做不出一个能用的页面因为没人教他们做记录。我自己就养成了一个很笨但很有效的习惯——每个项目建一个文件夹里面放着需求模板的md文件。每一版html文件按v1、v2、v3编号。一段记录踩坑过程的文本笔记只写日期和问题描述。一旦发现AI这轮跑偏我不依赖聊天记录找回老版本而是直接打开文件夹里最近一版能用的文件。这一套方法我把很多朋友都带上了路效果比任何提示词都稳定。你也可以直接把上面的模板和句式复制走第一次用的时候不需要理解太深。填需求时如果某个字段不知道怎么写就先用一句话说“这是个展示信息的网页”AI也会跑偏得轻一些。慢慢试上两三个页面你就知道哪些字段对你来说最重要了。等你回头再看“AI写代码总跑偏”这个问题大概率会笑着说一句不是AI太能跑是我当年真的说得太少。