前端 AI 工具实战：Claude Code、OpenCode 与 A2UI 协议解析

openskills sync
# 自定义输出文件
openskills sync --output .claude/instructions.md
# headless 模式（适合 CI/CD）
openskills sync --yes

核心价值：为什么需要 Skills？

1. 可复用的专业知识 传统方式下，每次对话都需要重复说明细节。Skills 允许将这些知识封装成可复用的技能包。

   • 传统方式：每次对话需说明'按公司品牌指南创建文档'、'遵循特定代码审查标准'。
   • 使用 Skills：一次定义 company-branding、code-review-standards，多次复用。

2. 一致性保证 确保 AI 在处理相同任务时遵循统一标准，对企业应用尤为重要：

   • 品牌一致性：文档生成符合规范。
   • 流程标准化：数据分析使用组织特定工作流。
   • 质量控制：代码审查符合团队编码标准。

3. 能力扩展 让 AI 能处理原本不擅长的专业任务，如创建 Office 文档、处理 PDF、执行企业特定业务流程。

4. 知识隔离与安全 不同技能独立管理和版本控制，便于权限管理和审计。

Skills vs. Tools (MCP)：互补而非替代

Anthropic 生态中还有另一个重要概念——MCP（Model Context Protocol），它与 Skills 定位有明显区别。

优劣势分析

• Skills 优势：Token 成本低、简单易用、自动激活、多技能并存、版本管理友好。
• Skills 局限：无法访问实时数据、生态相对封闭、静态知识更新需手动修改。
• MCP Tools 优势：扩展性强、开放标准、实时性高、社区生态丰富。
• MCP Tools 局限：Token 成本高、配置复杂、学习曲线陡峭、网络延迟。

使用场景指南

• 选择 Skills：文档生成与格式化、业务流程自动化、本地数据分析、代码审查和重构。
• 选择 MCP Tools：实时数据获取、多系统编排、遗留系统集成、外部服务调用（如 Slack、日历）。

OpenCode 前端使用

什么是 OpenCode

OpenCode 是一个开源 AI 编码工具，专为终端环境设计。装好后在命令行里直接和 AI 对话，让它帮你写代码、找 Bug、做重构。

主要特点

• 原生终端界面，响应快，支持自定义主题。
• 支持 Claude、GPT-4、Gemini 等多个 AI 模型。
• 自动扫描项目文件，理解代码结构。
• MIT 开源协议，GitHub 获 3 万 + 星标。

安装配置步骤

第一步：安装

执行安装命令：

curl -fsSL https://opencode.ai/install | bash

也可以用包管理器：

# npm 安装
npm install -g opencode-ai

# Homebrew 安装（macOS/Linux）
brew install sst/tap/opencode

第二步：配置 AI 模型

运行配置命令：

opencode auth login

按提示选择 AI 提供商（Anthropic、OpenAI、Google 等），输入对应的 API Key。推荐使用 Claude 3.5 Sonnet，代码能力较强。

第三步：初始化项目

进入项目目录：

cd your-project
opencode

在界面中输入初始化命令 /init。OpenCode 会扫描项目，生成 AGENTS.md 文件记录项目信息，后续对话基于这个上下文进行。

适用人群

• 全栈开发者：支持前后端多种语言和框架。
• 独立开发者：快速实现复杂功能。
• 开源贡献者：理解陌生项目代码结构。
• 终端用户：习惯命令行工作流程。

技术实现与注意事项

从技术角度看，OpenCode 有几个设计亮点：Client/Server 分离支持远程控制；SQLite 管理会话持久化历史；插件化设计方便扩展；统一接口适配多个 AI 提供商。

使用注意

1. 需要支持 TUI 的现代终端，推荐 WezTerm、Alacritty、Kitty。
2. 使用第三方 AI 模型需付费，Claude Pro 订阅相对划算。
3. AI 生成的代码建议审查后再提交，特别是安全相关部分。

总结

