上个月，我帮一家小公司把一个“正在建设中”的官网，做成了能正常打开、能收邮件的正式页面。从写代码到发布，前后加起来差不多一个小时，流程稳定之后，这个时间被我压到了半小时上下。这篇就是我的 AI 开发实战记录：不带什么花哨技巧，就是把“让 AI 帮公司做官网并发布上线”这件事讲清楚——为什么可以用 AI、提示词怎么组织、代码到手之后怎么检查、发布走哪条路线，以及哪些步骤看着很快、实际最容易翻车。如果你也刚接到“给公司做个官网”这种需求，又不想在这个项目上耗两周，这篇文章应该能帮你省掉不少弯路。

1. 先想清楚：半小时做的官网，到底应该包含哪些页

很多人一听到“官网”，第一反应就是复杂：后台管理系统、多级栏目、SEO、权限、数据库、服务器……其实对小公司来说，这些大部分都不需要。官网的核心任务只有三个：让访客知道你是干什么的、知道你做过什么、能顺利联系到你。想明白这一点，半个小时才可能做到。

1.1 我的“半小时官网”边界表

我习惯在动手前先把页面清单列出来，没有清单的 AI 生成就是纯碰运气。下面是我给一般小公司定的最小可行范围：

要不要独立“产品详情页”？我建议第一阶段不要。客户真要问产品细节，通常更愿意直接打电话或者加微信。等公司大了、产品多了，再单独扩展成多个页面也不迟。

还有个很重要的决定：不做动态后台，不用数据库。静态页面的意思是，代码就是一堆 HTML/CSS/JS，没有后端逻辑。访客请求页面时，服务器直接返回文件，速度快、不怕高并发、也不用担心被人打挂。对公司来说，更新内容只要改一下文字，用一个文本编辑器搞定就行。与其上 WordPress 再买主题再装插件，不如先让静态页面跑起来，这符合绝大多数小公司的真实节奏。

1.2 为什么静态页面是首选，而不是动态后台

动态后台最大的痛点不是建站本身，而是后续维护。你给公司做了一个后台，就等于接下了一个“永远需要照顾的系统”：要更新密码、要备份数据库、要处理插件兼容性。而静态页面几乎没有这部分成本，内容全部躺在文件里，放到哪台服务器都能跑，换平台也方便。

从时间上算也合理。用 AI 生成一个静态官网，通常只需要一次对话，10 分钟左右能拿到完整代码；动态网站如果用 AI 生成，往往会引入框架、数据库连接和服务器配置，排查成本远超半小时。所以我给这类需求定的原则很简单：能静态就不要动态，能一个页面就不要再拆五个。等业务确实需要博客、商城或者会员系统的时候，再在这个基础上加组件，比一开始就上一套重型系统要稳得多。

2. 提示词写得好，AI 才能一次交出能用的代码

AI 生成代码这件事，决定质量上限的不是 AI，而是提示词。你给它“帮我做个官网”这种需求，它只能给你一个极其模板化的东西；你给它公司名称、行业、配色、模块顺序、技术限制，它就能交出一个接近“可直接上线”的页面。区别就在于你有没有把需求讲成人话。

2.1 开写提示词之前：先把“素材包”备齐

我发现很多人卡在“不知道问 AI 要什么”，真正的原因是对自家公司的情况没整理清楚。提示词里放什么，页面就会长成什么样。我每次动手前会先收集下面这些信息：

• 公司名称，以及公司的业务一句话描述
• 想让访客第一眼看到的核心卖点（比如“服务了 200 家企业”“支持定制”“交付快”）
• 希望用的主色调和风格倾向（深色代表稳重，亮色代表活泼，没有想法就交给 AI 定）
• 电话、邮箱、地址等真实联系方式
• 已有的真实照片或 Logo，没有就让 AI 用占位符，后续自己替换

这些信息看起来琐碎，但缺了任何一个，AI 就会用“Lorem ipsum”和假电话号码来填。更麻烦的是，后期替换假数据要一处处找，比一开始写进提示词费事得多。

2.2 一个能直接复制的提示词模板

以下是我用过的、效果很稳定的模板，你可以直接替换方括号里的内容。核心原则是：给角色、给背景、给模块清单、给技术约束。

