AI Agent & 前端自动化全套名词与流程复习手册

名词速查 · 流程拆解 · 实操提示
🔍
没有找到匹配的内容，换个关键词试试～
1

基础网页前端名词

HTML

网页骨架，定义页面结构：标题、按钮、图片、输入框。

只负责内容，没有样式。

CSS

网页样式皮肤，控制颜色、字体、间距、圆角、动画。

JavaScriptJS

网页交互编程语言，让网页可以动起来：点击事件、弹窗、游戏逻辑、修改页面内容。

  1. 浏览器 JS：操作网页 DOM。
  2. Node 环境 JS：脱离浏览器，操作电脑文件、网络请求。

Node.jsNode

让 JavaScript 脱离浏览器，可以直接运行在电脑 / 服务器上。

很多自动化库 (Puppeteer/Playwright) 属于 Node.js 库。

DOM文档对象模型

浏览器把 HTML 解析成内存里的一棵对象树。

  1. HTML 是磁盘上的文本；DOM 是浏览器内存中可被 JS 读写修改的网页。
  2. JS 可以读取、修改 DOM，实现页面动态变化。
注意WebGL/Three.js 画布不属于 DOM，拿不到画布内部绘制细节。

URL

网页地址，互联网资源定位地址，工具通过 URL 访问网页。

WebGL

浏览器原生高性能 3D 绘图底层接口，API 繁琐难写。

Three.js

基于 WebGL 封装的 JS 库，简化 3D 开发，用来做浏览器 3D 页面、3D 小游戏。

UI

User Interface 用户界面，人眼可见的页面：按钮、卡片、配色、排版布局。

AI 产出 UI：AI 生成整套界面代码。

2

编程语言 & 库 & 工具

Python

通用编程语言，广泛用于自动化、脚本、爬虫、视频处理、AI 脚本。

MoviePy、很多抓取脚本使用 Python。

Code

代码，给机器执行的指令文本。

Puppeteer

Node.js 库，谷歌出品，操控 Chrome 浏览器做浏览器自动化。

Playwright

Node.js 浏览器自动化库，Puppeteer 升级版本，支持多浏览器，稳定性更强，网站复刻底层常用。

FFmpeg

开源万能音视频命令行工具。

负责视频拼接、转码、图片序列合成 mp4、提取音频。

代码生成视频几乎底层依赖 FFmpeg。

MoviePy

Python 视频处理库，封装 FFmpeg，用代码剪辑、合成视频。

TTS

TextToSpeech，文本转语音，输入文字输出配音音频，代码做视频用来生成配音。

Claude

Anthropic 的上游大模型，属于 AI 大脑，只负责思考输出，本身没有调用文件、浏览器的能力，需要 Agent 框架调用工具。

MiniMaxH3 / Abab6.5

国内上游大模型厂商，提供云端 API 服务，不需要下载，拿到 API Key 网络调用即可。

Hermes

开源 Agent 框架，不是大模型；用来编排 Skill、MCP、浏览器自动化。

OpenClawGopenclaw

本地开源 Agent 框架，支持子 Agent、Handoff、定时任务、消息监听、文件监控。

ReasonixReason

本地编码 Agent 框架，原生支持 MCP、Skill、Hooks、记忆系统，面向本地自动化工作流。

CCSwitch

本地中转调度工具，本身不提供 AI 能力。

统一管理多上游 API、MCP 服务，可视化一键切换上游服务商，提供本地代理转发。

VS Code

免费代码编辑器，用来打开、编辑 HTML/CSS/JS/Python，打开 ZIP 解压后的项目源码。

GitHub

全球开源代码托管平台，存放开源项目源码，可以下载工具脚本。

3

文件、配置格式

Markdown.md

