前端 AI 工具实践：Claude Code、OpenSkills 与 A2UI

场景对比

传统方式

每次对话都需要说明：

• '请按照我们公司的品牌指南创建文档'
• '使用我们的数据分析流程处理数据'
• '遵循特定的代码审查标准'

使用 Skills

一次定义，多次使用：

• 创建'company-branding'Skill
• 创建'data-analysis-workflow'Skill
• 创建'code-review-standards'Skill

2. 一致性保证
   通过 Skills，可以确保 Claude 在处理相同类型任务时遵循统一的标准和流程，这对企业应用尤为重要：

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

3. 能力扩展
   Skills 让 Claude 能够处理原本不擅长的专业任务，如：

• 创建和编辑 Office 文档（DOCX、PPTX、XLSX）
• 处理 PDF 文件
• 执行企业特定的业务流程
• 遵循特定领域的最佳实践

4. 知识隔离与安全
   不同的技能可以独立管理和版本控制，避免了将所有指令混在一起导致的混乱，同时也便于权限管理和审计。

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

Anthropic 生态中还有另一个重要概念——MCP（Model Context Protocol），它与 Skills 的定位和使用场景有明显区别。
核心定位差异
Skills（技能）： - 封装领域知识和操作流程 - 回答"如何做"的问题（How） - 主要通过 Markdown 指令 + 本地代码实现 - 适合静态、可重复的专业知识
Tools/MCP（工具）： - 连接外部系统和实时数据 - 回答"从哪获取"的问题（Where） - 通过客户端 - 服务器协议实现 - 适合动态、需要外部交互的任务

优劣势分析
Skills 的优势： - ✅ 极低的 Token 成本：未激活时几乎不占空间 - ✅ 简单易用：Markdown + YAML，学习成本低 - ✅ 自动激活：Claude 自动判断何时使用 - ✅ 多技能并存：可同时安装大量 Skills 而不影响性能 - ✅ 版本管理友好：纯文本文件，Git 友好
Skills 的局限： - ❌ 无法访问实时数据：环境限制无网络访问 - ❌ 生态封闭：目前仅 Claude 支持 - ❌ 静态知识：知识更新需手动修改文件 - ❌ 包依赖限制：只能使用预装的 Python 包
MCP Tools 的优势： - ✅ 强大的扩展性：可连接任意外部系统（数据库、API、第三方服务） - ✅ 开放标准：不绑定特定 LLM，生态更开放 - ✅ 实时性：访问最新数据（GitHub 状态、CI/CD 结果等） - ✅ 社区生态：大量社区开发的 MCP 服务器
MCP Tools 的局限： - ❌ 高 Token 成本：工具定义可消耗数万 tokens - ❌ 配置复杂：需要运行服务器、管理配置 - ❌ 学习曲线陡峭：规范复杂，开发门槛高 - ❌ 性能开销：网络调用带来延迟
使用场景指南

选择 Skills 的场景：

1. 文档生成与格式化 - 按照公司品牌指南生成文档 - 标准化的数据报告生成 - 示例：生成符合 IEEE 格式的学术论文
2. 业务流程自动化 - CRM 数据汇总 - 项目提案草拟 - 示例：每周自动生成销售报告
3. 本地数据分析 - 数据清洗和转换 - 统计分析和可视化 - 示例：分析本地 CSV 文件并生成洞察
4. 代码审查和重构 - 按照团队编码规范检查代码 - 生成符合最佳实践的代码 - 示例：检查 Python 代码是否符合 PEP 8

选择 MCP Tools 的场景：

1. 实时数据获取 - 查询数据库当前状态 - 获取 API 的最新响应 - 示例：检查 GitHub 仓库的 CI/CD 状态
2. 多系统编排 - 跨系统的数据同步 - 复杂的业务流程集成 - 示例：从库存系统查询，更新到订单系统
3. 遗留系统集成 - 连接没有现代 API 的老系统 - 统一访问接口 - 示例：通过 MCP 访问内部 ERP 系统 外部服务调用 - Slack 消息发送 - 日历事件创建 - 示例：自动将会议纪要同步到 Google Calendar
   Skills 技能实践

[图片]

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 有几个设计亮点：

1. Client/Server 分离，支持远程控制
2. SQLite 管理会话，持久化对话历史
3. 插件化设计，方便扩展功能
4. 统一接口适配多个 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 等）来渲染该界面。
A2UI 解决的问题
在多智能体协同的生态中，不同企业的智能体需要进行远程协作。传统解决方案存在诸多弊端：