你是一名有十年经验的前端工程师，擅长做简洁的企业官网。请帮我生成一个静态公司官网页面，要求如下： 公司信息： - 公司名称：某咨询有限公司 - 一句话介绍：为企业提供数字化咨询与官网定制服务 - 核心卖点：3天交付官网、已有200家客户案例、提供后期维护 - 联系电话：400-800-1234 - 联系邮箱：hello@example.com - 地址：某市某区某路 88 号 页面结构（按从上到下的顺序）： 1. 顶部导航：公司简称 + 3个锚点链接（服务、案例、联系） 2. 首屏 hero：大标题“让企业官网不再成为麻烦”，副标题一行，一个按钮“查看服务” 3. 服务区：三张卡片，分别是“官网定制”“小程序开发”“数据分析培训” 4. 案例区：6个灰色占位块，表示客户Logo，配一句“服务过 200+ 企业客户” 5. 数据区：4列数字，例如“200+ 客户”“99% 好评”“3天 交付”“6年 口碑” 6. 联系区：公司地址、电话、邮箱，外加一个留言表单 7. 底部 footer：版权信息一行 技术要求： - 提供单个 index.html 文件，CSS 和 JS 写在同一个文件里，不依赖构建工具 - 使用纯 HTML/CSS/JavaScript，不用 React、Vue 等框架 - 响应式布局，手机端能正常浏览 - 所有图片先用灰色占位区块代替，不引用任何外部图片库 - 页面需要包含合理的 title、meta description、favicon - 配色以深蓝和浅灰为主，用一点橙色做按钮点缀 - 页面文案全部使用真实公司信息，不能出现 Lorem ipsum

这个模板里最容易被忽略的其实是两条：“不引用外部图片库”和“不依赖构建工具”。如果不加这两条，AI 会经常引入外部 CDN 上的演示代码或图标，到上线时这些资源可能被墙、可能失效，还可能有安全风险。限定成单个文件以后，整个页面就只有 index.html，部署步骤变得非常简洁。

2.3 迭代技巧：要改哪里，就说哪里，别让它重写

第一次生成大概率不会是完美的。颜色太土、间距不对、文案啰嗦，都很正常。这时候最忌讳的一句话是“重新帮我做一个更好的”。AI 没有“更好”的标准，重新来一次大概率只是随机换了一套布局。

我的做法是像指挥一个听话的实习生一样下指令：

• “把第三个卡片里的文字改短，控制在 50 字内。”
• “导航栏在手机上变成汉堡菜单，点击展开。”
• “首屏蓝色背景改成浅灰色，标题颜色改成深蓝色。”
• “把表单提交后的提示改成：提交成功，我们会尽快联系您。”

一次只改一个点，改一次就检查一次。这样做的好处是，上下文能保持连贯，AI 不会因为一次大型重构把前面做对的模块改坏。如果某个部分反复改不好，那就直接单独开一段新对话，把“要修改的 HTML 片段”和“想改成什么样”同时贴上去，生成的替换代码准确率会高很多。

3. 代码不是生成完就结束，上线前我要做四轮体检

AI 生成代码的能力已经很强，但它并不懂你的业务，也不理解“哪些内容一定不能错”。我见过有人让 AI 生成完网站直接上线，结果官网把“招聘邮箱”写成了一串乱字符，导航点了没反应，手机上两栏卡片堆在一起。这些错不会出现在 AI 的“自我介绍里”，只有在真实打开页面时才会暴露。所以我的习惯是：拿到代码后的前十分钟，什么都不干，先做四轮体检。

3.1 第一轮：页面能不能在所有设备上正常显示

在电脑上双击 index.html 就能打开，但这只是第一步。我会立刻打开浏览器的开发者工具，把视图切成手机模式，分别看 375px、768px 和 1440px 三个宽度下的效果。重点关注三个位置：导航栏有没有折叠成能用的菜单、卡片排列有没有变成一行、底部联系信息有没有溢出屏幕。

如果发现某些元素在手机屏幕上乱跳，不要着急自己改 CSS。把现象描述给 AI：“在 375px 宽度下，服务卡片一行放不下，被压缩变形了，帮我改成在小屏下每行只显示一张卡片。”AI 对这种特定问题的修复能力很强，一般一次就能改对。

3.2 第二轮：内容有没有占位符、错别字和假信息

把页面从头到尾读一遍，假装自己是一个第一次到访的用户。最常出问题的有三处：公司名称、电话号码、邮箱。AI 在生成时经常会“顺手”补上一个看起来很合理但实际不存在的内容。只要有一个字符不对，带来的信任损失是巨大的。

还有一个隐蔽问题：AI 喜欢把文案写得特别“营销腔”，比如“赋能”“闭环”“抓手”用得飞起。你可以让它改成更像正常人说话的风格：“请把页面上所有营销术语改成中性表达，例如‘赋能’改成‘帮助’，‘闭环’改成‘完整流程’。”这一步直接影响转化率，因为客户永远更喜欢看得懂的话。

