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