• 纯文本交互界面——响应速度慢，交互效率低下
• 沙盒 HTML/iframe——占用资源多，视觉风格不连贯、存在安全隐患
• 直接 UI 操作——当智能体在远程服务器上运行时无法实现
  A2UI 开创了一种全新的交互模式，它所传输的界面既具备数据传输的安全性，又像代码一样富有表现力。
  以下是 A2UI 的一些关键优势：
  1.安全优先架构
  •采用声明式数据格式，替代可执行代码的传输方式
  •智能体仅允许从值得信赖且已获批准的组件目录中选取组件
  •不存在代码注入风险，控制权仍完全掌握在客户手中
  2.LLM 友好型设计
  •采用扁平化的组件结构，并通过 ID 实现组件间的关联引用
  •大型语言模型只能逐步生成内容，无法一次性生成其他内容
  •支持渐进式渲染和实时更新
  •智能体可以逐项流式传输界面内容
  3.与框架无关的可移植性
  •一份 JSON 数据有效适用于网页、移动设备和桌面设备
  •兼容市面上所有主流的用户界面开发框架
  •本地渲染确保了客户品牌体验的一致性
  •无需针对任何平台编写特定代码
  4.无缝协议集成能力
  •与 A2A 协议兼容（智能体间通信协议）
  •可与 AG-UI（智能体 - 用户交互）协同工作
  •可以轻松接入现有的智能体基础设施
  A2UI 的工作原理
  A2UI 的工作流程包括四个阶段：
  1.阶段 1：生成
  •智能体（Gemini 或其他 LLM））负责生成 JSON 格式的数据负载。
  •详细说明 UI 元素及其相应的属性。
  •可以从头开始创建 UI 元素，也可以填充现有模板。
  2.阶段 2：传输
  •JSON 格式的消息通过 A2A 协议、AG-UI 或 REST API 进行传输。
  •通信方式不受特定协议的限制，可使用任何通信渠道。
  3.阶段 3：解析
  •客户端的 A2UI 渲染器对 JSON 进行解析。
  •验证结构和组件权限。
  •确保所有组件均来自可信目录。
  4.阶段 4：渲染
  •将抽象组件转换为其各自的原生实现。
  •例如，'文本输入框'会对应转换为 Material Design、Chakra UI 或其他框架中的具体输入控件。
  •使用客户端现有的 UI 框架进行渲染。
  安全优势：客户端仅能看到和运行预先批准的组件，不存在不确定的代码执行风险。
  [图片] [图片] 如何使用 A2UI
  可以通过两种方式访问 A2UI：
  1.通过直接的网络界面访问
  可以通过 https://a2ui-composer.ag-ui.com/登录，登录后只需向智能体输入提示，即可获得输出。
  2.通过代码库访问
  复制代码库 https://github.com/google/A2UI，运行快速启动演示程序。用户可以看到基于 Gemini 的智能体实时生成界面，并且可以根据自身需求轻松定制组件。
  实践任务一：智能预算追踪器
  传统方式（文本交互）
  用户：'我这个月花了多少钱？'
  智能体：'您在食品方面花费了 1234 美元，在外出就餐上花费了 567 美元……'
  用户：'哪个类别超出了预算？'
  智能体：'外出就餐实际支出为 567 美元，超出预算限额 67 美元。'
  用户：'给我一份详细报告。'
  使用 A2UI：
  提示：
  '我提供以下交易数据，请根据这些数据生成一个智能预算追踪器仪表板。数据如下：
  12 月 1 日：200 美元（食品）
  12 月 1 日：300 美元（服装）
  12 月 2 日：500 美元（出行）
  预算限额：为每个消费类别设置默认限额 400 美元。'
  输出：
  [图片] 智能体立即生成一个功能完整的仪表板，包含以下组件：
  •显示各种消费占比的交互式滑块。
  •搭配嵌入式文本输入框的可编辑预算限额。
  •支持比较不同时间段消费情况的日期范围选择器。
  •具有切换开关的类别过滤器。
  •展示消费习惯变化趋势的分析模块。
  •无需输入文字指令，用户可直接与可视化组件交互。
  用户只需拖动滑块调整预算额度、勾选复选框筛选消费类别，并通过点击鼠标即可获取详细信息。
  实践任务二：出租车预订系统
  传统方法（基于文本）：
  用户：'我要预订一辆出租车。'
  智能体：'您在哪里？'
  用户：'我在主街 123 号。'
  智能体：'您想去哪里？'
  用户：'我想去橡树大道 456 号。'
  智能体：'您什么时候乘坐？'
  用户：'越快越好。'
  智能体：'您喜欢哪种车型？'
  使用 A2UI：
  提示：
  '根据以下要求生成高保真的单页面出租车预订界面：
  1.预订阶段（规划模式）
  –交互式地图：渲染一张地图，包含可拖动的'上车地点'标记（默认定位当前位置）和'目的地'标记，并显示规划的行驶路线。
  –地址输入框：两个带自动填充功能的文本输入框（上车点/目的地）。默认目的地设为'橡树大道 456 号'。
  –车型选择器：横向排列的车型选项列表（经济型、高端型、加大型），每个选项需展示：
  ·实时预估价格
  ·预计到达时间（例如：'3 分钟车程'）
  ·高清车型图标
  –偏好配置：
  ·'最短 vs.最快'路线切换按钮。
  ·'已保存地点'列表（家、公司、健身房），支持一键选择
  ·时间选择器，默认为'现在'。
  ·费用估算器：动态展示基础车费与税费总和的摘要
  2.过渡逻辑（'确认预订'操作）
  当用户点击'确认预订'时，不清除当前页面内容，将现有 UI 过渡为'实时跟踪模式'。.
  3.实时跟踪阶段（活动模式）
  –地图更新：显示动态移动的车辆图标，实时反映司机位置。
  –抵达信息卡：使用'司机信息卡'替换车辆选择器，包括以下内容：
  ·司机姓名、评分和车牌号。
  ·实时倒计时器（例如：'预计 2 分 14 秒后到达'）。
  ·通信功能：添加两个一键操作按钮：[联系司机] 和 [发送消息]。
  ·紧急求助：设置醒目的'SOS'按钮。
  4.设计风格
  ·以地图为中心的简洁布局（类似 Uber/Lyft）。
  ·采用悬浮式操作面板承载输入功能，以最大化地图可见区域。'
  输出：
  [图片] 智能体提供了一个单屏的预订界面，其中包括：
  •交互式地图，显示目的地和上车地点
  •支持自动填充和地理定位的地址输入框
  •默认为立即预订的时间选择器
  •显示实时价格和预计到达时间的车辆选项
  •为常用目的地保存的地点
  •路线偏好切换（最短 vs.最快）
  •随参数调整的费用估算滑块
  一旦确认预订，这个界面将更新为：
  •车辆位置的实时追踪
  •预计到达时间倒计时
  •司机和车辆信息
  •一键通信按钮

结论

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