← 上一章 返回课程主页 下一章:工作流自动化 · 毕业作品集 →
CHAPTER 09 / 10 · 2 小时实战课

🌐 AI 浏览器自动化 + 一句话造网页

Dia / Browser Use · 自动查票抢券填表 · v0 / Lovable / MarsCode · 说一句话上线网页 · 产出"你有了自己的小工具 + 一张可扫码网页"

完成下面 12 个任务,解锁「AI 造物者」徽章

🗺 学习地图(约 120 分钟 · 8 个小节 · 两条轨道并行)

🛠 轨道 A · 浏览器自动化(让 AI 替你上网)

  • PART B · 工具横评(Dia / Arc Max / Browser Use / Manus)
  • PART C · 3 个真实自动化任务(查票 / 价格监控 / 批量填表)

🎨 轨道 B · 一句话造网页(让 AI 替你写前端)

  • PART D · 工具横评(v0 / Lovable / MarsCode / 即梦页面 / Bolt)
  • PART E · 真实案例:15 分钟上线电子喜帖
  • PART F · 部署 / 表单收集 / 免费域名
PART A · 开场 ⏱ 10 min

为什么把"浏览器自动化" + "造网页"放在同一章?

因为它们解决了过去两个"普通人怎么也触碰不到"的硬技能:
① "让电脑替我干活"(过去要会 Python 脚本)
② "做一个真正的网页产品"(过去要会 HTML / 部署服务器 / 买域名)
现在 AI 把这两件事都变成了"说一句话"。

📖 学员 · 琳琳 · 34 岁 · 宝妈

她让 Dia 浏览器每天盯 3 个跨境母婴店:"一旦出现'满 400 减 80'自动截图发微信"。一个月省下 1200 元纸尿裤钱,她全程没打开过那 3 个 App。

📖 学员 · 颜颜 · 28 岁 · 婚礼策划

她让 v0 生成"新人电子喜帖 + 宾客回执 + 座位查询"一张网页,客户扫码就能用。单场服务费多收 800 元,3 行提示词 15 分钟上线。

💡 核心洞察

浏览器自动化 = "让 AI 替你软件";造网页 = "让 AI 替你软件"。用 + 造——这是普通人能拿到的最大杠杆。

AI 浏览器自动化 + 造网页最本质的意义是?
PART B · 轨道 A · 工具横评 ⏱ 20 min

AI 浏览器 4 款横评 · 给"让 AI 替你上网"挑把好铲

工具形态门槛擅长任务推荐场景
Dia(The Browser Company)浏览器 · 内置 Agent极低 · 点按钮查机票 / 盯价格 / 总结多标签页本章主线 · 日常自动化
Arc Max浏览器 · AI 插件网页总结 / 快速问答 / 跨标签搜信息工作者
豆包浏览器 / 秘塔浏览器国产 AI 浏览器极低中文网页总结 / 翻译 / 截图国内用户 · 中文场景
Browser Use开源 · 命令行 / Python中等 · 需简单配置执行复杂多步任务 / 批量填表进阶 · 技术型自动化
Manus国产通用 Agent低 · 申请内测长任务分解 / 多工具协同新锐 · 跟热点
🎯 本章选型
  • 入门推荐:豆包浏览器 / 秘塔浏览器——国内免费、中文友好
  • 进阶推荐:Dia(需要网络环境)——能力最完整
  • 技术流:Browser Use——可跑批量任务
🛠 动手任务 · 5 分钟

装一个 AI 浏览器(推荐豆包浏览器)。打开一个网页,点顶部 AI 按钮试试"总结这个页面""翻译成中文""帮我找出所有提到 XX 的段落"。这是 AI 浏览器的入门三板斧

PART C · 轨道 A · 实战 ⏱ 20 min

3 个真实自动化任务 · 照抄即可复用

🛫 任务 1 · 查机票 + 截图推送

Dia Prompt 帮我在携程 + 飞猪 + 去哪儿三个网站查: "10 月 8 日 深圳 → 成都 最便宜的 3 个航班" 要求: 1. 列出每个网站最低 3 档 2. 标注起飞时间 / 航司 / 税后总价 3. 若有同价航班,优先选 7~10 点起飞 4. 截图 3 张分别保存 5. 把结果整理成一张表格返回,并把截图附在下方

💰 任务 2 · 价格监控(琳琳的母婴店那招)

Dia / Manus Prompt 我要你每天早 8 点帮我做这件事: 1. 打开这 3 个链接:[链接 1] [链接 2] [链接 3] 2. 检查每页是否出现任何一个关键词: ["满 400 减 80", "跨店满减", "领券", "限时秒杀", "白菜价"] 3. 若出现: - 截图(全屏) - 把关键字和价格写到一行 - 推送到我的微信(通过企微机器人 / 邮件 / 钉钉 webhook) 4. 若未出现:忽略,不打扰我

📝 任务 3 · 批量填表 · HR / 活动报名

Browser Use Prompt 打开这个表单链接:[URL] 我手上有 50 个候选人信息(在附件 CSV 里), 请按下列规则批量填写并提交: - 姓名 → 列 A - 手机 → 列 B - 岗位 → 列 C(若为"全栈"填"Fullstack") - 年限 → 列 D(>5 年勾选"资深") - 简历附件 → 用对应候选人名字.pdf 每个提交后截图确认,最后给我一份"成功/失败"统计表。
📖 琳琳的操作细节

她把价格监控 Prompt 配合 "Dia Pin(固定任务)" 功能设置"每日早 8 点自动运行"。所有截图推送到企业微信群(她建的一个只有她自己的群),刷一眼群就知道有没有该下手的价格。一个月省 1200 元不是吹

