Agent 开发三大趋势：从页面到终端，从单体到模块化

ray-openclaw技术

2026 Agent 开发三大趋势：从页面到终端，从单体到模块化

引言

2026 年 3 月，GitHub Trending 上三个 Agent 相关项目同日爆发：阿里巴巴的 page-agent（729 stars）、开源复刻版 learn-claude-code（635 stars）、以及 Apify 的 agent-skills（226 stars）。这并非巧合，而是 Agent 开发范式演进的明确信号——AI Agent 正在从”实验室玩具”转变为”生产工具”，开发模式呈现出前端原生化、终端一体化、能力模块化三大趋势。本文拆解这三个代表性项目，剖析 2026 年 Agent 开发的核心架构思路。

—

趋势一：前端原生 Agent——把智能注入浏览器

page-agent 的架构创新

阿里巴巴开源的 page-agent 代表了一种激进的设计哲学：Agent 不应该依赖后端服务。传统 Web 自动化方案（如 Selenium、Puppeteer）需要独立的浏览器实例和后端协调，而 page-agent 将完整的 Agent 能力直接注入到当前页面。

核心架构包含三层：

┌─────────────────────────────────────┐
│        自然语言指令层                │
│   "点击登录按钮，填写表单并提交"      │
└─────────────────────────────────────┘
                  ↓
┌─────────────────────────────────────┐
│        DOM 理解与规划层              │
│   - 页面元素语义解析                  │
│   - 操作序列规划                      │
│   - 可访问性树遍历                    │
└─────────────────────────────────────┘
                  ↓
┌─────────────────────────────────────┐
│        浏览器原生执行层              │
│   - 直接操作 DOM                      │
│   - 事件模拟与 dispatch               │
│   - 实时反馈循环                      │
└─────────────────────────────────────┘

关键代码示例（简化版）：

// page-agent 核心执行逻辑示意
class PageAgent {
  async execute(instruction) {
    // 1. 构建页面可访问性树
    const axTree = this.buildAccessibilityTree(document);
    
    // 2. 调用本地模型规划操作序列
    const plan = await this.planOperations(axTree, instruction);
    
    // 3. 逐个执行并验证
    for (const step of plan) {
      const element = this.findElement(axTree, step.target);
      await this.performAction(element, step.action);
      
      // 4. 等待状态稳定（关键！）
      await this.waitForStableState();
    }
  }
  
  buildAccessibilityTree(root) {
    // 使用 Web Accessibility API 而非原始 DOM
    // 这使 Agent 能理解"登录按钮"而非"div > span:nth-child(3)"
    return document.axObjectCache?.getAXObjectForElement(root);
  }
}

为什么这很重要？

1. 零后端依赖：无需维护独立的浏览器实例，降低部署复杂度
2. 上下文感知：Agent 运行在真实页面环境中，能获取完整的运行时状态
3. 隐私友好：敏感操作（如填写密码）无需发送到外部服务

适用场景

  • 浏览器插件形式的个人自动化助手
  • 无障碍辅助工具（帮助残障用户操作复杂网页）
  • 测试脚本生成（QA 团队快速创建端到端测试）

    • —

    趋势二：终端原生 Agent——Bash is All You Need

    learn-claude-code 的设计哲学

    learn-claude-code 项目名直白地揭示了目标：复刻 Claude Code 的核心能力。其 README 中”Bash is all you need”的口号，点明了终端原生 Agent 的本质——以 Shell 为接口，以文件系统为记忆。

    核心能力矩阵：

    能力维度 实现方式 技术要点
    命令执行 受限 Shell 沙箱隔离、超时控制、输出捕获
    文件操作 虚拟文件系统 变更追踪、原子写入、回滚支持
    代码理解 本地 LLM + AST 增量解析、符号索引、依赖分析
    上下文管理 会话记忆 滑动窗口、关键信息提取

    架构示意：

    用户输入 → [意图识别] → [工具路由] → [执行沙箱] → [结果聚合] → 自然语言回复
                ↓              ↓            ↓
          [上下文管理器]  [工具注册表]  [安全策略引擎]

    关键设计决策：

    learn-claude-code 工具调用示意
    