3.3 第三轮：资源、安全和 SEO 基础项

静态页面最大的隐患是外部资源失效。我见过不少 AI 生成的页面会引用第三方字体库、图标库、统计脚本，一旦这些服务不稳定，页面就会出现字体乱跳、图标消失、加载很久的情况。体检时按 F12 打开控制台，看看有没有红色的网络请求报错，有就把它去掉或换成本地实现。

安全方面，特别注意代码里不要出现任何密钥、token、内部服务器地址。静态页面是公开的，里面的每一行代码都能被任意访客看到。也不要放任何自认为只有自己知道的后门信息。

SEO 基础项我检查得很机械，就三个地方：title 标签是不是公司真实名称加主营业务、meta description 能不能在 80 字内说清网站内容、图片有没有 alt 文字。这些改起来一分钟，但对后期被搜索到的影响很大。

3.4 第四轮：把这些代码变成可维护的项目

哪怕只打算用半小时做完，我也会坚持做两件事：初始化 git 仓库，把整个目录提交一次；把当时用的提示词存成一个 markdown 文件放进项目里。听起来麻烦，实际耗时不到三分钟。

半小时做完的网站，三个月后大概率要改内容。到那时候如果只剩一个 index.html，你可能已经忘了原来的设计思路；但如果项目里有history.md，你只需要把文件丢给 AI：“这是当时建站的提示词，现在我想改联系方式和新增一个团队介绍区，请直接生成修改后的完整文件。”整个维护流程又能控制在几分钟内。我自己的分类方法是：

site/ ├── index.html ├── images/ # 图片资源 ├── css/ # 如果 AI 生成了独立样式文件 └── prompt-history.md # 建站提示词和修改记录

提示：这轮体检不是给完美主义者准备的，而是给你自己留的退路。越是看起来“一行代码没写”的项目，越需要靠流程把意外兜住。

4. 发布上线的两条路线：托管平台快，服务器稳

代码没问题，接下来就是发布。很多人一听“发布”就以为要买服务器、配环境、装数据库，其实对静态官网来说没那么复杂。我把路线分成两种：用静态托管平台发布，以及放在自己的服务器上。前者适合绝大多数小公司，后者适合有运维基础、需要更高自由度的人。

4.1 路线 A：用静态托管平台发布（我最推荐）

静态托管平台做的事情很简单：你上传代码，它在公网给你一个地址，自动配上 HTTPS 证书，你以后每次更新代码，它自动同步上线。整个过程不需要懂服务器、不用管环境变量、甚至连命令行都不用熟悉。

实际操作流程大概是五步，前后十分钟：

1. 在本地把建站文件夹初始化成 git 仓库，提交一次代码。
2. 在代码托管平台创建一个空仓库，把本地代码推送上去。
3. 到静态托管平台用同一个账号授权，选择刚才的仓库。
4. 平台会自动识别静态站点，不需要配置构建命令，直接点发布。
5. 发布后平台会提供一个免费二级域名，先在浏览器里打开验证。

一切正常后，再绑定自己的域名。去域名服务商那里添加一条 CNAME 记录，指向托管平台给的地址，等待解析生效，之后访问自己公司的域名就能落到这个新网站上。HTTPS 证书这边不用操心，主流平台基本都是自动申请、自动续期。

4.2 路线 B：放在自有服务器加 Web 服务器上

如果你已经有服务器，或者客户明确要求网站必须放在自己控制的机器上，那路线也很快。假设你用 Linux 服务器，安装了常见的 Web 服务器软件（我用的是 Nginx，用其他软件逻辑一致），只需要三步：

第一步，把本地的 index.html 上传到服务器，例如/var/www/company-site/目录下。第二步，写一个最简单的 Nginx 配置：

server { listen 80; server_name example.com www.example.com; root /var/www/company-site; index index.html; location / { try_files $uri $uri/ =404; } }

保存配置后执行：

nginx -t # 检查配置是否有语法错误 systemctl reload nginx # 重新加载配置

第三步，让服务器可以被公网访问。这一步通常包括防火墙放行 80/443 端口、域名解析 A 记录指向服务器 IP、再申请一份免费 HTTPS 证书并把 80 端口的请求跳到 443。到这里，网站就正式上线了。

4.3 两条路的成本对比

我建议第一次做公司官网的人直接选路线 A。不是因为服务器路线不好，而是因为它把“发布”这件事的复杂度压低到了一个文件两个操作的程度，剩下的精力应该留给内容和后续迭代。