🔒 ctrip.com/flight?from=SZX&to=CTU&date=10-08 ✨ AI
深圳 → 成都 · 10 月 8 日
🛫 07:35 SZX → 09:55 CTU · 四川航空 · ¥ 482
� 08:20 SZX → 10:45 CTU · 国航 · ¥ 520
🛫 09:10 SZX → 11:30 CTU · 东航 · ¥ 545
🛫 13:40 SZX → 16:05 CTU · 深航 · ¥ 638
> AGENT RUNNING...
任务:查 10/8 深圳→成都 最便宜 3 班 + 截图
打开 ctrip.com
填入 SZX / CTU / 10-08
点击 搜索
提取前 4 条结果
按价格排序
切换 fliggy.com
切换 qunar.com
对齐 3 平台结果
生成表格 + 3 张截图 ✓

↑ AI 浏览器真实执行时的界面 · 右侧是它"脑中"的执行步骤

PILOT LOG · 跑你第一个真实自动化任务 · 10 步(25 分钟)

  1. 找出一个"每周至少重复 3 次的上网动作" ⏱ 2 min
    • 标准:① 每次 5 分钟以上 · ② 打开 ≥ 2 个网站 · ③ 动作可语言描述
    • 热门候选:查机票火车票比价 / 盯小红书某博主更新 / 刷 10 个公众号今天发了啥 / 监控淘宝商品降价 / 每周抓 3 家竞品官网更新
    做完的样子:纸上写出一句话任务描述 · 列出 3 个目标网址
  2. 准备账号 · 先手动登录好目标网站 ⏱ 3 min
    • 需要登录的站(淘宝 / 携程 / 知乎 / 小红书)· 用要跑自动化的那个浏览器先手动登进去
    • 记住我 / 30 天免登
    翻车点:没登录直接跑 · Agent 会停在登录页 · 第一次 70% 失败都因此
  3. 打开 AI 浏览器的智能助手面板 ⏱ 1 min
    • 豆包浏览器:右上 图标 → "豆包 · 智能助手" 侧边栏
    • Dia:地址栏旁 AI Chat 按钮 → 侧边栏
    • Manus:登录后直接在主输入框发任务
    做完的样子:侧边栏或主输入框展开 · 可输入多行任务指令
  4. 把上方任一 Prompt 本地化 ⏱ 5 min
    • 复制页面上方 3 个 Prompt 任一个(最容易成功:任务 1 查机票)
    • [链接] 换成你实际的 3 个 URL · 把"深圳 → 成都"换成你真实目的地
    • 把"截图 3 张"保留 · 这是 Agent 可见的产物
    💡 Prompt 越具体越稳。模糊词("好看的""便宜的")会让 Agent 自由发挥 → 不可控
  5. 点"执行" · 看 AI 自动驾驶 ⏱ 3 min
    • 界面会切"Agent Mode"· 鼠标自己移动 / 点击 / 输入
    • 右侧日志面板滚动显示每一步:打开 URL → 等待加载 → 定位搜索框 → 输入...
    • 第一次看会有点震撼 · 这是你见证 AI 真正"会办事"的瞬间
    ⚠ 执行中不要动鼠标 · 会打断 Agent · 放开手让它跑
  6. 遇到失败 · 3 类症状 3 个解法 ⏱ 5 min
    • 症状 A · 卡在登录页 → 手动登 · 勾记住 · 重跑
    • 症状 B · 被弹窗挡住 → Prompt 开头加 "遇到任何弹窗(广告/登录/验证码)先关闭再继续"
    • 症状 C · 找不到元素 / 乱点 → 把"点击搜索按钮"改成更具体 "点击页面顶部搜索框旁边的橙色'搜索'按钮"
    • 症状 D · 验证码 → 目前 AI 还过不了严验证码 · 这条网站只能人机协作:Agent 跑到需验证码时暂停 · 你手动滑一下 · 点继续
  7. 验收 · 3 张截图 + 1 段摘要 ⏱ 2 min
    • Agent 完成后 · 下方通常有"产物"区 · 列出它截的图 / 抓的表
    • 肉眼看:截图是不是你要的页面?表格数字对不对?
    • 对 1 条数据 · 手动在浏览器验证一遍(这是"Agent 可信度"的唯一检查方式)
    做完的样子:拿到 3 张网页截图 + 1 张表格 · 所有数据都能交叉验证对得上
  8. 固定为定时任务 ⏱ 2 min
    • 豆包浏览器:任务完成页右上 📌 固定任务 → 设"每天早 8 点跑"
    • DiaPin 按钮 → Schedule 选项
    • 同时加一条"推送到企微机器人 webhook"(把上一章学的 webhook 用上)
    💡 定时跑 = 真正的"AI 帮你打工" · 你睡觉时它在比价 / 它在盯更新 / 它在抓情报
  9. 归档为"自动化资产"第 1 件 ⏱ 2 min
    09-自动化/task01-[任务名]/ ├── prompt.md · 定版 Prompt ├── run-01-结果截图.png ├── run-01-agent 日志.png └── README.md · 场景 / 频率 / 省了多少时间
  10. 分享打卡 · 让朋友知道你"会用 AI 干活" ⏱ 1 min
    • 朋友圈发一张 Agent 执行 GIF + 一句 AI 现在每天早 8 点自动帮我盯 [xxx] · 释放 30 分钟 / 天
    • 大概率会有朋友留言"能给我也做一个吗"——第一单变现的苗头
    做完的样子:你有 1 件真实在"每天自动跑"的 AI 自动化作品 · 看得见实际省时间
AI 浏览器(Dia / Manus)最强的能力是?
PART D · 轨道 B · 工具横评 ⏱ 20 min

一句话造网页 · 5 款工具横评

