前端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

全局安装 OpenSkills

npm install -g openskills

验证安装

openskills --version
初始化项目

在项目目录中初始化

cd your-project
openskills init

这会创建：

- .openskills/ 目录（存储 Skills）

- AGENTS.md 文件（Skills 元数据）
安装 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 到 AGENTS.md

同步所有已安装的 Skills

openskills sync

自定义输出文件

openskills sync --output .claude/instructions.md

headless 模式（适合 CI/CD）

openskills sync --yes

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

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

场景对比

传统方式

每次对话都需要说明：

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

使用 Skills

一次定义，多次使用：

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

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

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

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

创建和编辑 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 的场景：

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

选择 MCP Tools 的场景：

实时数据获取 - 查询数据库当前状态 - 获取 API 的最新响应 - 示例：检查 GitHub 仓库的 CI/CD 状态
多系统编排 - 跨系统的数据同步 - 复杂的业务流程集成 - 示例：从库存系统查询，更新到订单系统
遗留系统集成 - 连接没有现代 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体系化课程，含：机器学习、深度学习、NLP、图像、大模型与推荐系统等

按提示选择 AI 提供商（Anthropic、OpenAI、Google 等），输入对应的 API Key。

推荐使用 Claude 3.5 Sonnet，代码能力较强。

第三步：初始化项目

进入项目目录：

复制代码

cd your-project
opencode

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

复制代码

/init

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

适用人群

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

技术实现

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

Client/Server 分离，支持远程控制
SQLite 管理会话，持久化对话历史
插件化设计，方便扩展功能
统一接口适配多个 AI 提供商

使用注意事项

需要支持 TUI 的现代终端，推荐 WezTerm、Alacritty、Kitty
使用第三方 AI 模型需付费，Claude Pro 订阅相对划算
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都将显著提升其技术的易用性和用户体验。

未完待续...

前端AI工具实践

Claude Code前端使用

Claude Skills前端使用

全局安装 OpenSkills

验证安装

在项目目录中初始化

这会创建：

- .openskills/ 目录（存储 Skills）

- AGENTS.md 文件（Skills 元数据）

从 Anthropic 官方仓库安装预构建 Skills

从本地路径安装自定义 Skill

从私有 Git 仓库安装

使用符号链接（便于开发调试）

同步所有已安装的 Skills

自定义输出文件

headless 模式（适合 CI/CD）

场景对比

传统方式

使用 Skills

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

OpenCode前端使用

A2UI协议

结论