OpenCode 把 AI 助手集成到终端环境，对习惯命令行工作的开发者来说更自然。它不会替代编程能力，但能让重复工作更高效。理解需求、设计架构、解决复杂问题仍需要人来完成，AI 是辅助工具。如果你是终端重度用户，或想尝试新的 AI 编码方式，可以试试 OpenCode。

A2UI 协议

概述

A2UI 是一种公开协议，允许 AI Agent 通过基于 JSON 格式的通信方式直接生成用户界面。与仅限于文本通信或使用不安全的 HTML/JavaScript 执行方法不同，智能体可以从已获批准的组件目录中进行混合搭配，开发出高级的用户界面。

关键创新点在于：智能体明确传达其用户界面需求；应用程序则使用其原生框架（如 React、Flutter、Angular、SwiftUI 等）来渲染该界面。

解决的问题

在多智能体协同的生态中，不同企业的智能体需要进行远程协作。传统解决方案存在诸多弊端：

• 纯文本交互界面：响应速度慢，交互效率低下。
• 沙盒 HTML/iframe：占用资源多，视觉风格不连贯、存在安全隐患。
• 直接 UI 操作：当智能体在远程服务器上运行时无法实现。

A2UI 开创了一种全新的交互模式，它所传输的界面既具备数据传输的安全性，又像代码一样富有表现力。

关键优势

1. 安全优先架构

   • 采用声明式数据格式，替代可执行代码的传输方式。
   • 智能体仅允许从值得信赖且已获批准的组件目录中选取组件。
   • 不存在代码注入风险，控制权仍完全掌握在客户手中。

2. LLM 友好型设计

   • 采用扁平化的组件结构，并通过 ID 实现组件间的关联引用。
   • 大型语言模型只能逐步生成内容，支持渐进式渲染和实时更新。
   • 智能体可以逐项流式传输界面内容。

3. 与框架无关的可移植性

   • 一份 JSON 数据有效适用于网页、移动设备和桌面设备。
   • 兼容市面上所有主流的用户界面开发框架。
   • 本地渲染确保了客户品牌体验的一致性。

4. 无缝协议集成能力

   • 与 A2A 协议兼容（智能体间通信协议）。
   • 可与 AG-UI（智能体 - 用户交互）协同工作。
   • 可以轻松接入现有的智能体基础设施。

工作原理

A2UI 的工作流程包括四个阶段：

1. 生成：智能体（Gemini 或其他 LLM）负责生成 JSON 格式的数据负载，详细说明 UI 元素及其属性。
2. 传输：JSON 格式的消息通过 A2A 协议、AG-UI 或 REST API 进行传输。
3. 解析：客户端的 A2UI 渲染器对 JSON 进行解析，验证结构和组件权限。
4. 渲染：将抽象组件转换为其各自的原生实现，例如'文本输入框'转换为 Material Design 或 Chakra UI 中的具体控件。

实践案例

任务一：智能预算追踪器

• 传统方式：用户询问花费，智能体返回文本列表，交互繁琐。
• A2UI 方式：用户输入交易数据和预算限额，智能体立即生成一个功能完整的仪表板。
  • 包含交互式滑块显示消费占比。
  • 可编辑的预算限额输入框。
  • 日期范围选择器和类别过滤器。
  • 展示消费趋势的分析模块。
  • 用户可直接与可视化组件交互，无需文字指令。

任务二：出租车预订系统

• 传统方式：多轮文本问答确认地点、时间、车型。
• A2UI 方式：用户输入要求，智能体生成高保真的单页面预订界面。
  • 规划模式：交互式地图、地址输入框、车型选择器（含价格和时间）、路线偏好切换。
  • 过渡逻辑：点击'确认预订'后，UI 平滑过渡为'实时跟踪模式'。
  • 跟踪模式：显示动态车辆位置、司机信息卡、倒计时器、一键通信按钮及 SOS 功能。

结论

Google A2UI 标志着 AI Agents 交互方式的重大转变。智能体能够生成安全、丰富且原生的用户界面，这将消除阻碍智能体广泛应用的障碍。无论是创建预算工具、预订系统、项目仪表板，还是催生全新类别的应用程序，A2UI 都将显著提升其技术的易用性和用户体验。