前端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
VSCODE安装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 模式，可集成到自动化流程
  快速开始

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

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

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

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

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

场景对比

传统方式

每次对话都需要说明：

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

使用 Skills

一次定义，多次使用：

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

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

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

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 的场景：

选择 MCP Tools 的场景：

外部服务调用 – 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体系化课程，含：机器学习、深度学习、NLP、图像、大模型与推荐系统等
按提示选择 AI 提供商（Anthropic、OpenAI、Google 等），输入对应的 API Key。
推荐使用 Claude 3.5 Sonnet，代码能力较强。
第三步：初始化项目
进入项目目录：

cd your-project
opencode

在界面中输入初始化命令：

/init

OpenCode 会扫描项目，生成 AGENTS.md 文件记录项目信息，后续对话基于这个上下文进行。

适用人群

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

技术实现
从技术角度看，OpenCode 有几个设计亮点：

使用注意事项

总结
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都将显著提升其技术的易用性和用户体验。
未完待续…