工具输出部署方式免费推荐场景
v0.dev(Vercel)Next.js + Tailwind 代码一键 Deploy Vercel✅ 基础额度本章主线 · 专业质感网页
Lovable全栈应用(带数据库)自带部署✅ 基础额度小程序 / SaaS 雏形
豆包 MarsCodeHTML / React / Python内置预览 + 分享✅ 免费国内首选 · 中文提示词
即梦页面(字节)落地页 · 模板丰富内置部署✅ 免费活动 / 表单 / 营销页
Bolt.new全栈代码 + 实时预览一键 StackBlitz✅ 基础额度开发者 · 快速原型
Cursor / Windsurf真代码(需自己部署)自己搞基础免费进阶 · 第 10 章再学
🎯 本章选型
  • 主力:v0.dev——视觉质感最好、一键部署 Vercel 全球 CDN
  • 国内备选:豆包 MarsCode——无需网络环境、中文提示词最友好
  • 落地页 / 活动页:即梦页面——模板最多最快
🛠 动手任务 · 5 分钟

打开 v0.dev(需登录)或 marscode.cn感受主输入框:就像对 ChatGPT 说话,但它会直接出网页

PART E · 轨道 B · 实战 ⏱ 20 min

15 分钟上线"电子喜帖" · 颜颜那招

先跟颜颜做一次真实可变现的项目。跟着做完你就真的会了——不是"理论上会"。

第 1 轮 Prompt(整体页面结构)
请用现代浪漫风格生成一张"电子婚礼喜帖"单页网页: 顶部: - 新郎新娘名字(张三 & 李四) - 主视觉图片(AI 生成一张唯美婚纱场景) - 婚礼日期:2025 年 10 月 26 日(农历九月初五) - 婚礼地点:上海静安瑞吉酒店 5 楼宴会厅 中部 4 个模块: 1. 【新人故事】3 张照片 + 每张一句话浪漫旁白 2. 【婚礼时间轴】12:00 迎宾 / 13:00 仪式 / 14:00 午宴 / 16:00 快闪 3. 【宾客回执】表单:姓名 / 手机 / 是否到场 / 是否带家属 / 座位偏好 4. 【座位查询】输入姓名可查自己的桌号(用假数据也行) 底部: - 地图导航(嵌入高德地图链接) - 新人联系方式(微信二维码占位) 风格: - 米色 + 香槟金主色调 - 衬线字体(Noto Serif SC) - 简洁、克制、高级 - 移动端优先(手机竖屏浏览最佳) - 加淡淡的樱花飘落动画
第 2 轮 Prompt(细节打磨)
1. 把顶部主视觉改成 4:5 比例,手机不截断 2. 时间轴加上时钟图标 3. 表单提交按钮文案改成"我一定来" 4. 整个页面加上"音乐播放/暂停"按钮(静默自动播放柔和钢琴曲) 5. 添加底部版权:"本邀请函由新人亲手(用 AI)设计"
  1. v0.dev 输入"第 1 轮 Prompt"——约 30 秒出现完整网页预览
  2. 不满意?继续对话:把"第 2 轮 Prompt"粘进去精修
  3. 点右上角 "Deploy":自动部署到 Vercel,几秒钟拿到一个公网链接
  4. 自定义域名(可选):Vercel 免费绑定域名,或用默认 xxx.vercel.app
  5. 生成二维码:用豆包 / 草料二维码把链接变成二维码
  6. 分享:把二维码放到纸质邀请函 / 朋友圈
📖 颜颜的变现术

她发现:过去婚礼策划报价标准套餐 8800 元,加一张电子喜帖作为"数字喜帖增值包" 定价 800 元——成本几乎为 0(AI 生成 + 免费域名)。客户为"科技感 + 仪式感" 买单。单场多 800,一个月 10 场多 8000 纯利润

> PROMPT.md

请用现代浪漫风格生成 一张"电子婚礼喜帖"单页网页: 顶部: - 张三 & 李四 - 2025/10/26 - 静安瑞吉酒店 中部: - 时间轴 4 节点 - 宾客回执表单 - 座位查询 风格: 米色 + 香槟金 衬线字体 移动端优先
张 三&李 四
2025·10·26 · 农历九月初五
静安瑞吉酒店 5 楼宴会厅
12:00迎宾
13:00仪式
14:00午宴
16:00快闪
💌 宾客回执
我一定来 ❤

↑ 左:你发的 Prompt · 右:v0 生成的网页预览(30 秒出)

