最近在整理团队建站方案时一个很明显的感受是十年前大家讨论的是“用什么编辑器写 HTML”五年前讨论的是“用哪个前端框架更合适”而今天很多同学直接问我“能不能让 AI 把整个网站先搭出来”。这个变化正好对应了“From Handmade to AI-Made Websites”这个主题。网站开发这二十多年经历了从手工写代码到使用可视化工具再到基于组件的工程化最后进入 AI 生成代码的快速迭代阶段。很多开发者既兴奋又焦虑兴奋的是 AI 确实能提高效率焦虑的是如果 AI 能把网站都生成出来开发者还能做什么。这篇文章会先梳理网站开发方式的演进脉络再解释 AI-Made 网站背后的技术原理然后通过“AI 生成一个页面组件”和“配置驱动静态站生成脚本”两个实战案例带大家完整走一遍 AI 辅助建站的流程。内容偏实践适合前端开发者、后端开发者、对 AI 建站感兴趣的产品和运维同学。1. 网站开发 20 年从手工到 AI-Made 的四个阶段1.1 手工编码时代2000 年代前后早期的网站开发没有现在这么丰富的框架和工具。那时一个网站往往由若干个 HTML 页面组成样式表、JavaScript 脚本都需要手工维护。为了做导航栏、轮播图、表单校验这些功能开发者要把代码一行行写出来甚至需要掌握非常琐碎的浏览器兼容技巧。这个阶段的核心关键词是“控制”。开发者对每一个标签、每一个样式属性都有绝对的控制权但代价是开发效率低、维护成本高。一个简单的企业官网可能也要花一到两周时间。当时常用的编辑器包括 Dreamweaver、FrontPage 等可视化工具但它们生成的代码往往不够干净后来很多开发者又回到纯手工编码。1.2 CMS 与前后端分离时代2010 年代前后到了 2010 年前后网站开发进入了一个分水岭。WordPress、Drupal 等 CMS 工具让非技术人员也能快速搭建内容站点开发者不需要为每个页面重复去写 HTML而是基于主题模板和插件去做定制。与此同时前后端分离思想逐渐流行。React、Vue 等前端框架让页面交互变得更加复杂和高效而后端只负责提供 API 接口。开发任务拆成了前端工程、后端服务、数据库设计、运维部署等更细的分工。这个阶段对开发者的要求不再是“能写页面”而是“能设计可扩展的架构”。1.3 低代码与无代码时代近十年低代码和无代码平台的出现把网站开发的准入门槛进一步降低了。用户可以通过拖拽组件、配置数据模型、设置业务流程来搭建应用。对于企业内部的 OA 系统、简单的信息展示站这种方式的成本远低于传统开发。不过低代码平台也有它的边界。高度定制化的业务逻辑、复杂的前端交互、高并发场景下的性能调优仍然需要专业开发者介入。而且部分低代码平台存在锁定效应一旦业务规模变大迁移成本会非常高。1.4 AI 建站时代当下最近几年随着大语言模型和生成式 AI 的快速发展AI 建站成为又一个热门方向。AI 建站并不是简单的“套模板”而是让 AI 理解你的需求后自动生成结构完整、样式可用的代码或页面。常见的形态包括AI 编程助手如 Cursor、通义灵码等在 IDE 中辅助生成代码。对话式建站工具输入一句话描述生成整站代码。AI Agent通过智能体自动完成需求分析、代码生成、依赖安装、调试等任务。严格来说AI 建站不会完全取代前面的几种方式但它正在改变开发者的工作方式从“手工写每一行代码”变成“定义需求、审查结果、修复问题”。阶段核心工具开发者角色代表产物手工编码时代Dreamweaver、纯文本编辑器手写 HTML/CSS/JS静态页面CMS/前后端分离时代WordPress、React、Vue工程化开发动态网站/单页应用低代码/无代码时代Webflow、Bubble业务配置者可视化应用AI 建站时代大模型 API、AI Agent需求定义与代码审查者AI 生成页面/整站2. AI-Made 网站的核心技术原理2.1 大语言模型如何生成网页从技术层面看网页本质上是一种结构化文本HTML 负责结构CSS 负责样式JavaScript 负责行为。大语言模型本质上是一个强大的文本生成模型它通过学习海量的网页源码和文档学会了“输入一段需求描述输出对应的 HTML/CSS/JS”的能力。要让模型生成高质量的网页Prompt 的结构很重要。一个比较有效的 Prompt 通常包含四个部分角色设定告诉 AI 你希望它以什么身份回答。背景信息解释目标网站的类型和用途。输出要求明确格式、技术栈、样式风格。边界条件例如不引入外部库、兼容移动端等。2.2 AI Agent 与智能体工作流单纯的“AI 生成代码”已经不算新鲜事现在的焦点是 AI Agent。Agent 不是一个简单的对话机器人而是一个能自主拆解任务、调用工具、执行步骤并修正错误的智能体。在 AI 建站场景中一个典型的 Agent 工作流可以是接收用户需求例如“帮我建一个个人博客包含首页、文章列表和关于我页面”。拆解任务决定生成哪些页面、选择什么技术栈。调用代码生成器生成项目结构、页面代码和配置文件。执行验证运行构建命令检查是否报错。迭代修复如果构建失败自动分析日志并调整代码。输出可部署结果。这也是“AI 应用开发”和“AI 智能体”逐渐变成热词的原因。对于开发者来说掌握 Agent 的工作逻辑比单纯会写 Prompt 更有价值。2.3 从生成到部署的完整链路AI-Made 网站并不等于“生成完就不管了”。从生成到上线仍然需要一条完整链路需求描述 → AI 生成代码/配置 → 本地构建/渲染 → 人工检查 → 部署到服务器/CDN在这条链路中AI 可以承担需求分析、代码生成、内容替换、测试辅助等环节但最终的质量把关还是需要人来完成。尤其是涉及支付、用户隐私、数据安全等功能时任何生成代码都必须经过严格的审查。2.4 为什么说“AI 不会完全替代开发者”AI 虽然能写代码但很难替代开发者对业务的理解。一个优秀的网站不仅仅是代码能跑还要考虑用户体验、信息架构、可访问性、SEO 优化、维护成本等问题。这些问题 AI 目前只能做到“看起来合理”很难做到“为企业量身定制”。所以更准确的说法是AI 将开发者从重复劳动中解放出来让开发者把精力集中到更高价值的决策和创新上。3. 实战准备从手工到 AI 辅助建站的环境搭建在开始实战之前我们需要准备一套简单的开发环境。这里会用到 Node.js、Python 和一个大模型 API 或本地模型。如果你不熟悉 Node.js也可以只运行案例二它只需要 Python。3.1 技术选型说明案例一使用 React 18 和 Vite 搭建一个前端项目通过 AI 生成一个页面组件。案例二使用 Python 3 和 Jinja2 模板引擎通过 AI 生成的 JSON 配置渲染静态 HTML 页面。大模型 API如果你有自己的模型服务可以直接将 Prompt 发给模型。如果没有也可以手动把示例中的 JSON 配置保存到本地不影响案例二的运行。需要说明的是不同模型和工具的版本差异较大下面示例的重点是流程和思路。你在实际使用时可以根据项目的依赖版本做调整。3.2 创建项目目录结构为了清晰起见我们本地创建一个项目目录ai-site-generator用于案例二。ai-site-generator/ ├── site_config.json ├── generate_site.py ├── templates/ │ └── base.html └── dist/如果你同时想运行案例一可以另外用 Vite 初始化一个 React 项目例如my-ai-site。3.3 准备 Python 虚拟环境进入ai-site-generator目录创建虚拟环境并安装依赖cd ai-site-generator python -m venv venv source venv/bin/activate # Windows 下使用 venv\Scripts\activate pip install jinja2这里使用jinja2作为模板引擎因为它的语法直观适合把 JSON 配置渲染成 HTML。如果你使用的是 Windows激活命令请换成venv\Scripts\activate。4. 实战案例一用 AI 生成一个页面组件4.1 编写 Prompt假设我们要做一个企业服务官网需要一个服务卡片组件。在 AI 对话框中输入以下 Prompt请生成一个 React 函数组件 ServiceCard接收 title、description、icon 三个 prop用于展示服务介绍卡片。要求如下 1. 使用 JSX 和 CSS Modules不引入额外 UI 库。 2. 包含图标、标题、描述和“查看详情”链接。 3. 样式采用圆角卡片鼠标悬停时出现轻微阴影。 4. 组件文件名 ServiceCard.jsx样式文件 ServiceCard.module.css。这个 Prompt 包含了角色要求、组件功能、样式边界和文件名约定。AI 返回的结果越具体代码越容易直接使用。4.2 接收并整理 AI 返回的代码AI 返回的代码可能会很完整但作为开发者我们要做的第一件事是检查它是否符合项目需求。下面是对应的组件代码示例// 文件路径src/components/ServiceCard.jsx import React from react; import styles from ./ServiceCard.module.css; const ServiceCard ({ title, description, icon }) { return ( div className{styles.card} span className{styles.icon}{icon}/span h3 className{styles.title}{title}/h3 p className{styles.description}{description}/p a href/services className{styles.link} 查看详情 /a /div ); }; export default ServiceCard;样式文件ServiceCard.module.css的生成结果如下/* 文件路径src/components/ServiceCard.module.css */ .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; background: #fff; transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .icon { font-size: 32px; } .title { font-size: 20px; margin: 12px 0 8px; } .description { color: #6b7280; font-size: 14px; line-height: 1.6; } .link { display: inline-block; margin-top: 12px; color: #3b82f6; text-decoration: none; }4.3 接入项目的关键步骤如果你已经用 Vite 创建了 React 项目可以把上面两个文件放到src/components目录下。然后在页面中使用// 文件路径src/App.jsx import ServiceCard from ./components/ServiceCard; function App() { return ( div style{{ display: flex, gap: 16 }} ServiceCard icon⚙️ titleAI 自动化 description用 AI 自动生成业务代码降低重复工作量。 / ServiceCard icon title快速上线 description从需求到部署一站式完成网站搭建。 / /div ); } export default App;4.4 运行与验证在项目根目录执行npm install npm run dev启动后浏览器打开 Vite 提供的本地地址就能看到两个服务卡片。这里有一个很重要的认知AI 生成的组件只是起点如何组织它、在什么场景下使用它仍然由开发者决定。5. 实战案例二配置驱动静态站生成脚本5.1 项目需求很多时候AI 不适合直接生成整站代码因为整站代码体量大、维护难。一个更务实的做法是让 AI 生成站点的配置和内容然后用脚本统一渲染。这样既利用了 AI 的内容生成能力又保留了代码的可维护性。5.2 用 AI 生成 site_config.json我们可以向 AI 输入以下需求请为一个“AI 建站实战”静态站点生成 site_config.json要求包含站点标题、站点描述以及一个首页页面。首页中包含一个 hero 区块和两个 card 区块。请直接输出 JSON。AI 输出的结果可能类似于下面的内容{ site: { title: AI 建站实战, description: 一个由 AI 生成配置、脚本渲染的静态站点示例。 }, pages: [ { slug: index, title: 首页, sections: [ { type: hero, title: 欢迎来到 AI 建站实战, text: 从手工编码到 AI 辅助生成网站开发方式正在改变。 }, { type: card, title: AI 生成, text: 使用大模型快速生成站点结构和文案。 }, { type: card, title: 脚本渲染, text: 使用 Python 模板引擎输出 HTML。 } ] } ] }如果你没有接入模型 API直接把这段 JSON 保存为site_config.json即可。5.3 编写模板文件使用 Jinja2 模板我们可以把 JSON 配置渲染成 HTML。创建templates/base.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title{{ page.title }} - {{ site.title }}/title style body { font-family: Microsoft YaHei, sans-serif; margin: 40px auto; max-width: 800px; line-height: 1.8; color: #1f2937; } .hero { background: #f6f8fa; padding: 24px; border-radius: 12px; } .card { border: 1px solid #eee; border-radius: 8px; padding: 16px; margin: 12px 0; } /style /head body h1{{ site.title }}/h1 p{{ site.description }}/p section h2{{ page.title }}/h2 {% for item in page.sections %} {% if item.type hero %} div classhero h3{{ item.title }}/h3 p{{ item.text }}/p /div {% elif item.type card %} div classcard h3{{ item.title }}/h3 p{{ item.text }}/p /div {% endif %} {% endfor %} /section /body /html模板中使用了{% for %}和{% if %}语法用来遍历 JSON 中的区块。这样后续要添加新的页面或区块只需要修改 JSON 配置不需要改动模板。5.4 编写 Python 生成脚本创建generate_site.pyimport json from pathlib import Path from jinja2 import Environment, FileSystemLoader BASE_DIR Path(__file__).resolve().parent def load_config(): 读取站点 JSON 配置 config_path BASE_DIR / site_config.json with open(config_path, r, encodingutf-8) as f: return json.load(f) def render_site(config): 根据配置渲染所有页面 env Environment(loaderFileSystemLoader(BASE_DIR / templates)) template env.get_template(base.html) output_dir BASE_DIR / dist output_dir.mkdir(exist_okTrue) for page in config[pages]: html template.render(siteconfig[site], pagepage) output_file output_dir / f{page[slug]}.html output_file.write_text(html, encodingutf-8) return output_dir if __name__ __main__: config load_config() output_dir render_site(config) print(f静态站点已生成到{output_dir})这个脚本的逻辑很简单读取 JSON 配置遍历所有页面调用 Jinja2 模板渲染 HTML最后写入dist目录。5.5 运行与预期输出在项目根目录执行python generate_site.py如果一切正常你会看到静态站点已生成到/path/to/ai-site-generator/dist此时打开dist/index.html就能看到一个静态页面的完整结构。这个案例演示了一个非常实用的工作流AI 负责生成配置和内容脚本负责渲染页面开发者负责校验和维护。6. 常见问题与排查思路在实际使用 AI 建站或 AI 生成代码的过程中很容易遇到下面几类问题。问题现象常见原因解决思路AI 生成的代码无法运行模型输出存在“幻觉”使用了不存在的 API提供更完整的上下文缩小生成范围结合报错信息让 AI 修复生成结果与视觉稿不一致Prompt 对样式描述不够精确在 Prompt 中加入颜色、间距、圆角、响应式要求或直接描述“参考某站点风格”页面加载后样式错乱缺少浏览器兼容处理或资源路径错误使用构建工具梳理资源路径检查 CSS 前缀和图片相对路径API 请求失败模型服务地址、Key、请求体配置不正确检查环境变量、网络连通性和请求格式先打印返回结果排查生成内容包含不安全代码模型从训练数据中学习到了危险模式对高风险函数eval、shell 调用、动态 SQL进行人工审查系统权限按最小化配置生成的网站搜索排名很差缺少 SEO 基础优化补充 title、meta、语义化标签并确保内容主题明确很多问题看似是“AI 不够聪明”其实是 Prompt 设计不够完整或者缺少人工复查环节。建议在每次生成后先把代码放入版本控制系统方便对比和回滚。7. 最佳实践与工程建议7.1 保持基础能力与技术嗅觉AI 生成代码可以降低入门门槛但完全不懂基础就很难判断生成结果是否合理。掌握 HTML、CSS、JavaScript、HTTP 基础、数据库基础仍然是网站开发者的核心竞争力。没有这些基础开发者很容易被 AI 的错误输出带偏。7.2 建立 AI 生成内容的人工审查机制AI 生成的内容要纳入和手写代码一样的质量流程代码评审、单元测试、安全检查。特别是当 AI 生成的是整站代码时建议分成多个小块逐步生成避免一次性生成大量代码后难以审查。7.3 遵循最小权限与安全边界在配置 AI 建站工具时要遵循最小权限原则。如果工具需要访问代码仓库、云服务器或数据库不要提供全局密钥。建议使用环境变量保存密钥并且只在测试环境中验证。涉及用户数据的功能更需要优先考虑合规和权限控制。7.4 关注 SEO 与性能AI 生成的页面往往忽略 SEO 和性能优化。生成后要检查title和meta description是否合理。是否使用了语义化标签。图片是否经过压缩。是否有不必要的 JavaScript 加载。对于需要上线的站点还可以用 Lighthouse 等工具做一次性能扫描。7.5 沉淀 AI 工作流与提示词资产团队使用 AI 建站时最好把高频使用的 Prompt 整理成模板。例如“生成页面组件”“生成 JSON 配置”“生成接口定义”等。这样不仅能保持输出风格统一还能让新成员快速上手。如果后端技术栈是 Java还可以关注 Spring AI 等框架把大模型能力接入企业应用如果偏前端可以研究 AI 编程工具和 Agent 平台的组合方式。无论如何形成一套可复用、可审计的 AI 辅助建站流程比单纯追求“AI 自动生成”更有价值。8. 后续学习路线与开发建议如果你现在已经会手工写页面不妨尝试这条学习路径先复习 HTML/CSS/JavaScript 基础。用 React 或 Vue 做一个实际项目体会组件化和工程化。学习大模型 API 的基本调用方式理解 Prompt 的作用。实践“AI 生成组件 手工集成”的工作流。再尝试“AI Agent 自动构建 人工审查”的完整流程。了解部署相关的基础知识例如云服务器、对象存储、域名解析。使用 AI 建站时优先关注三个风险点生成代码的正确性、运行环境的安全性、内容版权的合规性。不要因为生成速度快就跳过检查步骤。如果你正在学习网站开发我的建议是不要绕开基础但也不要回避 AI。你可以先用手工写一个完整页面再用 AI 辅助重新实现一遍对比两者在效率、可维护性和成就感上的差异。这个过程会让你更清楚哪些环节值得交给 AI哪些必须自己掌控。
从手工编码到AI-Made：网站开发演进与AI辅助建站实战
最近在整理团队建站方案时一个很明显的感受是十年前大家讨论的是“用什么编辑器写 HTML”五年前讨论的是“用哪个前端框架更合适”而今天很多同学直接问我“能不能让 AI 把整个网站先搭出来”。这个变化正好对应了“From Handmade to AI-Made Websites”这个主题。网站开发这二十多年经历了从手工写代码到使用可视化工具再到基于组件的工程化最后进入 AI 生成代码的快速迭代阶段。很多开发者既兴奋又焦虑兴奋的是 AI 确实能提高效率焦虑的是如果 AI 能把网站都生成出来开发者还能做什么。这篇文章会先梳理网站开发方式的演进脉络再解释 AI-Made 网站背后的技术原理然后通过“AI 生成一个页面组件”和“配置驱动静态站生成脚本”两个实战案例带大家完整走一遍 AI 辅助建站的流程。内容偏实践适合前端开发者、后端开发者、对 AI 建站感兴趣的产品和运维同学。1. 网站开发 20 年从手工到 AI-Made 的四个阶段1.1 手工编码时代2000 年代前后早期的网站开发没有现在这么丰富的框架和工具。那时一个网站往往由若干个 HTML 页面组成样式表、JavaScript 脚本都需要手工维护。为了做导航栏、轮播图、表单校验这些功能开发者要把代码一行行写出来甚至需要掌握非常琐碎的浏览器兼容技巧。这个阶段的核心关键词是“控制”。开发者对每一个标签、每一个样式属性都有绝对的控制权但代价是开发效率低、维护成本高。一个简单的企业官网可能也要花一到两周时间。当时常用的编辑器包括 Dreamweaver、FrontPage 等可视化工具但它们生成的代码往往不够干净后来很多开发者又回到纯手工编码。1.2 CMS 与前后端分离时代2010 年代前后到了 2010 年前后网站开发进入了一个分水岭。WordPress、Drupal 等 CMS 工具让非技术人员也能快速搭建内容站点开发者不需要为每个页面重复去写 HTML而是基于主题模板和插件去做定制。与此同时前后端分离思想逐渐流行。React、Vue 等前端框架让页面交互变得更加复杂和高效而后端只负责提供 API 接口。开发任务拆成了前端工程、后端服务、数据库设计、运维部署等更细的分工。这个阶段对开发者的要求不再是“能写页面”而是“能设计可扩展的架构”。1.3 低代码与无代码时代近十年低代码和无代码平台的出现把网站开发的准入门槛进一步降低了。用户可以通过拖拽组件、配置数据模型、设置业务流程来搭建应用。对于企业内部的 OA 系统、简单的信息展示站这种方式的成本远低于传统开发。不过低代码平台也有它的边界。高度定制化的业务逻辑、复杂的前端交互、高并发场景下的性能调优仍然需要专业开发者介入。而且部分低代码平台存在锁定效应一旦业务规模变大迁移成本会非常高。1.4 AI 建站时代当下最近几年随着大语言模型和生成式 AI 的快速发展AI 建站成为又一个热门方向。AI 建站并不是简单的“套模板”而是让 AI 理解你的需求后自动生成结构完整、样式可用的代码或页面。常见的形态包括AI 编程助手如 Cursor、通义灵码等在 IDE 中辅助生成代码。对话式建站工具输入一句话描述生成整站代码。AI Agent通过智能体自动完成需求分析、代码生成、依赖安装、调试等任务。严格来说AI 建站不会完全取代前面的几种方式但它正在改变开发者的工作方式从“手工写每一行代码”变成“定义需求、审查结果、修复问题”。阶段核心工具开发者角色代表产物手工编码时代Dreamweaver、纯文本编辑器手写 HTML/CSS/JS静态页面CMS/前后端分离时代WordPress、React、Vue工程化开发动态网站/单页应用低代码/无代码时代Webflow、Bubble业务配置者可视化应用AI 建站时代大模型 API、AI Agent需求定义与代码审查者AI 生成页面/整站2. AI-Made 网站的核心技术原理2.1 大语言模型如何生成网页从技术层面看网页本质上是一种结构化文本HTML 负责结构CSS 负责样式JavaScript 负责行为。大语言模型本质上是一个强大的文本生成模型它通过学习海量的网页源码和文档学会了“输入一段需求描述输出对应的 HTML/CSS/JS”的能力。要让模型生成高质量的网页Prompt 的结构很重要。一个比较有效的 Prompt 通常包含四个部分角色设定告诉 AI 你希望它以什么身份回答。背景信息解释目标网站的类型和用途。输出要求明确格式、技术栈、样式风格。边界条件例如不引入外部库、兼容移动端等。2.2 AI Agent 与智能体工作流单纯的“AI 生成代码”已经不算新鲜事现在的焦点是 AI Agent。Agent 不是一个简单的对话机器人而是一个能自主拆解任务、调用工具、执行步骤并修正错误的智能体。在 AI 建站场景中一个典型的 Agent 工作流可以是接收用户需求例如“帮我建一个个人博客包含首页、文章列表和关于我页面”。拆解任务决定生成哪些页面、选择什么技术栈。调用代码生成器生成项目结构、页面代码和配置文件。执行验证运行构建命令检查是否报错。迭代修复如果构建失败自动分析日志并调整代码。输出可部署结果。这也是“AI 应用开发”和“AI 智能体”逐渐变成热词的原因。对于开发者来说掌握 Agent 的工作逻辑比单纯会写 Prompt 更有价值。2.3 从生成到部署的完整链路AI-Made 网站并不等于“生成完就不管了”。从生成到上线仍然需要一条完整链路需求描述 → AI 生成代码/配置 → 本地构建/渲染 → 人工检查 → 部署到服务器/CDN在这条链路中AI 可以承担需求分析、代码生成、内容替换、测试辅助等环节但最终的质量把关还是需要人来完成。尤其是涉及支付、用户隐私、数据安全等功能时任何生成代码都必须经过严格的审查。2.4 为什么说“AI 不会完全替代开发者”AI 虽然能写代码但很难替代开发者对业务的理解。一个优秀的网站不仅仅是代码能跑还要考虑用户体验、信息架构、可访问性、SEO 优化、维护成本等问题。这些问题 AI 目前只能做到“看起来合理”很难做到“为企业量身定制”。所以更准确的说法是AI 将开发者从重复劳动中解放出来让开发者把精力集中到更高价值的决策和创新上。3. 实战准备从手工到 AI 辅助建站的环境搭建在开始实战之前我们需要准备一套简单的开发环境。这里会用到 Node.js、Python 和一个大模型 API 或本地模型。如果你不熟悉 Node.js也可以只运行案例二它只需要 Python。3.1 技术选型说明案例一使用 React 18 和 Vite 搭建一个前端项目通过 AI 生成一个页面组件。案例二使用 Python 3 和 Jinja2 模板引擎通过 AI 生成的 JSON 配置渲染静态 HTML 页面。大模型 API如果你有自己的模型服务可以直接将 Prompt 发给模型。如果没有也可以手动把示例中的 JSON 配置保存到本地不影响案例二的运行。需要说明的是不同模型和工具的版本差异较大下面示例的重点是流程和思路。你在实际使用时可以根据项目的依赖版本做调整。3.2 创建项目目录结构为了清晰起见我们本地创建一个项目目录ai-site-generator用于案例二。ai-site-generator/ ├── site_config.json ├── generate_site.py ├── templates/ │ └── base.html └── dist/如果你同时想运行案例一可以另外用 Vite 初始化一个 React 项目例如my-ai-site。3.3 准备 Python 虚拟环境进入ai-site-generator目录创建虚拟环境并安装依赖cd ai-site-generator python -m venv venv source venv/bin/activate # Windows 下使用 venv\Scripts\activate pip install jinja2这里使用jinja2作为模板引擎因为它的语法直观适合把 JSON 配置渲染成 HTML。如果你使用的是 Windows激活命令请换成venv\Scripts\activate。4. 实战案例一用 AI 生成一个页面组件4.1 编写 Prompt假设我们要做一个企业服务官网需要一个服务卡片组件。在 AI 对话框中输入以下 Prompt请生成一个 React 函数组件 ServiceCard接收 title、description、icon 三个 prop用于展示服务介绍卡片。要求如下 1. 使用 JSX 和 CSS Modules不引入额外 UI 库。 2. 包含图标、标题、描述和“查看详情”链接。 3. 样式采用圆角卡片鼠标悬停时出现轻微阴影。 4. 组件文件名 ServiceCard.jsx样式文件 ServiceCard.module.css。这个 Prompt 包含了角色要求、组件功能、样式边界和文件名约定。AI 返回的结果越具体代码越容易直接使用。4.2 接收并整理 AI 返回的代码AI 返回的代码可能会很完整但作为开发者我们要做的第一件事是检查它是否符合项目需求。下面是对应的组件代码示例// 文件路径src/components/ServiceCard.jsx import React from react; import styles from ./ServiceCard.module.css; const ServiceCard ({ title, description, icon }) { return ( div className{styles.card} span className{styles.icon}{icon}/span h3 className{styles.title}{title}/h3 p className{styles.description}{description}/p a href/services className{styles.link} 查看详情 /a /div ); }; export default ServiceCard;样式文件ServiceCard.module.css的生成结果如下/* 文件路径src/components/ServiceCard.module.css */ .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; background: #fff; transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .icon { font-size: 32px; } .title { font-size: 20px; margin: 12px 0 8px; } .description { color: #6b7280; font-size: 14px; line-height: 1.6; } .link { display: inline-block; margin-top: 12px; color: #3b82f6; text-decoration: none; }4.3 接入项目的关键步骤如果你已经用 Vite 创建了 React 项目可以把上面两个文件放到src/components目录下。然后在页面中使用// 文件路径src/App.jsx import ServiceCard from ./components/ServiceCard; function App() { return ( div style{{ display: flex, gap: 16 }} ServiceCard icon⚙️ titleAI 自动化 description用 AI 自动生成业务代码降低重复工作量。 / ServiceCard icon title快速上线 description从需求到部署一站式完成网站搭建。 / /div ); } export default App;4.4 运行与验证在项目根目录执行npm install npm run dev启动后浏览器打开 Vite 提供的本地地址就能看到两个服务卡片。这里有一个很重要的认知AI 生成的组件只是起点如何组织它、在什么场景下使用它仍然由开发者决定。5. 实战案例二配置驱动静态站生成脚本5.1 项目需求很多时候AI 不适合直接生成整站代码因为整站代码体量大、维护难。一个更务实的做法是让 AI 生成站点的配置和内容然后用脚本统一渲染。这样既利用了 AI 的内容生成能力又保留了代码的可维护性。5.2 用 AI 生成 site_config.json我们可以向 AI 输入以下需求请为一个“AI 建站实战”静态站点生成 site_config.json要求包含站点标题、站点描述以及一个首页页面。首页中包含一个 hero 区块和两个 card 区块。请直接输出 JSON。AI 输出的结果可能类似于下面的内容{ site: { title: AI 建站实战, description: 一个由 AI 生成配置、脚本渲染的静态站点示例。 }, pages: [ { slug: index, title: 首页, sections: [ { type: hero, title: 欢迎来到 AI 建站实战, text: 从手工编码到 AI 辅助生成网站开发方式正在改变。 }, { type: card, title: AI 生成, text: 使用大模型快速生成站点结构和文案。 }, { type: card, title: 脚本渲染, text: 使用 Python 模板引擎输出 HTML。 } ] } ] }如果你没有接入模型 API直接把这段 JSON 保存为site_config.json即可。5.3 编写模板文件使用 Jinja2 模板我们可以把 JSON 配置渲染成 HTML。创建templates/base.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title{{ page.title }} - {{ site.title }}/title style body { font-family: Microsoft YaHei, sans-serif; margin: 40px auto; max-width: 800px; line-height: 1.8; color: #1f2937; } .hero { background: #f6f8fa; padding: 24px; border-radius: 12px; } .card { border: 1px solid #eee; border-radius: 8px; padding: 16px; margin: 12px 0; } /style /head body h1{{ site.title }}/h1 p{{ site.description }}/p section h2{{ page.title }}/h2 {% for item in page.sections %} {% if item.type hero %} div classhero h3{{ item.title }}/h3 p{{ item.text }}/p /div {% elif item.type card %} div classcard h3{{ item.title }}/h3 p{{ item.text }}/p /div {% endif %} {% endfor %} /section /body /html模板中使用了{% for %}和{% if %}语法用来遍历 JSON 中的区块。这样后续要添加新的页面或区块只需要修改 JSON 配置不需要改动模板。5.4 编写 Python 生成脚本创建generate_site.pyimport json from pathlib import Path from jinja2 import Environment, FileSystemLoader BASE_DIR Path(__file__).resolve().parent def load_config(): 读取站点 JSON 配置 config_path BASE_DIR / site_config.json with open(config_path, r, encodingutf-8) as f: return json.load(f) def render_site(config): 根据配置渲染所有页面 env Environment(loaderFileSystemLoader(BASE_DIR / templates)) template env.get_template(base.html) output_dir BASE_DIR / dist output_dir.mkdir(exist_okTrue) for page in config[pages]: html template.render(siteconfig[site], pagepage) output_file output_dir / f{page[slug]}.html output_file.write_text(html, encodingutf-8) return output_dir if __name__ __main__: config load_config() output_dir render_site(config) print(f静态站点已生成到{output_dir})这个脚本的逻辑很简单读取 JSON 配置遍历所有页面调用 Jinja2 模板渲染 HTML最后写入dist目录。5.5 运行与预期输出在项目根目录执行python generate_site.py如果一切正常你会看到静态站点已生成到/path/to/ai-site-generator/dist此时打开dist/index.html就能看到一个静态页面的完整结构。这个案例演示了一个非常实用的工作流AI 负责生成配置和内容脚本负责渲染页面开发者负责校验和维护。6. 常见问题与排查思路在实际使用 AI 建站或 AI 生成代码的过程中很容易遇到下面几类问题。问题现象常见原因解决思路AI 生成的代码无法运行模型输出存在“幻觉”使用了不存在的 API提供更完整的上下文缩小生成范围结合报错信息让 AI 修复生成结果与视觉稿不一致Prompt 对样式描述不够精确在 Prompt 中加入颜色、间距、圆角、响应式要求或直接描述“参考某站点风格”页面加载后样式错乱缺少浏览器兼容处理或资源路径错误使用构建工具梳理资源路径检查 CSS 前缀和图片相对路径API 请求失败模型服务地址、Key、请求体配置不正确检查环境变量、网络连通性和请求格式先打印返回结果排查生成内容包含不安全代码模型从训练数据中学习到了危险模式对高风险函数eval、shell 调用、动态 SQL进行人工审查系统权限按最小化配置生成的网站搜索排名很差缺少 SEO 基础优化补充 title、meta、语义化标签并确保内容主题明确很多问题看似是“AI 不够聪明”其实是 Prompt 设计不够完整或者缺少人工复查环节。建议在每次生成后先把代码放入版本控制系统方便对比和回滚。7. 最佳实践与工程建议7.1 保持基础能力与技术嗅觉AI 生成代码可以降低入门门槛但完全不懂基础就很难判断生成结果是否合理。掌握 HTML、CSS、JavaScript、HTTP 基础、数据库基础仍然是网站开发者的核心竞争力。没有这些基础开发者很容易被 AI 的错误输出带偏。7.2 建立 AI 生成内容的人工审查机制AI 生成的内容要纳入和手写代码一样的质量流程代码评审、单元测试、安全检查。特别是当 AI 生成的是整站代码时建议分成多个小块逐步生成避免一次性生成大量代码后难以审查。7.3 遵循最小权限与安全边界在配置 AI 建站工具时要遵循最小权限原则。如果工具需要访问代码仓库、云服务器或数据库不要提供全局密钥。建议使用环境变量保存密钥并且只在测试环境中验证。涉及用户数据的功能更需要优先考虑合规和权限控制。7.4 关注 SEO 与性能AI 生成的页面往往忽略 SEO 和性能优化。生成后要检查title和meta description是否合理。是否使用了语义化标签。图片是否经过压缩。是否有不必要的 JavaScript 加载。对于需要上线的站点还可以用 Lighthouse 等工具做一次性能扫描。7.5 沉淀 AI 工作流与提示词资产团队使用 AI 建站时最好把高频使用的 Prompt 整理成模板。例如“生成页面组件”“生成 JSON 配置”“生成接口定义”等。这样不仅能保持输出风格统一还能让新成员快速上手。如果后端技术栈是 Java还可以关注 Spring AI 等框架把大模型能力接入企业应用如果偏前端可以研究 AI 编程工具和 Agent 平台的组合方式。无论如何形成一套可复用、可审计的 AI 辅助建站流程比单纯追求“AI 自动生成”更有价值。8. 后续学习路线与开发建议如果你现在已经会手工写页面不妨尝试这条学习路径先复习 HTML/CSS/JavaScript 基础。用 React 或 Vue 做一个实际项目体会组件化和工程化。学习大模型 API 的基本调用方式理解 Prompt 的作用。实践“AI 生成组件 手工集成”的工作流。再尝试“AI Agent 自动构建 人工审查”的完整流程。了解部署相关的基础知识例如云服务器、对象存储、域名解析。使用 AI 建站时优先关注三个风险点生成代码的正确性、运行环境的安全性、内容版权的合规性。不要因为生成速度快就跳过检查步骤。如果你正在学习网站开发我的建议是不要绕开基础但也不要回避 AI。你可以先用手工写一个完整页面再用 AI 辅助重新实现一遍对比两者在效率、可维护性和成就感上的差异。这个过程会让你更清楚哪些环节值得交给 AI哪些必须自己掌控。