热门技能 Vol.031 | Page Agent — 一行代码网页变AI原生

发表于： 2026年7月9日 2026年7月9日
分类：热门Skill日报

访问量： 58

每日热门技能分享

Vol.031 · 网页自然语言操控 Skill

2026-07-09 · 数据来源 GitHub

你是不是也这样 👇

你在做 SaaS 产品，用户面对一个 20 个字段的老系统表单发呆；或者你想给网站加 AI 助手，但一看方案——要装 Python、要部署 headless browser、要搞后端代理，工程量直接爆炸。更别提截图式的浏览器 Agent，多模态 LLM 调用费贵到肉疼。

结果：AI Copilot 的 idea 很好，但落地成本太高，一直停留在 PPT 阶段。

这个 Skill 做的事很简单：

阿里开源的 Page Agent，是一个纯前端 JS 库。在你的网页里加一行 <script> 标签，用户就能用自然语言操控页面——点按钮、填表单、选下拉，全部一句话搞定。

不用 Python、不用截图、不用多模态模型、不用后端。一行代码 → 网页变 AI 原生应用。

做完之后你会看到什么？

Before	▸ 给 SaaS 加 AI Copilot，需要 Python + headless browser + 后端代理，开发周期 2-4 周 ▸ 截图式浏览器 Agent，每次操作调用多模态 LLM，单次成本 ¥0.1-0.5 ▸ 表单填写 20 步操作，用户流失率高达 67% ▸ 残障用户无法使用复杂 Web 应用
After	▸ 一行 `<script>` 标签接入，30 分钟上线 AI Copilot ▸ 纯文本 DOM 操控，无需截图，LLM 调用成本降低 90%+ ▸ 20 步表单 → 1 句话搞定 ▸ 天然支持语音指令和屏幕阅读器，零门槛无障碍访问

照着做，5分钟看到效果 👇

1一行代码接入（10秒）

在你的 HTML 页面里加一行 script 标签：

✅ 预期效果：页面右上角出现 Page Agent 交互面板，用户可以直接输入自然语言指令

2接入你自己的 LLM（5分钟）

npm install page-agent

import { PageAgent } from ‘page-agent’

const agent = new PageAgent({
  model: ‘gpt-5.1’,
  apiKey: ‘YOUR_API_KEY’,
  language: ‘zh-CN’,
})

await agent.execute(‘点击登录按钮’)

✅ 预期效果：支持 OpenAI、Claude、Qwen、DeepSeek、Ollama 等任意 LLM，中文指令直接生效

3体验自然语言操控（即时）

// 用户在页面面对话说：
“帮我填写周五出差的报销单”
“选择金额大于1000的订单”
“点击提交并确认”

✅ 预期效果：Agent 自动分析 DOM 结构，定位元素并执行操作，内置人机确认机制（Human-in-the-Loop）

适不适合你？

✅ 适合你	SaaS 产品经理，想快速给产品加上 AI Copilot 能力
✅ 适合你	前端开发者，厌倦了用 Playwright/Puppeteer 写复杂自动化脚本
✅ 适合你	做 ERP/CRM 等复杂后台系统，需要降低用户操作门槛
❌ 不适合	需要服务端批量爬取/跨站点自动化的场景（这是客户端方案，不是服务端爬虫）

📎 转给正在给产品找 AI Copilot 方案的同事

▸ GitHub：alibaba/page-agent（25.2K Stars）
▸ 在线 Demo：alibaba.github.io/page-agent
▸ 核心创新：DOM Dehydration 技术，把复杂 DOM 压缩为轻量文本地图，LLM 直接用文本理解页面
▸ Chrome 扩展：可选装，支持跨页面/跨标签页任务
▸ MCP Server：（Beta）让外部 Agent 控制浏览器

💬 你的产品有 AI Copilot 吗？用的什么方案？

评论区聊聊，看看谁的方案最轻量 👇

⚠️ 技能包来源于互联网，在使用前请自行复核开源文件，确认不存在安全隐患。

Vol.031 · 热门技能日报 · 数据来源 GitHub

每天发现一个值得关注的 AI 开发技能

🔗 资源链接

▸ GitHub：alibaba/page-agent (25.2K Stars)
▸ 在线 Demo：alibaba.github.io/page-agent
▸ Chrome 扩展：Chrome Web Store
▸ 协议：MIT License

viplao

516