网页与轻应用生成：AI 帮你做网站、做工具
AI 不只能做文档，还能帮你生成网页和轻应用——做个活动页面、做个数据看板、做个内部小工具，不用写代码，描述需求就行。
一句话总结：AI 不只能做文档，还能帮你生成网页和轻应用——做个活动页面、做个数据看板、做个内部小工具，不用写代码，描述需求就行。
15.1 什么是网页与轻应用生成？
前面几章，AI 帮我们做的都是"文档类"产出——Word、Excel、PPT、图片、视频。
但有时候，你需要的不是一个文档，而是一个"能交互的页面"： - 做一个活动报名页面，让大家在线填写报名信息 - 做一个数据看板，实时展示销售数据 - 做一个内部小工具，比如"合同模板生成器" - 做一个产品介绍页面，发给客户看 - 做一个调查问卷，收集反馈
以前做这些，你得： 1. 找开发提需求 2. 等排期（可能等几周） 3. 反复沟通修改 4. 上线（可能已经过了活动时间）
现在，AI 能帮你直接生成。你用自然语言描述需求，AI 生成一个可以直接使用的网页或轻应用。
大白话类比
| 传统方式 | AI 生成 |
|---|---|
| 找开发提需求，等排期 | 自己描述需求，几分钟生成 |
| 改一个字都要找开发 | 自己跟 AI 说，随时改 |
| 做个简单页面要几天 | 做个简单页面要几分钟 |
| 像"请装修队装修房子" | 像"用乐高积木搭房子" |
| 需要专业技能（写代码） | 不需要专业技能（会说话就行） |
15.2 能生成什么？
🌐 类型一：静态网页
纯展示型的网页，没有复杂的交互功能。
例子： - 产品介绍页面 - 活动宣传页面 - 个人简历页面 - 课程招生页面 - 公司团队介绍页面
特点： - 只有文字、图片、排版，没有数据交互 - 生成后可以直接用浏览器打开 - 可以部署到 GitHub Pages、Vercel 等平台
📊 类型二：数据看板
展示数据的可视化页面，有图表和数据交互。
例子： - 销售数据看板 - 项目进度看板 - 运营指标看板 - 财务报表看板
特点： - 包含图表（柱状图、折线图、饼图等） - 数据可以是静态的（写死在页面里），也可以是动态的（连接数据源） - 可以筛选、排序、切换时间范围
🛠️ 类型三：轻应用/小工具
有交互功能的小型应用，用户可以输入信息、得到结果。
例子： - 合同模板生成器（输入信息，生成合同） - 报价计算器（输入参数，计算报价） - 活动报名表单（填写信息，提交报名） - 调查问卷（答题，收集结果） - 项目管理看板（创建任务、分配、跟踪进度）
特点： - 有输入框、按钮、表单等交互元素 - 用户操作后有反馈（生成结果、提交数据、切换页面） - 可以有简单的后端逻辑（数据存储、邮件发送等）
📱 类型四：移动端页面
适配手机屏幕的网页，可以在手机上良好显示。
例子： - H5 活动页面 - 手机端产品介绍 - 移动端数据看板 - 微信分享页面
特点： - 响应式设计，自动适配手机屏幕 - 触摸友好的交互 - 可以分享到微信、朋友圈
15.3 怎么生成网页/轻应用？
步骤一：描述需求
用自然语言描述你想要的网页/应用。参考第5章的提示词技巧，描述越详细越好。
需求描述模板：
我需要一个[网页类型]，用于[用途]。
核心功能：
1. [功能1]
2. [功能2]
3. [功能3]
页面结构：
- 顶部：[导航栏/标题]
- 中间：[主要内容区]
- 底部：[页脚信息]
设计要求：
- 风格：[现代简约/活泼可爱/商务专业/科技感]
- 主色调：[颜色]
- 适配：[电脑端/手机端/响应式]
其他要求：
[任何特殊需求]
步骤二：AI 生成
AI 收到需求后，会： 1. 理解需求，规划页面结构 2. 生成代码（HTML/CSS/JavaScript） 3. 可能生成多个版本供你选择 4. 你可以在预览窗口中看到效果
步骤三：预览和调整
生成后，你可以： - 预览效果：在浏览器中打开，看看是不是你想要的 - 要求修改："把颜色改成蓝色""增加一个表单""排版再紧凑一些" - 迭代优化：多轮修改，直到满意
步骤四：导出和部署
满意后，你可以： - 导出代码：下载 HTML/CSS/JS 文件，自己部署 - 一键部署：有些平台支持一键部署到 Vercel、Netlify 等 - 嵌入使用：把生成的页面嵌入到飞书文档、企业微信、公众号等
15.4 实战案例：为AI培训教案做招生页面
我们用「AI培训教案」来演示一个完整的网页生成流程。
需求
为大圣AI办公实战课做一个招生页面，包含课程介绍、大纲、亮点、学员评价、报名表单。
步骤一：描述需求
我需要一个课程招生页面，用于大圣AI办公实战课的在线招生。
核心功能：
1. 课程介绍区：大标题+副标题+课程定位
2. 课程大纲区：8周课程内容，用时间线展示
3. 课程亮点区：6个亮点，用图标+文字卡片展示
4. 学员评价区：3条学员评价，带头像和姓名
5. 报名表单区：姓名、手机号、岗位、意向课程，提交按钮
6. 底部信息：联系方式、二维码、版权声明
页面结构：
- 顶部导航栏：logo + 菜单（课程介绍/大纲/亮点/报名）
- Hero区：大标题"8周速成AI办公达人" + 副标题 + "立即报名"按钮
- 中间：依次展示各个功能区
- 底部：联系方式和版权
设计要求：
- 风格：现代简约，科技感但不冰冷
- 主色调：蓝色（#3b82f6）+ 白色背景
- 适配：响应式，电脑和手机都能良好显示
- 动效：滚动时有淡入动画，按钮有悬停效果
其他要求：
- 报名表单提交后显示"报名成功，我们会尽快联系您"
- 页面加载速度要快
- 所有图片用占位图即可
步骤二：AI 生成
AI 生成一个完整的招生页面，包含： - HTML 结构 - CSS 样式（蓝色主题、响应式布局、动画效果） - JavaScript（表单提交、滚动动画、平滑滚动导航）
步骤三：预览和调整
在浏览器中预览，发现： - ✅ 整体风格符合要求 - ⚠️ 课程大纲的时间线在手机上显示不好 - ⚠️ 报名表单的"岗位"选项不够全
然后说： "课程大纲的时间线在手机端改成垂直排列，报名表单的岗位选项增加'财务''HR''销售''项目管理''售前''其他'。另外，Hero区的背景加一个淡淡的几何图案。"
AI 修改后，再次预览，确认满意。
步骤四：部署
导出代码，部署到 GitHub Pages（就像本指南一样！），得到一个可以访问的链接：
https://brianxiehub.github.io/dasheng-course/
把这个链接发到朋友圈、飞书群、公众号，就可以开始招生了！
总耗时：不到1小时。 以前找开发做这个页面，至少要一周，花费几千块。
15.5 轻应用案例：合同模板生成器
再看一个更实用的轻应用案例。
需求
做一个"合同模板生成器"，销售可以输入客户信息、合同金额、服务内容，自动生成一份标准合同。
功能设计
-
输入表单： - 客户名称 - 客户联系人 - 合同金额 - 服务内容（多选） - 合同期限（开始日期-结束日期） - 付款方式（一次性/分期付款）
-
生成逻辑： - 根据输入信息，填充合同模板 - 根据服务内容，自动计算总金额 - 根据付款方式，生成付款条款 - 自动生成合同编号
-
输出： - 在线预览合同内容 - 一键复制到 Word - 下载为 PDF
AI 生成
描述需求后，AI 生成一个完整的轻应用： - 前端：表单页面 + 预览页面 - 逻辑：表单验证、金额计算、模板填充 - 输出：复制、下载功能
销售用这个工具，2分钟就能生成一份标准合同，不用每次都找法务要模板、手动填写。
15.6 网页/轻应用生成的注意事项
⚠️ 注意一：复杂功能可能做不到
AI 生成的网页/轻应用适合简单、标准化的需求。复杂的功能可能做不到或做得不好：
| 能做好 | 可能做不好 |
|---|---|
| 静态展示页面 | 复杂的业务逻辑系统 |
| 简单表单 | 多角色权限管理 |
| 数据可视化（静态数据） | 实时大数据处理 |
| 简单计算器/生成器 | 复杂的工作流引擎 |
| 活动页面/宣传页 | 电商支付系统 |
| 内部小工具 | 企业级ERP/CRM |
💡 判断标准：如果你的需求可以用"一个页面+简单交互"搞定，AI 能做。如果需要"多个页面+复杂逻辑+数据库+用户系统"，建议找专业开发。
⚠️ 注意二：数据安全
如果轻应用涉及数据收集（比如报名表单、调查问卷），注意： - 数据存储在哪里？是否安全？ - 是否符合数据保护法规（比如个人信息保护法）？ - 敏感信息（身份证、银行卡）不要用 AI 生成的工具收集 - 企业内部数据不要部署到公网
⚠️ 注意三：代码质量
AI 生成的代码可能： - 有冗余代码（可以优化但不影响使用） - 注释不够清晰 - 没有经过充分测试 - 可能有安全漏洞（比如 XSS、SQL注入）
建议： - 简单页面可以直接用 - 涉及数据提交的页面，最好让开发看一下代码 - 重要的业务系统，不要用 AI 生成的代码
⚠️ 注意四：浏览器兼容性
AI 生成的页面可能在某些旧浏览器上显示不正常。建议： - 在主流浏览器（Chrome、Edge、Safari）上测试 - 如果目标用户用旧浏览器，提醒 AI 注意兼容性 - 响应式页面在手机上也要测试
15.7 常见问题
Q：生成的网页可以直接用吗？
A：简单的展示页面可以直接用。有交互功能的轻应用，建议测试后再用。重要的业务场景，建议让开发审核一下。
Q：我不会代码，能修改生成的网页吗？
A：可以！你不需要懂代码，直接用自然语言跟 AI 说"把颜色改成蓝色""增加一个按钮"，AI 会帮你改。
Q：生成的网页怎么分享给别人？
A：几种方式：1）部署到 GitHub Pages/Vercel/Netlify 等平台，得到一个链接；2）导出 HTML 文件，发给别人用浏览器打开；3）嵌入到飞书文档、企业微信等平台。
Q：可以生成小程序吗？
A：目前主要是生成网页（H5）。小程序的生成能力可能有限，因为小程序有特定的框架和审核机制。如果需要小程序，建议用生成的网页封装成小程序，或找专业开发。
Q：生成的数据看板可以连接真实数据库吗？
A：简单的看板可以用静态数据（写死在页面里）。如果需要连接真实数据库，需要配置 API 接口，这部分可能需要开发协助。AI 可以生成前端代码，但后端接口需要你自己提供。
15.8 本篇总结
第二篇·核心能力的7章全部学完了！回顾一下：
| 章节 | 核心内容 |
|---|---|
| 第9章 | 技能 Skill 体系：给 AI 装"超能力" |
| 第10章 | 连接器 MCP：让 AI 连接其他工具 |
| 第11章 | 工作伙伴与小队：组建 AI 团队 |
| 第12章 | 定时任务：让 AI 到点自动干活 |
| 第13章 | 多模态生成：画图、做视频 |
| 第14章 | 文档/表格/PPT精准编辑 |
| 第15章 | 网页与轻应用生成 |
现在的你：已经掌握了豆包工作的核心能力，能应对绝大多数办公场景了！🎉
接下来的第三篇·飞书深度集成，我们要学习怎么把豆包工作和飞书打通——群聊、文档、会议、多维表格，让 AI 在你的工作流里无处不在。
准备好了吗？
❓ 什么是网页与轻应用生成：AI 帮你做网站、做工具？
AI 不只能做文档，还能帮你生成网页和轻应用——做个活动页面、做个数据看板、做个内部小工具，不用写代码，描述需求就行。
❓ 什么是网页与轻应用生成？
前面几章，AI 帮我们做的都是"文档类"产出——Word、Excel、PPT、图片、视频。
❓ 能生成什么？
纯展示型的网页，没有复杂的交互功能。
❓ 怎么生成网页/轻应用？
用自然语言描述你想要的网页/应用。参考第5章的提示词技巧，描述越详细越好。