ARCHITECT LOG · 10 步造一张上线网页(30 分钟)

  1. 选场景 · 3 选 1 ⏱ 2 min
    • 邀请函 / 喜帖 / 生日宴——模板化 · 好出效果 · 第一次练习强烈推荐
    • 活动报名页 / 课程介绍——可收集真实报名数据 · 直接可卖
    • 个人单页简历 / 作品集——求职 / 接单的加分项
    做完的样子:在便利贴写下 我要做一张 [xxx] 页 · 目标用户 [xxx] · 核心功能 3 条
  2. 选工具 · 国内外 2 选 1 ⏱ 1 min
    • 国外首选 v0.dev:Google 登录 · 需要外网 · 视觉质感最好 · 可一键 Deploy Vercel
    • 国内首选 豆包 MarsCodemarscode.cn):手机号登录 · 免科学上网 · 中文提示词最友好
    • 完全不懂就选豆包 MarsCode · 后面 90% 步骤一模一样
  3. 粘贴"第 1 轮 Prompt" · 换真实信息 ⏱ 4 min
    • 复制上方 Formula 的"第 1 轮 Prompt"整段
    • 张三 & 李四 换成真名 · 时间 / 地点 / 表单字段都改
    • 粘进主输入框 · 回车 / 点 Generate
    翻车点:方括号忘记换 · 最终页面会显示"[新郎名]"字面字 · 非常尴尬
  4. 等 30 秒 · 右侧预览窗出网页 ⏱ 1 min
    • v0 会先流式显示"思考过程"· 然后切到代码 · 最后渲染网页
    • 如果页面一片空白 → F12 看报错 · 常见"图片 URL 403"· 回第 5 步手动换图
    做完的样子:右侧出现完整的网页渲染 · 能滚动能交互
  5. ⚠ 关键步骤 · 立刻切"手机预览" ⏱ 2 min
    • v0 预览窗右上角切 📱 Mobile 视图
    • 或者复制预览链接 · 手机浏览器直接打开
    • 90% 的真实用户用手机看 · 桌面看没问题不代表手机能用
    ⚠ 不做手机预览就上线 = 给自己挖坑 · 一半页面在手机上错位
  6. "第 2 轮 Prompt" · 每轮改 1~3 个点 ⏱ 8 min
    • 把第 2 轮 Prompt 拆成 5 条 · 每次对话只发 1 条
    • 等 v0 改完 · 看预览 · 确认 · 再发下一条
    • 每改一次 · v0 会自动保存一个 version · 点右上角 Versions 可回退
    💡 一次发"改 10 处"· AI 会顾此失彼 · 这条不灵那条丢 · 必须拆细
  7. 精修完成 · 点 Deploy 一键发布 ⏱ 3 min
    • v0:右上 DeployVercel → 点"Create" → 60 秒
    • 豆包 MarsCode:右上 部署 → 拿到 xxx.marscode.app 公网链接
    • 复制链接 · 粘到记事本备份
    做完的样子:浏览器打开 xxx.vercel.app / xxx.marscode.app · 网页完整显示 · 移动端也 OK
  8. 生成二维码 + 自验证 ⏱ 2 min
    • 打开 cli.im(草料二维码)粘链接 · 下载 PNG
    • 或用豆包发 把这个链接 https://xxx 转成二维码
    • 自己先扫一次 · 验证手机能正常打开 · 表单能点击
  9. 3 位朋友内测 · 收 3 条真实反馈 ⏱ 5 min
    • 私信 3 位关系最近的朋友:帮我看看这张 [xxx] 页有啥问题 ↓+ 二维码
    • 常见反馈:文案太硬 / 图片糊 / 表单太长 / 颜色不对
    • 每条回 v0 对话让它再改一轮
    💡 不要跳过内测直接朋友圈 · 第一印象搞砸比晚 1 天发更糟
  10. 归档到 09-网页/ ⏱ 2 min
    09-网页/[场景名]/ ├── prompt-v1.md · 第 1 轮 Prompt ├── prompt-v2.md · 第 2 轮精修 ├── 公网链接.txt ├── 二维码.png ├── 桌面截图.png ├── 手机截图.png └── README.md · 场景 / 用户 / 上线数据
    做完的样子:你手里有 1 件真实可扫码打开的网页作品 · 可以转发给任何人
"造网页"跟"画效果图"的根本差别是?
PART F · 轨道 B · 部署 ⏱ 20 min

让网页"活起来" · 表单收集 / 免费域名 / 数据落库

一张"可看"的网页只是第一步。真正有用的网页能收集用户提交 + 存到数据库 + 你能看到结果。这一节教你怎么不写代码做到这些。

📝 方案 1 · 金数据 / 问卷星 嵌入

  • 金数据/问卷星里做好表单
  • 复制嵌入代码(iframe)
  • 让 v0 在你的网页里插入这段 iframe
  • 用户提交→金数据后台自动收集 + 导出 Excel
  • 零代码、最快

🗄 方案 2 · Supabase / Airtable 接表单

  • Supabase 建表(字段:姓名/手机/选项)
  • 让 v0 生成的表单直接 POST 到 Supabase REST API
  • 数据实时入库
  • 可结合下一章 n8n 自动发通知
  • 专业级、可扩展

🌐 方案 3 · 免费域名 · Vercel / Netlify

  • v0 Deploy 默认给 xxx.vercel.app 免费域名
  • 可绑定你自己的域名(腾讯云 / 阿里云 / Namecheap 买,9~30 元/年)
  • HTTPS 自动配好
  • 访问速度全球 CDN

📊 方案 4 · 访问统计 · 51LA / Plausible

  • 51LA 免费 · 国内访问友好
  • Plausible 无 Cookie · 合规友好
  • 让 v0 在网页 <head> 里嵌入追踪代码
  • 看多少人访问 / 从哪来 / 在哪段离开
让网页"有后端" · v0 对话式 Prompt
请把这张网页的【宾客回执表单】改造成: 1. 提交按钮改成 POST 到我的 Supabase: - URL: https://xxx.supabase.co/rest/v1/rsvp - Header: apikey = [xxx], Content-Type: application/json - Body: { "name": ..., "phone": ..., "attend": ..., "seat_pref": ... } 2. 提交成功后跳到"感谢页",显示一段浪漫致谢文案 3. 提交失败时显示错误提示,并保留已填信息 4. 在页面顶部加一行小字"已收到 XX 份回执"(用 GET 接口实时读取计数)
📖 实战 · 小区业委会投票页(2 小时做完)

学员建国帮小区做"电梯加装投票"的网页:v0 生成投票页 + Supabase 存票 + Plausible 统计访问。3 天收了 1200 户业主投票,远比微信群里@人管用。街道办直接调用这份数据当依据。

> DATA FLOW · 用户按"提交"后,数据的真实流向

📱
USER
宾客手机
🌐
网页表单
v0 / 喜帖页
🗄
金数据
后台存储
📧
邮件/微信
实时通知你
📊
Excel
一键导出

