如何用 AI 制作企业网站：从需求说明到表单验收
Neaptide · 2026年9月6日 · 9 分钟阅读 · 更新于: 2026年10月3日
以陶艺工作室为例，演示需求编写、页面布局、表单校验、服务器故障、上线与 SEO。附原创截图和可操作的教学网站。
本文目录
访客选好课程，填入邮箱，点击提交。页面显示“谢谢”，工作室却没有收到任何申请。网站看起来做完了，最要紧的那一步却没有走通。所以用 AI 建站，先想清楚两件事：访客要完成什么动作，你又凭什么确认这个动作成功了。
小型企业网站可以按这个顺序做：先整理真实的业务信息，定下一个主要访客流程，再搭建页面、检查窄屏布局、测试表单。上线后，到公开网址把这些检查重做一遍。代码可以交给 AI 写和改，服务条件和验收结果还得有人负责确认。
我们为这篇文章做了什么
Forma 是虚构的陶艺工作室。我们制作了课程介绍、三步流程和练习表单，图片沿用上一篇配图教程。60 欧元的价格与课程条件均为虚构。下方五张图都是实际运行页面的截图。服务器会校验练习请求，但不保存申请，也不发送邮件。表单只接受 @example.com 地址。
1. 先整理事实，再讨论设计
只说“做一个现代感的网站”，等于什么都没交代。先写清课程适合谁、参与者会制作什么、费用包含哪些内容，以及何时领取作品。把确认过的信息保存在项目文件中，缺失项明确标记，不要让模型用编造的地址、评价或从业年限补齐。
2. 根据后续维护方式选择方案
如果员工需要经常更新内容，又不接触代码，应提前考虑编辑器或 CMS。小型定制网站也可以用代码项目加清晰的发布流程来维护。选方案时，先问以后由谁来更新，第一版做得多快倒在其次。
在能够操作文件的 AI 编程工具中打开项目文件夹。先请它列出页面结构和缺失信息，再实现页面。Codex 的入门操作见另一篇指南。照着下面的需求模板，可以把这次练习重做一遍。
为虚构陶艺工作室 Forma 制作教学网站。
课程面向零基础成人，时长 2 小时，每人 60 欧元，最多 8 人，包含材料和烧制。明确注明这些条件是虚构的。
页面包含课程介绍和按钮、三个流程步骤、表单。不要编造评价、地址或业绩数据。使用项目现有图片，窄屏时让文字与图片上下排列。
表单只接受 @example.com 练习邮箱和 1 到 8 名参与者。浏览器和服务器都要校验。不保存申请，不发送邮件，并在结果中说明。
加入服务器故障模拟：出错后保留输入，允许重试。先列出要修改的文件和验收方法。3. 用访客的眼光检查首屏
检查访客是否能看懂课程内容、价格和包含项目，再点击主要按钮，确认它确实跳到表单。示例中的图片与文字分开排版，因此改标题不需要重新生成图片。修改要求要提得具体，每次重要调整后保存一个能正常使用的版本。
4. 检查窄屏布局
两列改为上下排列，标题不会压住杯子。真正上线前，还要在手机上打开网站，唤起键盘，逐个填写字段，再点提交。桌面上的窄屏预览只能查到其中一部分。
检查宽屏和窄屏中的横向溢出、文字截断与元素重叠。用键盘操作链接和表单。逐项修复，并重新执行受影响的检查。5. 测试表单的三种状态
输入不正确
把人数填为 9。表单应在字段旁说明 1 到 8 的限制，将焦点移到错误处，并停止发送。浏览器校验是帮访客纠错的。服务器仍要独立校验一遍，因为请求可以绕过界面直接提交。
服务器出错
把人数改回 2，开启模拟故障。服务器会返回 HTTP 503。页面应说明失败并保留输入，不能显示申请成功。关闭故障后再次提交。
收到确认
有效请求会得到 HTTP 200，响应明确说明数据已校验、未保存、未转发。界面如实显示这个结果。请求进行中，提交按钮不可重复点击。
商业网站要先定好申请发往哪里：CRM、预约系统还是邮箱。发一条测试申请，然后到那个系统里把它找出来。邮件服务把邮件收进队列，不等于收件人已经收到。重试如果会产生重复记录，重复提交也得在服务器端处理。
示例通过了 12 项服务器处理测试，包括正确请求、错误邮箱与人数、不支持的格式、超大请求体和模拟故障。这些测试验证的是示例的功能，代替不了压力测试，也代替不了对完整预约系统的审计。
6. 发布后检查公开网址
代码仓库用于保存代码和版本记录，托管服务负责构建网站并让用户通过互联网访问。本项目用 GitHub 保存代码，用 Vercel 托管。小型网站不一定要单独购买虚拟专用服务器（VPS），但所选服务必须支持运行处理表单的服务器端代码。
- 保存可用版本，将仓库连接到托管服务。
- 检查构建和环境配置，集成密钥不要放进公开的页面代码。
- 在预览部署中测试链接、表单、错误与确认。
- 按照托管服务的说明连接域名，确认 HTTPS 正常。
- 在公开网址重复测试，并到实际接收系统核对申请。
预算应包含制作工作、AI 工具、域名、托管、表单服务和维护。AI 订阅费只是其中一项。
7. 让搜索与 AI 回答能够理解服务
为页面写清楚标题、描述和主标题。正文直接回答服务面向谁、价格包含什么、提交后会发生什么，不要把重要条件只放在图片中。多语言页面要检查独立网址和语言链接，结构化数据应与可见内容一致。
直接回答问题、明确说明条件，有助于读者理解和引用内容，但不能保证搜索排名或被 AI 回答采用。教学网站设置了 noindex，本文则面向搜索开放。
什么时候需要专业人员参与
- 网站涉及支付、账号或名额有限的预约。
- 无法追踪申请从表单到接收端的完整过程。
- 需要迁移现有网站并保留原有网址。
- 每次修改都会破坏其他功能。
提供具体流程、确认过的条件和测试结果。换成真实的工作室，要等负责人在自己的工作系统里找到那条正确的申请，这条流程才算验完。