5. 最容易踩的隐形坑：第一次 AI 建站翻车清单

前面讲的都是顺利路径，但实际做起来总有几件事会突然跳出来拖你十分钟。这些坑不会出现在教程里，却几乎人人都会碰到。我把它们一条条列出来，你对照着看，能省掉不少试错时间。

5.1 表单看起来很真，邮件却一封都收不到

AI 写表单很容易：输入框、按钮、“提交成功”的弹窗，全套都有。但静态页面没有后端，AI 只能写一个前端模拟逻辑——看起来提交成功了，实际上信息发不到任何人那里。这不是 AI 的锅，是静态架构本身的特性。

解决办法其实就是把“表单提交”这件事拆出去。最简单的方式是把表单换成一个超链接，点击后调用系统邮件客户端发送邮件；或者用市面上常见的表单中转服务，把一个隐藏字段设置成你的接收邮箱，提交后由它帮你收信。不管选哪种，上线前一定自己填一次表单，确认能收到通知才算完。

5.2 图片和文案是最大的时间黑洞

AI 生成代码很快，但它变不出你公司真实的照片、客户案例截图和产品展示图。我见过很多人 AI 生成网站只花了十分钟，却花了两个小时在找一张合适的首页大图。最后要么用了有版权风险的图，要么放了一张明显模糊的随手拍，整体质感反而下来了。

我的建议是：第一阶段就用干净的色块和图标代替真实图片，把页面能做到“简洁、不空、像样”，等拿到了正式照片再替换。你告诉 AI“所有图片先用灰色占位区块代替”，发布前再在最显眼的位置放一张真实图片就已经足够了。千万不要为了好看去搜一张不明来源的商用图。

5.3 域名解析、缓存和“白屏”的急救顺序

绑定域名后，最怕遇到打开是空白页。这时候不要急着找 AI，按顺序排查：

• 在浏览器里直接用托管平台给的二级域名打开，如果正常，说明代码没问题，问题在域名解析。
• 检查 CNAME 记录是否写错，有没有把“www”单独解析到平台。
• 确认缓存：刚改完 DNS 的几分钟到几小时内，不同地区解析生效时间不一样，可以用手机流量访问试试，如果手机能打开，就是本机缓存问题。

记住一个关键动作：改域名和刷新页面时，很多“白屏”其实是浏览器缓存了旧文件。按 Ctrl+Shift+R（Windows）或 Command+Shift+R（Mac）强制刷新，能解决一大半看起来“网站坏了”的情况。

5.4 换个对话窗口，等于丢掉所有上下文

AI 网站的一个隐藏风险是上下文只存在于单次对话里。今天你让 AI 生成了一个页面，下周你想改个按钮文案，如果新建了一个对话，AI 完全不记得你之前的要求，只能用“依据常见做法”重新生成一堆假设。所以：

• 同一个项目的修改，尽量回到原来的对话里进行。
• 实在找不回原对话，就把项目里的 prompt-history.md 和当前 index.html 一起贴给它，并要求“不要改布局，只改我指定的内容”。

我自己的习惯是每次修改前先告诉 AI：“这是现有网站完整代码，请先不要改动，我会在下一轮告诉你具体改哪里。”这样能避免 AI 随手帮你“优化”一些没让你动的东西。

5.5 半小时和“实际够用”之间的差距

我必须说实话：半小时这个数字成立的前提是文案、图片、联系方式全部都齐。大多数公司第一次做官网时，真正的瓶颈不是 AI 写代码，而是“商务经理在开会、文案还在打草稿、老板还没确认主色调”。如果你把这些素材整理时间也算进去，很可能需要一个下午。

不要因为这个就觉得 AI 没用。把范围划好、把素材交齐以后，AI 生成加发布半小时是真做得到的。我在实际操作中的体会是，项目成功的关键从来不是“用了哪个模型”，而是“我在它生成之后有没有花十分钟认真检查”。AI 负责把骨架搭好，你能不能让它长出血肉，取决于你愿意投入多少判断力。这套流程我第一次跑完用了快两小时，后来熟练了，真的能压到半小时内。

最后再分享一个我正在用的小习惯：每次给公司建完站，我都会把提示词、修改记录、账号绑定的域名三项整理成一个简单的README.md。下次无论是换人接手、公司改版，还是有人问“这个网站谁做的”，我都可以直接把这个文件丢过去，三分钟解释完所有来龙去脉。AI 开发实战这件事，到最后拼的就是“记录”和“检查”这四个字。