� 这就是"静态页面"和"真产品"的分水岭——能收 + 能存 + 能推 + 能导

ARCHITECT LOG · 给网页接表单 + 接通知 · 9 步(20 分钟)

  1. 注册金数据 · 拿一个免费账号 ⏱ 2 min
    • 访问 jinshuju.net · 点 微信登录 · 一键免密
    • 进主页 · 点 + 新建表单 · 选"空白表单"
    💡 国内场景优先金数据 · 微信通知 / 数据导出 / 合规都省心。国外用 Google Forms / Typeform
  2. 按字段建表单 ⏱ 3 min
    • 左侧拖字段:单行文本(姓名)· 手机号(手机)· 数字(到场人数)· 下拉(是否到场)· 多行文本(备注)
    • 每个字段都勾"必填" · 加占位提示文字
    • 保存
    做完的样子:左侧字段树有 5 条 · 右侧预览可看到完整表单
  3. ⚠ 关键 · 打开"微信通知" ⏱ 2 min
    • 表单编辑页顶部切到 通知 选项卡
    • 打开 微信通知 开关 · 选"每有一份新提交就通知"
    • 确认通知人是你本人
    💡 这是整套最值钱的一步——以后每有用户提交 · 你微信立刻收到推送 · 像电商商家后台
  4. 发布 + 拿 iframe 嵌入代码 ⏱ 2 min
    • 点右上 发布 · 状态变"已发布"
    • 切到 分享 选项卡 · 下方有 嵌入到网页
    • 复制整段 <iframe src="..." width="100%" height="600"></iframe>
    做完的样子:剪贴板里是一段 iframe HTML · 保存到临时记事本
  5. 回 v0 · 让它换表单 ⏱ 3 min
    • v0 对话框发:请把当前网页的【宾客回执】那段 <form>...</form> 整段替换成下面的 iframe · 保留周围的标题和样式:[粘 iframe]
    • 等 v0 改完 · 看预览
    ⚠ 若 iframe 在 v0 预览里不显示 · 是安全沙箱限制 · 不影响真实 Deploy 后的效果 · 继续下一步
  6. 重新 Deploy · 拿正式环境链接 ⏱ 2 min
    • 右上 Deploy 按钮 · 重发布
    • 等 60 秒 · 拿新的 xxx.vercel.app 链接(一般还是原来那个 URL)
  7. ⚠ 端到端冒烟测试(必做) ⏱ 3 min
    • 手机扫码打开网页
    • 填一条假数据:姓名"测试" · 手机"13800000000" · 点提交
    • 3 处验证:① 网页显示"提交成功" · ② 你手机收到金数据推送 · ③ 金数据后台出现 1 条数据
    做完的样子:3 处全绿 · 端到端闭环打通 · 这才叫"真产品"
  8. 加访问统计(可选进阶) ⏱ 3 min
    • 注册 51.la(51LA 统计)· 新建站点 · 拿一段追踪 JS
    • 回 v0 发:请把下面这段 <script> 加到 <head> 最末尾:[粘 JS]
    • 重新 Deploy · 1 小时后 51LA 后台能看到访问数
  9. 写一份"运营手册" · 方便以后接单 ⏱ 2 min
    09-网页/[场景名]/运营手册.md - 网页链接:https://xxx.vercel.app - 金数据后台:https://jinshuju.net/f/xxx - 微信通知:已开(每提交即时推送) - 51LA 统计:https://www.51.la/dashboard?site=xxx - 数据导出:金数据后台 → 导出 Excel - 撤销单条:金数据后台 → 删除该行
    💡 这份运营手册是你卖给客户"网页 + 后端"的售后说明——颜颜就是靠这个多卖 800 元
让一张网页"真的能用"而不只是"好看",最关键加什么?
PART G · 🎯 本章产出 ⏱ 20 min

产出 · 一个自动化任务 + 一张可扫码网页 两个真实可用的产品

🛠 产出 #1 · 浏览器自动化任务

  • 选一个每天 / 每周会重复做的"上网动作"
  • 写 Dia / 豆包浏览器的任务 Prompt
  • 真跑一次并截图结果
  • 可选:设成定时自动运行
  • 截图存档 + 朋友圈打卡

🎨 产出 #2 · 可扫码网页

  • 选一个真实场景(邀请函 / 报名 / 投票 / 简历)
  • v0 / 豆包 MarsCode 生成网页
  • 部署到 Vercel / MarsCode 预览
  • 生成二维码
  • 至少 5 人扫码访问过
  • 加表单收集,至少 3 条真实数据

