前端 AI 工具实践

Claude Code 前端使用

步骤一：安装 Claude Code

npm install -g @anthropic-ai/claude-code 

运行如下命令，查看安装结果，若显示版本号则表示安装成功

claude --version 

步骤二：配置 Claude Code+GLM 智谱大模型 (免费)

Coding Tool Helper 是一个编码工具助手，安装并运行它，按照界面提示操作即可自动完成工具安装，套餐配置，MCP 服务器管理等。

# 进入命令行界面，执行如下运行 Coding Tool Helper npx @z_ai/coding-helper 

步骤三：开始使用 Claude Code

VS Code 安装 Claude Code 插件

Claude Code CLI(到指定项目目录打开 CLI)

Claude Skills 前端使用

Anthropic 的 Agent Skills 提供了一套优雅的专业技能管理方案，但最初它是 Claude 专属特性。随着社区的发展，现在有多种方案让其他 AI 编程工具（Cursor、Windsurf、Aider 等）也能使用 Skills，甚至在 LangChain、LlamaIndex 等框架中实现类似的 Skills 模式。

OpenSkills

OpenSkills 是一个由社区开发的通用 Skills 加载器，可以将 Anthropic 的 Skills 系统带给所有 AI 编程工具。

核心特性

• ✅ 跨平台支持：适配 Claude Code、Cursor、Windsurf、Aider 等主流 AI 编程工具
• ✅ 零配置使用：通过 AGENTS.md 格式自动同步 Skills 元数据
• ✅ 兼容官方 Skills：可以直接使用 Anthropic 官方 Skills 仓库
• ✅ 多源管理：支持本地路径、Git 仓库、符号链接等多种 Skills 来源
• ✅ CI/CD 友好：支持 headless 模式，可集成到自动化流程

快速开始

1. 安装 OpenSkills

# 全局安装 OpenSkills npm install -g openskills # 验证安装 openskills --version 

2. 初始化项目

# 在项目目录中初始化 cd your-project openskills init # 这会创建： # - .openskills/ 目录（存储 Skills） # - AGENTS.md 文件（Skills 元数据） 

3. 安装 Skills

# 从 Anthropic 官方仓库安装预构建 Skills openskills install anthropic-agent-skills/document-skills # 从本地路径安装自定义 Skill openskills install ./my-custom-skill # 从私有 Git 仓库安装 openskills install [email protected]:yourorg/private-skills.git # 使用符号链接（便于开发调试） openskills install --symlink ../my-skill-in-development 

4. 同步 Skills 到 AGENTS.md

# 同步所有已安装的 Skills openskills sync # 自定义输出文件 openskills sync --output .claude/instructions.md # headless 模式（适合 CI/CD） openskills sync --yes 

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

1. 可复用的专业知识 传统方式下，每次需要 Claude 完成特定任务时，都需要在 Prompt 中重复说明细节。而 Skills 允许你将这些专业知识封装成可复用的技能包：

   场景对比

   传统方式 每次对话都需要说明：

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

   使用 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 系统
4. 外部服务调用 - 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 都将显著提升其技术的易用性和用户体验。