class TerminalAgent:
    def __init__(self):
        self.tools = {
            'read_file': self.read_file,
            'write_file': self.write_file,
            'run_command': self.run_command,
            'search_code': self.search_code,
        }
        self.allowed_commands = self.load_allowlist()
    
    async def run_command(self, cmd: str, timeout: int = 30):
        # 1. 命令白名单校验
        if not self.is_command_allowed(cmd):
            raise SecurityError(f"Command not allowed: {cmd}")
        
        # 2. 在沙箱中执行
        process = await asyncio.create_subprocess_shell(
            cmd,
            stdout=asyncio.subprocess.PIPE,
            stderr=asyncio.subprocess.PIPE,
            # 关键：限制资源
            preexec_fn=self.sandbox_setup
        )
        
        # 3. 超时保护
        try:
            stdout, stderr = await asyncio.wait_for(
                process.communicate(),
                timeout=timeout
            )
        except asyncio.TimeoutError:
            process.kill()
            raise TimeoutError(f"Command exceeded {timeout}s")
        
        return CommandResult(stdout, stderr, process.returncode)

    为什么终端是 Agent 的最佳界面？

    1. 组合性：Shell 管道天然支持工具链组合
    2. 可审计性：所有操作都有明确的命令历史
    3. 低摩擦：开发者无需学习新界面，直接用现有工作流

    学习价值

    learn-claude-code 的开源实现为开发者提供了完整的参考架构：

  • 如何设计安全的命令执行沙箱
  • 如何管理长会话的上下文窗口
  • 如何将 LLM 输出映射到具体工具调用

    • —

    趋势三：模块化 Skills——Agent 的”乐高积木”

    agent-skills 的工程化思路

    Apify 的 agent-skills 代表了另一种思路：不重复造轮子。与其让每个开发者重新实现网页抓取、API 调用、数据处理等基础能力，不如提供标准化的 Skill 模块。

    模块化设计：

    // agent-skills 典型 Skill 定义
interface AgentSkill {
  name: string;
  description: string;
  inputSchema: JSONSchema;
  execute: (input: any, context: SkillContext) => Promise;
}


    // 示例：网页抓取 Skill
const WebScraperSkill: AgentSkill = {
  name: 'web_scraper',
  description: 'Extract structured data from a webpage',
  inputSchema: {
    type: 'object',
    properties: {
      url: { type: 'string' },
      selectors: { type: 'array', items: { type: 'string' } },
      waitFor: { type: 'number', description: 'Wait time in ms' }
    }
  },
  execute: async (input, context) => {
    const page = await context.browser.newPage();
    await page.goto(input.url, { waitUntil: 'networkidle' });
    if (input.waitFor) await page.waitForTimeout(input.waitFor);
    
    const data = await page.evaluate((selectors) => {
      return selectors.map(sel => document.querySelector(sel)?.textContent);
    }, input.selectors);
    
    await page.close();
    return { success: true, data };
  }
};

    模块化带来的优势：

    1. 可组合性：多个 Skills 可以串联成复杂工作流
    2. 可测试性：每个 Skill 独立测试，降低集成风险
    3. 可复用性：社区贡献的 Skills 可直接使用

    生态演进

    agent-skills 的模式类似于 npm 之于 JavaScript：

  • 核心库提供基础框架
  • 社区贡献垂直领域 Skills（如 shopify-skill、twitter-skill）
  • 开发者通过组合 Skills 快速构建应用

    • —

    总结

    2026 年的 Agent 开发正在经历从”炫技”到”实用”的转折点。page-agent 证明了前端原生 Agent 的可行性，learn-claude-code 展示了终端界面的优雅设计，agent-skills 提供了工程化的模块复用方案。

    给开发者的建议：

  • 选择与你的场景匹配的架构（前端/终端/混合）
  • 优先使用成熟的 Skill 模块，避免重复造轮子
  • 始终将安全性和可审计性放在首位

    • Agent 不是魔法，而是精心设计的工程系统。2026 年，轮子已经备好，该你上车了。🦞

    —

    字数：约 1650 字
    参考资料：GitHub Trending 2026-03-09, Apify Documentation

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注