FINAL QUEST · 两件套一起交付 · 10 步(45 分钟)

  1. 主题一致化 · 两件套讲同一个故事 ⏱ 3 min
    • 不要一个做"查机票"一个做"喜帖"——毫无关联
    • 推荐组合:喜帖网页 + 自动抓婚礼供应商报价 · 报名页 + 自动每天抓报名数推送 · 简历页 + 自动每天抓目标公司招聘页
    做完的样子:1 句话能说出两件套的关系——"自动化是因 · 网页是果"
  2. 产出 #1 · 按 PART C 的 10 步跑自动化任务 ⏱ 25 min
    • 直接回 PART C 的 PILOT LOG · 跑一遍
    • 输出物:定版 Prompt · 2 张截图 · 1 段 30 秒执行录屏(可选)
  3. 产出 #2 · 按 PART E 造网页 ⏱ 30 min
    • 按 PART E 的 ARCHITECT LOG 跑一遍
    • 输出物:公网链接 · 二维码 · 桌面 + 手机 2 张截图
  4. 给网页接表单(必做) ⏱ 20 min
    • 按 PART F 的 9 步加金数据 iframe + 微信通知
    • 端到端冒烟 · 3 处全绿
    ⚠ 没表单的网页 = 海报 · 不算 PART G 合格产出
  5. 分享文案用 Prompt 一键生成 ⏱ 3 min
    • 复制上方 ✨ 二维码 Prompt 发给豆包 · 换真实信息
    • 得到 3 段朋友圈文案 + 3 个群发话术 + 1 段感谢页文案
  6. 3 波扩散策略 ⏱ 5 min
    • 第 1 波:5 个最强关系私聊 · 主要听反馈
    • 第 2 波:工作群 / 兴趣群 · 收 20~50 次扫码
    • 第 3 波:朋友圈 · 放出完整作品 · 收第一单
    💡 两件套一起发效果最好:"我用 AI 做了一张喜帖(扫码)· 每天还让 AI 自动帮我抓供应商报价(截图)"——朋友直接记住你会 AI
  7. 48h 数据收集 ⏱ 2 days
    • 金数据后台看:多少人扫 · 多少人填 · 填完率
    • 自动化任务看:执行了几次 · 成功率多少 · 节省了多少时间
    • 把数字写进 README
  8. 作品集归档 · "自动化 + 造物"双件套 ⏱ 5 min
    09-自动化 + 网页/ ├── 01-自动化/ │ ├── prompt.md │ ├── 执行录屏.gif │ └── 每日结果样本.png ├── 02-网页/ │ ├── prompt-v1.md / v2.md │ ├── 公网链接.txt │ ├── 二维码.png │ └── 手机 / 桌面截图.png ├── 03-运营手册.md ├── 04-数据报告.md · 48h 扩散数据 └── README.md · 两件套价值说明
  9. 接单准备 · 把两件套放进你的"报价单" ⏱ 5 min
    • 自动化任务定制 · 报价 500~2000 元 / 件
    • 邀请函 / 报名页 · 报价 200~1500 元 / 件
    • 套餐(自动化 + 网页)· 报价 1500~5000 元 / 套
    • 芬姐靠这两招月入 5~8k 副业 · 周末 1 天干完
  10. 日历 +14 天回看 · 看有没有真实订单苗头 ⏱ 1 min
    • 手机日历设提醒:"14 天后看 · 是否有朋友问'能给我也做一个吗'"
    • 如果有 → 启动报价沟通 · 这就是你第一个付费客户
    做完的样子:你手里有 2 件真实作品 + 1 份运营手册 + 1 份数据报告 + 一个报价模板 · 五样东西一起 = 接单武器库
✨ 二维码 + 分享文案 Prompt(让豆包写) 我做了一张网页:[短链] 场景:[xxx] 目的:[邀请 / 报名 / 分享] 请帮我: 1. 用草料二维码生成二维码(给我生成链接) 2. 写 3 段朋友圈文案(一段正经、一段感性、一段俏皮) 3. 给我 3 个适合发送的微信/群话术(30 字内) 4. 写一段"感谢支持"话术(用于表单提交成功页)

🏆 产出验收标准

  • ✅ 浏览器自动化任务至少跑通 1 次并截图
  • ✅ 网页部署到公网且链接可访问
  • ✅ 网页可生成二维码
  • ✅ 网页含至少 1 个表单能收集提交
  • ✅ 至少 5 人扫码访问
  • ✅ 朋友圈 / 社群打卡 1 次附二维码
  • ✅ 归档「AI 作品集 / 09-自动化 + 网页」
💼 进阶 · 这两项能力怎么变现

浏览器自动化:帮小商家做"竞品监控 / 销量爬取 / 自动比价"——小包 500~2000 元
造网页:替朋友 / 邻居 / 小企业做落地页 / 邀请函 / 简历,单件 200~1500 元
学员芬姐用这两招月入 5~8k 副业,周末 1 天干完。

PART I · 🎮 AI 造物者训练营 4 游戏 ⏱ 25 min

巩固关 · 4 个游戏让你"造物者肌肉上身" 边玩边会

造物这门手艺最难的不是工具,是看得出哪些能自动化 · 查得出 Agent 为啥失败 · 写得出好的造网页 Prompt · 想得出能卖钱的组合

🤖 游戏 1 · 自动化可行性判断 · 4 个场景选

不是什么都能自动化 · 学会挑"值得自动化的场景"= 省 90% 试错时间。

🙋 场景 1:每天早上打开 3 个新闻站 · 看 15 分钟头条 · 挑 5 条转发给客户。
✅ 适合自动化(每日定时)
⚠ 部分可自动化
❌ 不适合
✅ 适合。每日定时 · 固定来源 · 可规则过滤(关键词 / 领域) · 典型"数字晨报"场景。Agent 每天 7 点跑一次 · 给你推 5 条。
🙋 场景 2:用支付宝扫脸付款买早餐。
✅ 适合
⚠ 部分
❌ 不适合(本人身份 + 现场动作)
❌ 完全不适合。需要本人到场 · 扫脸生物特征 · 支付合规。AI 浏览器只能处理"纯键鼠操作"· 碰到生物识别 / 支付 / 实体动作就到边界了。
🙋 场景 3:每周把 50 位候选人的简历从邮箱下载 · 重命名 · 填到 HR 系统。
✅ 适合(全键盘操作)
⚠ 部分(简历筛选需人工)
❌ 不适合
✅ 非常适合。全键鼠操作 · 规则清晰 · 高频重复。Agent 每周能省 2 小时。若还带简历筛选(判断"是否合格")那一步可让 AI 打分辅助 · 人工终审。
🙋 场景 4:抓小红书热门博主的点赞评论数 · 计算互动率 · 做竞品分析。
✅ 适合(随便抓)
⚠ 部分(遵守平台规则 + 合规)
❌ 完全禁止
⚠ 部分可行 · 需合规。小红书明确禁止爬虫抓取——大量抓 = 封号风险。合规做法:① 仅抓公开可见数据 · ② 低频(每天 1 次)· ③ 模拟人工节奏 · ④ 不用于商业倒卖。更安全选项:用官方开放数据接口。
🎯 答对 0 / 4 · 得分 0