轻量标记文本格式，用简单符号写标题、加粗、列表。

  1. 代码块：使用 ``` 包裹，渲染为带复制按钮的方框，原样保留换行、符号，不解析格式。
  2. 打开方式：VS Code、Typora、Obsidian、飞书文档、记事本。

轻量 Skill 很多直接写为 Markdown 文档，写 SOP、规则、步骤。

ZIP 包

.zip压缩格式，把多个文件、文件夹打包为单个文件，方便下载传输。

使用前需要解压。

Agent 云端项目下载后得到 zip 包，解压后 VSCode 打开源码。

JSON 配置文件

程序配置文件，大括号键值对格式，互联网接口、MCP、CCSwitch 大量使用。

示例：{"api_key":"xxx","model":"minimaxh3"}

TOML 配置文件

配置文件，可读性更强，适合本地软件配置，支持注释。

键值对

"键":"值"，类似填表：【姓名】：张三。

键是名称，值是对应的内容。

参数

传给程序、大模型的各项设置。

开关

布尔参数，true 开启，false 关闭。

配置

不修改源代码，外部设置改变程序行为；APIkey、模型选择、超时时间都属于配置。

云端虚拟工作目录

豆包 Agent 沙箱内的虚拟文件夹，不是本机真实文件夹。

  1. Agent 生成的 html、图片、项目文件保存在这里；AI 可以读写修改。
  2. 本机不能直接访问，只能下载 ZIP 导出。
  3. 会话结束、清空目录，沙盒销毁，文件全部丢失。

沙盒

隔离安全运行环境。

沙盒内程序拥有内部读写权限，严格隔离宿主真实系统，防止程序越权访问磁盘。

云端 Agent 全部跑在服务器沙盒中。

容器Docker

把程序 + 全部依赖 + 运行环境打包成隔离盒子。

  1. 解决 “在我电脑能跑，你电脑跑不起来” 环境不一致问题。
  2. MCP 服务、Skill 经常打包成容器分发。比完整虚拟机轻量。
4

网络、传输协议、代理相关

HTTP

互联网基础传输协议，浏览器访问网页、调用 API 全部走 HTTP。

传输协议

网络两端约定好的通讯规则；双方按照统一格式打包、解析数据包完成通信。

API应用程序接口

程序与程序之间对话的通道与通信约定。

类比快递站：寄件必须遵守填写规范；这套规范就是 API。

上游服务商提供 API，Agent 通过网络发请求，拿到 AI 返回结果。

API Key（API 密钥）

一串随机长字符串，相当于调用服务的账号密码；服务商识别密钥计费、限流。

密钥泄露会被盗用。

Upstream上游

真正提供大模型 API 的源头服务商（MiniMax、Claude 等）。

CCSwitch 只是中转，上游才是真正 AI 大脑来源。

上游宕机，中转就失效。

代理Proxy

中间转发服务。

请求先发给代理，代理再转发给目标服务，返回结果原路传回。

CCSwitch 自带本地代理。

VPN

虚拟专用网络，把整机全部网络流量加密路由到远端节点。

  1. 路由：决定网络数据包走哪一条转发路径。
  2. 节点：网络上承担转发任务的服务器机器。
  3. 远端节点：位于互联网远端的服务器节点。

代理可以只转发部分流量；VPN 接管整机全部流量。

5

大模型、Agent 架构基础

Prompt提示词

发给大模型的指令文本；可以简短一句话，也可以是长角色、SOP、约束。

Skill 内部封装大量固化 Prompt。

如何训练写 Prompt

  1. 写明：角色 + 任务目标 + 输出格式 + 约束条件
  2. 复杂任务做任务拆分
  3. 给示例（Fewshot）
  4. 迭代：不满意就指出问题，局部修改，不要全部重写
  5. 复盘：思考哪些信息、约束没有告诉 AI。

大模型LLM

AI 大脑，负责理解语言、思考、生成文字代码；MiniMax、Claude 属于大模型。

本身不能读写文件、操作浏览器。

Agent 框架

Agent 的调度身体，本身不会思考，必须接入大模型作为大脑。

负责：加载 Skill、调用 MCP 工具、Handoff 子 Agent、读写文件、定时任务。

小提示Reasonix、OpenClaw、Hermes。

Skill技能

可复用任务包，一套 SOP 业务流程。

  1. 轻量 Skill：Markdown 文档，写角色、步骤、约束 Prompt。
  2. 工程 Skill：SOP + 脚本 + MCP 调用逻辑。

Skill 回答：做什么任务、先后顺序、异常怎么处理。

存储：本地框架 Skill 存放在电脑磁盘 skill 目录；豆包云端为平台预制，用户不能上传自定义 Skill。

触发：①提示词调用；②工作流编排自动触发。

复用：一份 Skill 可以被多个 Agent 实例加载使用。

限制：如果 Skill 绑定特定脚本 / MCP，换到别的框架缺少依赖就失效。

MCPModel Context Protocol，模型上下文协议

AI 的 USBC 通用接口标准。

  1. MCP Server：把一类能力（抓取、文件读写）封装成服务，对外输出统一接口。
  2. MCP Client：Agent 框架侧组件，调用 MCP Server。

MCP：定义能干什么（工具接口）； Skill：定义怎么干（业务流程 SOP）。

价值：同一套 MCP 服务，所有兼容 MCP 的 Agent 都可以直接调用，不用重复开发对接。

能力封装

把底层一堆复杂逻辑隐藏，对外只提供简单接口。

使用者不用关心底层实现。

小提示把微信抓取整套浏览器自动化逻辑封装成 MCPServer。

Handoff转交机制

Agent 之间任务交接。

把完整上下文（需求、中间产物、任务 ID）连同任务交给另一个 Agent 执行；完成后结果交还。

子 Agent子代理

从总任务拆分出来的专用小智能体，只专注单一任务。

  1. 主 Agent：总调度；
  2. 子 Agent：负责细分专项任务；
  3. 优势：避免单 Agent 上下文爆炸，提升输出质量，部分任务可以并行。

分化方式：①预先定义好角色；②主 Agent 动态创建子 Agent 实例。

通信：Handoff 携带完整上下文包，任务完成回传结果给主 Agent。

Hook钩子

事件触发器：当某个事件发生，自动执行一段逻辑。

小提示文件修改、子 Agent 任务完成，触发动作。 Hook vs Skill：Skill 是完整菜谱；Hook 是 “条件满足自动执行” 的触发开关。 Hook vs Prompt：Prompt 是发给大模型的文字指令；Hook 可以直接执行代码，完全不经过大模型。

记忆系统

Agent 模块，保存历史上下文、偏好、项目信息，避免重复输入背景。

本地框架自带，不需要单独下载，可以开启关闭。

6

自动化相关概念

定时任务Cron

到达指定时间自动执行任务，无需人工操作。

监听消息

持续监控消息渠道（飞书、微信），收到新消息自动触发工作流。

文件监控

监控指定文件夹；文件新增 / 修改 / 删除时自动触发任务。

浏览器自动化

程序操控浏览器：打开网址、滚动、点击、获取 DOM、截图。

底层由 Puppeteer / Playwright 实现。

“真补货”：圈内黑话，等待浏览器完整加载全部图片、JS 资源之后，再提取页面，避免素材缺失。

爬虫

程序自动访问网站获取网页内容。

  1. 普通 http 爬虫：下载静态 HTML，JS 动态渲染页面会空白；
  2. 带浏览器自动化爬虫：虚拟浏览器完整加载页面再拿 DOM。
提醒未经许可批量抓取他人内容有法律风险。

封装

将复杂底层逻辑隐藏，对外暴露简单接口，实现复用，降低使用门槛。

  1. 底层封装：把复杂底层 API 包装成简单库；
  2. 能力封装：把一整套业务逻辑包装成服务。

SOP

标准作业流程，一套标准化步骤清单。

Skill 本质就是机器可读的 SOP。

7

两个完整流程案例

案例 1：网站复刻 Skill 完整链路

  1. 用户输入目标 URL 网页地址；
  2. Playwright (Node.js 库) 浏览器自动化启动虚拟浏览器访问 URL；
  3. 等待页面完整加载（真补货），获取 DOM、样式、截图、素材；
  4. AI 不直接复制原站源码，重新生成组件化 HTML/CSS/JS；
  5. 全部项目资源存入云端虚拟工作目录（沙盒内）；
  6. 用户可以继续发指令迭代修改页面；
  7. 完成后下载 ZIP 压缩包；
  8. 本地解压，VS Code 打开项目源码。
注意WebGL/Three.js 画布、加密 JS 逻辑无法完整还原；他人网站仅允许个人学习，不可直接商用。

案例 2：主 Agent + 子 Agent 协同完整示例

用户需求：复刻网页、代码审查、产出配套宣传短视频，输出完整项目包。

  1. 主 Agent 接收总需求，拆解 3 个子任务：网页复刻、代码审查、视频脚本；准备公共上下文（URL、项目规范）。
  2. Handoff①：主 Agent 把 URL、上下文交给【子 AgentA：网页复刻】
    1. 子 A 调用网站复刻 Skill，产出前端源码，保存到工作目录；
    2. 完成，Handoff 交还主 Agent 源码路径。
  3. Handoff②：主 Agent 把源码交给【子 AgentB：代码审查】
    1. 子 B 运行代码规范 Skill，修复 bug、整理代码；返回修改后源码。
  4. Handoff③：主 Agent 提取页面文案风格，交给【子 AgentC：视频脚本】
    1. 子 C 加载自动化视频 Skill + 审美 Skill；生成脚本，调用 TTS、FFmpeg 渲染 MP4 视频；返回视频文件路径。
  5. 主 Agent 汇总合并：网页源码、审查报告、视频文件统一放入同一个工作目录，打包 ZIP 交付用户。

子 Agent 之间不直接对话；全部通过主 Agent+Handoff 流转上下文与结果。

8

实操学习提示

  • MCP 解决 “工具接口标准”；Skill 解决 “业务步骤 SOP”；Handoff 解决 Agent 之间任务转交；
  • Agent 框架只是手脚，必须接入上游大模型作为大脑；
  • 云端沙盒虚拟目录不能本机直接访问，必须下载 ZIP；会话销毁文件丢失；
  • Skill 可以复用，但依赖的 MCP、脚本缺失就会失效；
  • 封装的意义：屏蔽底层复杂细节，提高复用性。