丢一句"帮我做个网页"
AI 会在几秒内给你一个完整页面:导航、图片、段落、按钮都齐。看着挺像回事,读下去却发现服务范围是编的,联系电话是个占位符,配图是别人的产品照。想改到自己能用,等于把内容重写一遍。
先把信息写全再生成
页面目标、给谁看、必须出现的内容、不要出现的内容各写一行,再配上真实的素材。生成的初版已经能用上七成,剩下的是微调措辞和替换几张图。
同样是用 AI 做网页,两拨人花的时间差不多,结果差得很远。差别不在提示词写得多花哨,而在动手之前准备了多少东西。生成这一步现在是按秒算的,真正吃时间的是前面理材料、后面做检查这两段。
把用 AI 做网页这件事拆开来看,它其实是三个动作接在一起:想清楚要什么、让工具生成、验收并改到能用。多数人只盯着中间那一步,把另外两步交给运气,于是反复重生成,越生成越不像。
一、用 AI 做网页其实有三条路,先分清自己走哪条
"AI 做网页"这个说法太笼统,实际用起来至少分三种做法,适合的人并不一样。有人拿结果不满意就换工具,其实是走错了路:用对话式工具做需要长期维护的站,或者用模板系统做只需要一页的活动页,都会觉得别扭。
三条路各有所长,挑之前先看自己后面要不要经常改:
| 做法 | 上手难度 | 适合什么场景 | 主要短板 |
|---|---|---|---|
| 对话式生成整页 | 最低,会打字就行 | 活动页、临时展示页、有明确参考样式的小页面 | 改第三轮之后容易失控,结构会越改越乱 |
| 模板加 AI 填内容 | 中等,需要看懂栏目结构 | 服务介绍页、企业展示页、需要长期维护的站点 | 内容容易套模板腔,几页读下来一个语气 |
| 自己搭骨架,AI 补细节 | 偏高,要能看代码 | 有特殊功能需求的页面、要接表单和统计的入口页 | 前期慢,没接触过代码的人上手吃力 |
选法的判断标准很朴素:这个页面半年后还要不要改。只上线一次、投完就撤的,用对话式生成最省事;打算长期用、以后还要加内容或加页面的,一开始就该选能维护的做法,别为了省两天时间把自己的后路堵住。
二、动手之前先把材料凑齐,这一步省不掉
做过几轮之后就会形成一个习惯:打开工具之前,先把要放上去的东西在文档里列一遍。列得越具体,生成出来的初版越接近成品。反过来,材料空着就开始生成,AI 只能拿通用话术填空,填出来的内容你一句都用不上,还得从头改。
一份能直接用上的材料大致包含这几样,缺哪样后面就会在那处卡住:
- 业务信息:做什么、面向哪个区域、服务哪些人,用两三句话说清楚,不要写成宣传语;
- 服务与价格口径:哪些项目、大致什么价位、怎么计价、什么情况会额外收费;
- 真实凭据:经营年限、实际地址、能公开的资质、做过的项目,一条就够,编的不要放;
- 联系方式:电话、微信、表单收件地址,生成前就确认好,别留占位符;
- 图片素材:没有实拍图就先用纯色块或文字排版顶上,别拿网图凑数;
- 页面目标:这页要访客做什么,打电话、留言还是加微信,只定一个主目标。
材料一时凑不齐怎么办:
把页面拆成两批做。第一批只放已经确定的内容,服务介绍、联系方式、地址这些;价格和案例留成占位,等素材齐了再补。宁可页面先短一点,也别让 AI 去猜价格和案例,猜出来的数字一旦发出去,后面很难收回来。
有一类信息特别容易被漏掉:服务边界。你不做什么、哪些情况接不了、超出范围怎么处理,这些写清楚比多写三条优势更有用,它决定了页面招来的是不是你能接的单。
三、需求要写成一份能给出去的单子,不是聊几句就开工
和 AI 来回对话有个隐藏成本:前面聊过的约束,聊到第五轮它就不太记得了。所以更省事的做法不是"边聊边改",而是先写一份相对完整的说明,一次性给出去,后面每次改动都在这个基础上提要求。
这份说明不用写得专业,把六件事写清楚就够用。结构上参考页面的实际顺序,效果比抽象描述好得多:
页面目标:访客看完后拨打电话咨询,不做在线下单访客是谁:本地二手房业主,多数在手机上浏览页面结构:顶部定位一句话 → 服务项目三条 → 价格口径 → 三个案例→ 常见问题 → 联系方式必须出现:服务范围、计价方式、营业时间、真实联系电话不要出现:承诺效果的表述、没有来源的数据、别人的图片风格参考:干净、字大、按钮明显,不要花哨动效"不要出现"这一栏经常被人忽略,实际最省时间。不写清楚,AI 会顺手补上"行业领先""效果显著""百分百满意"这类话,你还要一句句挑出来删。把禁区写在前面,它生成的初稿就能直接进入检查环节。
改的时候守住一条:一次只提一个改动方向。同时要求"标题换掉、配色改深、加一个区块、再补两段介绍",出来的页面往往一半合意一半走样,连哪一处是想要的都分不清。改一处、看一眼、再改下一处,反而更快。
四、页面出来之后,四遍检查一遍都不能省
AI 生成的页面有个共同特点:远看完整,近看有坑。它会把不存在的服务写进去,把图片路径指向一个空地址,把小屏上的菜单挤成一团。这些都不是能靠"再生成一次"解决的,只能挨个查。把检查分成四遍,每遍只盯一类问题,比通读十遍都有效:
服务项目、价格口径、营业时间、地址电话逐条核对。重点看有没有凭空出现的承诺、数字和资质,凡是自己确认不了的,宁可删掉。联系方式这一项要特别留意,AI 留下的占位 *** 极容易漏过。
菜单项和页面里的栏目是否对得上,按钮点了会不会跳到正确的位置,锚点能不能落到对应的区块。生成时常出现菜单写了五个入口、页面上只做了三块的错位。
用手机真机走一遍,重点看图有没有被裁掉一半、文字会不会溢出屏幕、按钮够不够大。大标题在宽屏好看,在窄屏可能一行挤成三行,这类问题只有真机才看得出来。
在正常网络和较慢网络下各打开一次,看首屏多久能出来。首屏大图体积要压下来,格式能转 WebP 就转,非首屏图片加延迟加载,图片写上宽高,避免加载过程中页面来回抖动。
三处最常被漏掉的细节:
浏览器标签上的标题和搜索结果里显示的描述,AI 生成时经常留成默认值或者直接截取首段,发布前逐页看一眼;页面只有一个主标题,往下按层级排,别整页都是同样规格的大字;图片的说明文字该填就填,既方便看不清图的读者,也方便程序理解图片内容。
生成的页面里带着演示用的内容,要不要留着?
一条都别留。演示用的标题、示例价格、占位图片、虚构的客户评价,发布出去就是实实在在的误导。正规做法是交付前全部替换掉,替换不掉的部分就删掉区块,页面短一点没关系。
页面需要放表单,检查哪几点?
三项:在手机上输入顺不顺手,字段够不够少;提交之后能不能真的收到,自己填一条测试信息把流程走完;有没有基本的拦截,垃圾提交多的页面要加一道简单的验证。收不到消息的表单等于没做。
五、改起来比生成难,关键是把改动分层做
页面第一次生成,多数人还满意;难受的是第二次、第三次改动。有人说"把这段改短一点",AI 顺手把整页重新排了一遍,原本调好的间距和配色也一起变了。会出这种问题,是因为把不同层次的改动混在一句话里提了。
页面上其实有三层东西:文字内容、图片素材、版式和结构。改文字不该动版式,换图不该改结构。按这个分法提要求,返工量会小很多:
| 改动类型 | 容易出什么问题 | 提要求的方式 | 注意 |
|---|---|---|---|
| 改文字 | 整段重写,原来的信息被替换掉 | 指明哪一段、改成什么意思,其他不动 | 改完对照原文,确认没丢信息 |
| 换图片 | 比例被拉伸,或把整块版式带歪 | 只指定替换哪张、保持原尺寸比例 | 换成自己拍或有权使用的图 |
| 调版式与配色 | 牵一发动全身,手机端出现错位 | 一次只调一处,改完先在手机上过一遍 | 改版式前把当前版本存一份 |
| 加一个区块 | 新内容被塞进原有的框里,挤成一团 | 说明放在哪个区块之后、要不要单独占一行 | 加上去之后检查锚点和菜单是否同步 |
| 接表单与统计 | 生成时留的是演示地址,收不到消息 | 要求只改表单部分,给出接收地址 | 接完自己提一条测试信息走完整流程 |
每改一轮就把当前版本存一份,命名加上日期。听着麻烦,真出事的时候能救命:改坏了一键退回去,也能说清"数据变化到底对应哪一次改动"。改版越频繁的页面,这件事越值钱。
页面做到一定数量之后,能不能长期省事就取决于一件事:骨架和内容有没有分开。用 UC 建站系统做这类页面时,模板层负责版式和结构,内容层只放文字和图片,改文案的时候碰不到版式,加页面的时候直接复用同一套骨架;页面以 HTML 直出的方式输出,打开速度快,搜索引擎也能顺利读到完整内容,不用为加载方式额外操心。
另一个省事的习惯:改动之前先想好这次要改的是"信息"还是"观感"。信息类改动只动文字,观感类改动只动版式,两类混在一起提,是返工的主要来源。
六、上线前的那一遍,当成一个陌生访客把流程走完
前面四遍检查看的是页面本身,这一遍看的是过程:从点开链接开始,到最想让人做的那个动作结束,中间顺不顺。检查的人最好换一个没参与制作的人来做,自己查自己的页面,眼睛会自动跳过已经熟悉的地方。
这一遍要盯的就是几件具体的事,做成一张清单逐项打勾:
手机真机打开首屏出现速度图片体积与格式按钮点击区域联系入口自测信息用途说明
做成清单的价值在于它可以交给别人做。页面做完让同事照着单子走一遍,十分钟就能发现制作者自己看不见的问题。清单本身也别写长,一屏能放下最好,太长的清单会被跳过。
有两处特别容易被跳过:一处是联系入口能不能真的收到消息,自己填一条测试信息,别等真有客户留言时才发现收件地址是旧的;另一处是收集信息时有没有说清用途,页面上留一句"信息仅用于与您联系",既是给访客的交代,也是自己做事的分寸。上线前的检查不是走过场,它决定了页面上线之后多久才会被人发现有问题,是被访客发现还是被你自己发现。
七、上线之后:怎么让半年后的自己还能管得动这个页面
页面上线和交付一个文档很像,麻烦都在后面。价格改了、电话换了、业务范围调整了,页面上还挂着半年前的版本。有的是页面上出问题,有的是自己找不回当时存的那版文件。能在做的时候就留好后路,后面几乎不用额外花时间:
版本记录
每次改动留一份文件,命名带上日期和改动内容。有了它,改坏了能退,出了问题能查,不用凭记忆猜哪一版是好的。
素材留底
原图、文字底稿、联系方式清单集中放一处,别散在聊天记录里。下次换图改文案不用到处找,也避免用了不清楚来源的图片。
内容更新节奏
价格、服务范围、案例这类内容按季度过一遍。不用大改,把过期信息换掉就够,页面长期保持准确比频繁改版更有用。
定期回查
页面能不能正常打开、图片有没有丢、表单还能不能收。这几项固定隔一段时间看一次,多半的突发问题都能提前发现。
用 AI 生成的页面,代码能放心用吗?
用来展示信息没有问题,但涉及收付款、会员、用户数据的功能,建议找懂技术的人过一遍再上线。生成的内容不需要每一行都看懂,但要知道数据存在哪里、提交之后流向什么地方。
页面做得差不多就发,还是等到完美?
信息准确、能正常打开、联系入口可用,这三条满足就可以发。配色和措辞可以上线之后慢慢调,留在本地改十遍带来的提升,通常不如先放出去看看真实访客的反应。
页面数量上来之后,最容易失控的是"不知道哪个页面出问题了"。用 UC 建站系统管理这批页面时,多站看板会把各站的索引量、流量和异常情况集中显示,哪个页面打不开、哪个站的数据掉下去,不用逐个打开去查;新增和更新的页面可以走双通道推送,把地址尽快告知搜索引擎,回查这件事才有人盯得住。
"AI 把做页面的门槛压低了,但页面上线之后能不能一直靠谱,靠的还是那几件笨功夫。"
再回到开头那个比例。生成这一步只占两成时间,是因为它本来就是最轻松的一段:工具替你把排版、配色、响应式这些重复劳动做完了。真正花时间的是前面把材料想清楚、把需求写明白,和后面把内容核对干净、把细节走一遍。这两段省不掉,也不该省。
如果手上正好有一个页面要做,可以先做一件很轻的事:把要放上去的信息写进一个文档,写完再打开工具。这一步不过二十分钟,能省掉后面来回改的很多轮。
(口径说明:文中图片体积、加载速度等建议参考了公开的前端性能实践资料,具体数值因页面内容与访问环境会有所不同;页面收录与搜索表现由搜索引擎判断,这里不作承诺;涉及医疗、金融、法律等领域的页面内容需按行业要求做人工审核。)