🐛 游戏 2 · Agent Debug · 5 个失败案例找原因

Agent 跑到一半挂了?学员能否 3 秒诊断 = Bot 架构师真本事。

🐛 Case 1:Agent 打开携程后 · 一直停在"请登录"页面不动 10 分钟。
网络慢
没预登录 · Agent 卡登录
Prompt 太长
模型太弱
✅ 没预登录。PART C 第 2 步专门讲:要用跑 Agent 的那个浏览器先手动登录。这是新手 70% 翻车原因。
🐛 Case 2:Agent 打开淘宝后 · 反复点广告弹窗 · 半小时都没进商品页。
模型太弱
Prompt 没"关弹窗"指令
浏览器 bug
网太慢
✅ Prompt 漏指令。加一句 "遇到任何弹窗(广告/登录/抽奖)先关闭再继续" · 成功率从 40% 涨到 90%。
🐛 Case 3:Agent 每次跑结果都不一样 · 今天抓 10 条明天抓 5 条。
浏览器缓存
Prompt 说"抓最便宜的几条"· 数量没定死
插件冲突
模型太慢
✅ Prompt 数量没定死。改成 "精确抓前 10 条"· 强制数字 · 不给 AI 自由发挥空间。任何数字都要写死——这是稳定 Agent 的金科玉律。
🐛 Case 4:Agent 点错了"加入购物车"· 下单了一个不存在的商品。
浏览器快慢不同步
按钮定位语言太模糊
网速慢
模型幻觉
✅ 定位太模糊。"点击搜索"可能点到页面任何一个叫"搜索"的按钮。改成 "点击页面顶部搜索框右侧的橙色'搜索'按钮"——位置 + 颜色 + 文字三要素缺一不可。
🐛 Case 5:Agent 跑第一次成功 · 第二次跑突然报"找不到该元素"。
Prompt 变了
模型版本换了
网站改版 / AB 测试
浏览器 bug
✅ 网站改版。商业网站经常 AB 测试或改版 · 今天能用明天挂。稳定的做法:① 用"截图 + 视觉描述"让 Agent 识别 · 不依赖 HTML 结构;② 设置失败重试 · 3 次失败就通知你;③ 每周人工跑一次校验。
🎯 答对 0 / 5 · 得分 0

🎨 游戏 3 · v0 Prompt 大师 · 4 组选最好的

同一个需求 · 4 种 Prompt 写法 · 哪个能让 v0 出最好的网页?

📝 需求:做一张咖啡店开业邀请函网页。
"做一张咖啡店邀请函"
"设计精美的咖啡店开业页面"
"暖木色调 · 移动端优先 · 顶部大图 + 时间地点 + 3 段故事 + 地图 + RSVP 表单"
"最好看的咖啡店网页"
✅ 第 3 个。具体风格词 + 移动端 + 5 个模块明确列出。模糊词"精美""最好看"= 让 AI 自由发挥 = 你大概率不满意 · 要返工 5 次。
📝 需求:个人简历网页。
"做个我的简历"
"做个现代简洁的简历"
"极简黑白 + Inter 字体 · 3 屏滚动:自我介绍 / 工作经历时间轴 / 作品 Grid · 可导出 PDF"
"设计感强的简历"
✅ 第 3 个。颜色 + 字体 + 结构 + 功能 4 要素齐全。"可导出 PDF"这种功能性需求一定要说出来 · v0 会自动加"下载按钮"。
📝 需求:课程报名页。
"做一张课程报名页 · 要能报名"
"紫色主题 · 移动优先 · Hero 区 + 6 大卖点卡片 + 讲师介绍 + 学员证言 + 价格对比 + 报名表单(接金数据 iframe)+ 限时倒计时"
"参考小鹅通风格的课程页"
"帮我写一个课程网页 · 要好看"
✅ 第 2 个。一个能卖钱的课程页需要 7 大转化模块(Hero / 卖点 / 讲师 / 证言 / 价格 / 表单 / 倒计时)· 缺一不可。Prompt 里明确列出来 = v0 直接出一版可上线。
📝 需求:v0 已经出了一版页面 · 但配色太花 · 你要改。
"配色改一下 · 不好看"
"只保留主色 #6366F1 · 辅色灰白 · 强调色金黄 #F59E0B · 其他色全去掉"
"改得好看一点"
"重做一版"
✅ 第 2 个。给 v0 具体的 HEX 颜色值 + 色系角色(主 / 辅 / 强调)。"重做一版"会把其他好的地方也打掉——精准改 = 只动你想改的
🎯 答对 0 / 4 · 得分 0

🎰 游戏 4 · Indie Hacker 盲盒 · 抽一个能卖钱的双件套

不知道做啥?3 秒给你身份 + 自动化任务 + 网页 + 月收入预期

🎲 造物者项目生成器 · 身份 × 自动化 × 网页 × 收入

点下面按钮 · 抽一个你的第一个双件套 🎰

💡 连抽 3 次挑最心动 · 立刻按 PART G FINAL QUEST 上线

PART J · 🚀 AI 造物者 · Indie Hacker 职业跃迁 ⏱ 20 min

会"AI 造物 + 自动化"的人 · 薪资多少 · 怎么变现 可跳槽 · 可独立创业

这一章的"自动化 + 造网页"是AI 时代个人品牌最强组合技——让你从"打工人"变成"Indie Hacker 独立开发者"。一个人 + AI 干一个小团队的活 · 直接收钱 · 不用看老板脸色。

💰 3 档岗位 · 3 档薪资

TIER 1 · 新人入门
⚡ RPA / 自动化实施工程师
8~20k / 月
给中小企业搭自动化脚本 / 造简单落地页 / 接表单数据库。市场空缺大 · 要求低。会扣子 + 豆包浏览器 + v0 = 入门。
💼 RPA 工程师 · 自动化实施 · 前端落地页开发 · 数据采集运营
TIER 2 · 本章毕业位
🛠 AI 独立开发者 / 数字工匠
20~50k / 月 + 订阅分成
接各类自动化 + 网页定制单 · 单周交付 1~2 单 · 每单 1~5w。或做自己的订阅产品 / SaaS 雏形——被动收入逐步滚动。
💼 独立开发者 · 数字工匠 · 自动化解决方案顾问 · AI 内容工具独立设计
TIER 3 · 进阶目标
🏆 Indie Hacker · SaaS 创始人
50k~1000w+ / 月(年)
自有 SaaS 月订阅用户 500+ · 或 10+ 个高价自动化产品矩阵 · 年流水 500w~1 亿。远程办公 · 没有老板。
💼 Indie Hacker · 小微 SaaS 创始人 · 数字游民创业者 · 1 人独角兽

💸 6 条变现路径 · 副业 / 全职 / 独立创业

定制
自动化任务定制 · 单件 500~3000
月 10 单 = 5~30k

帮小商家 / 自媒体 / 小团队做"竞品监控 / 比价 / 数据抓取" · 客户付款即得。周末 1 天干 2 单。

定制
网页 / 落地页定制 · 单件 200~2000
月 20 件 = 4~40k

邀请函 / 报名页 / 简历页 / 活动页 · 颜颜那套模式。v0 生成 + Vercel 部署 · 30 分钟 1 件。

套餐
"自动化 + 网页"双件套 · 1500~5000
客单价高 · 客户粘性强

PART G 两件套组合——客户为"完整解决方案"付钱 · 毛利比单件高 60%。一个客户能续单 6~12 个月。

订阅
自建微 SaaS · 月 29~299
"被动收入"的终极形式

例:"每周抓 50 个博主数据发邮箱 SaaS · 月费 99"——100 客户 = 1w / 月被动收入 · 再翻一倍就月薪过万。

课程
7 天造物者训练营 · 399~2999
自己作品本身就是最佳广告

"零基础 7 天造出你的第一个 AI 工具"打包课 · 小鹅通 / 抖音卖。你的作品集就是最好的转化素材。

工具包
Prompt / Agent 模板包售卖
单包 29~299 · 睡后可卖

"30 个自动化 Prompt + 10 个 v0 网页模板" 打包 99 元 · 放淘宝 / 小红书 · 半自动被动收入。

📄 简历 / 求职加分话术

应聘 RPA / 自动化工程师岗:
"独立交付过 自动化任务 + 落地页 双件套 · 使用 豆包浏览器 + Dia + v0 + 金数据 全栈 · 为 XX 客户节省 XX 工时 / 月 · 月产 20+ 件数字作品。"
应聘前端 / 全栈 / 独立开发者:
"会用 AI 辅助开发 4 件套(v0 / Cursor / Bolt / MarsCode)· 独立上线过 XX 个落地页 · 单页最快 30 分钟交付 · 熟悉 Vercel / Supabase / 金数据等后端集成。"
应聘 AI 产品 / 运营:
"深度理解 Agent + Web 生成两套生产工具 · 能独立设计 AI 自动化 SOP · 评估 ROI · 推动业务数字化。过往主导 XX 自动化项目 · 累计省时 XX 小时。"
面试黄金回答(问到"怎么用 AI 降本"):
"我有一套造物者双降本模型
自动化降本——把每周重复 3 次以上的"上网动作"用 Agent 跑 · 单任务 500~2000 成本 · 一年回本 3~10 倍;
造物降本——落地页从 7 天 ×5 人降到 30 分钟 ×1 人 · 降本 95%。
过往为 [客户] 交付 XX 个自动化 + XX 个网页 · 总节省 [数字] 工时。"
🎯 本章 5 张门票
  • 门票 1 · Agent 驾驭力:知道什么能自动化 · 什么不能 · 防踩坑 Top1
  • 门票 2 · 造网页能力:30 分钟出一张可上线网页 · 这是 2025 最强个人杠杆
  • 门票 3 · 端到端打通:能收 + 能存 + 能推 + 能导——让"海报"变成"产品"
  • 门票 4 · 双件套组合:自动化 + 网页一起卖 · 客单价翻倍 · 留客率翻倍
  • 门票 5 · Indie Hacker 心态:不用等 offer · 自己造产品 · 自己找客户 · 自己收钱
PART H · 打卡 + 预告 ⏱ 10 min

本章 12 项打卡 · 解锁「AI 造物者」徽章

✅ 完成下面 12 项任务

🎬 下一章预告

第 10 章 · 工作流自动化 + 定制小工具 · 毕业作品集:你会用飞书多维表格 AI 字段 + 扣子工作流 + n8n 把前 9 章的能力串成"一次配置 / 自动跑"的流水线——同时整理 10 件毕业作品,拿到结业证书。这是全课程最"高大上"也最终极的一章

🌐

AI 造物者

Chapter 09 · 徽章解锁中

你既能让 AI 替你"用"互联网,也能让 AI 替你"造"一个属于你的网页产品。
第 9 件 AI 作品:一个自动化任务 + 一张公网上线的网页。
下一章,我们给前 9 章做一次总复习——把所有能力串成流水线,并交付毕业作品集。

🚀 进入第 10 章:工作流自动化 · 毕业作品集
← 上一章 下一章 →