步骤一：安装 Claude Code
npm install -g @anthropic-ai/claude-code 
运行如下命令，查看安装结果，若显示版本号则表示安装成功
claude --version 
# 进入命令行界面，执行如下运行 Coding Tool Helper npx @z_ai/coding-helper 
 
  
    
    
 
      
    
 
  
    
    
 
      
    
 
  
    
    
 
      
    
 
  
    
    
 
     
✅ 跨平台支持：适配 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 :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 允许你将这些专业知识封装成可复用的技能包：



 
    
每次对话都需要说明：
 
  
    
    
 
     
“请按照我们公司的品牌指南创建文档”
 
     
“使用我们的数据分析流程处理数据”
 
     
“遵循特定的代码审查标准”
 
    
一次定义，多次使用：
 
  
    
    
 
     
创建 “company-branding” Skill
 
     
创建 “data-analysis-workflow” Skill
 
     
创建 “code-review-standards” Skill
 
    
 
  
    
    
 
     
一致性保证
通过 Skills，可以确保 Claude 在处理相同类型任务时遵循统一的标准和流程，这对企业应用尤为重要：



 
    
 
  
    
    
 
     
品牌一致性：文档生成遵循统一的品牌规范
 
     
流程标准化：数据分析使用组织特定的工作流
 
     
质量控制：代码审查符合团队的编码标准
 
    
 
  
    
    
 
     
能力扩展
Skills 让 Claude 能够处理原本不擅长的专业任务，如：



 
    
 
  
    
    
 
     
创建和编辑 Office 文档（DOCX、PPTX、XLSX）
 
     
处理 PDF 文件
 
     
执行企业特定的业务流程
 
     
遵循特定领域的**实践
 
    
 
  
    
    
 
     
知识隔离与安全
不同的技能可以独立管理和版本控制，避免了将所有指令混在一起导致的混乱，同时也便于权限管理和审计。



 
    
选择 Skills 的场景：
 
  
    
    
 
     
文档生成与格式化 - 按照公司品牌指南生成文档 - 标准化的数据报告生成 - 示例：生成符合 IEEE 格式的学术论文
 
     
业务流程自动化 - CRM 数据汇总 - 项目提案草拟 - 示例：每周自动生成销售报告
 
     
本地数据分析 - 数据清洗和转换 - 统计分析和可视化 - 示例：分析本地 CSV 文件并生成洞察
 
     
代码审查和重构 - 按照团队编码规范检查代码 - 生成符合**实践的代码 - 示例：检查 Python 代码是否符合 PEP 8
 
    
选择 MCP Tools 的场景：
 
  
    
    
 
     
实时数据获取 - 查询数据库当前状态 - 获取 API 的最新响应 - 示例：检查 GitHub 仓库的 CI/CD 状态
 
     
多系统编排 - 跨系统的数据同步 - 复杂的业务流程集成 - 示例：从库存系统查询，更新到订单系统
 
     
遗留系统集成 - 连接没有现代 API 的老系统 - 统一访问接口 - 示例：通过 MCP 访问内部 ERP 系统
 
    
 
  
    
    
 
      
    
 
  
    
    
 
     
原生终端界面，响应快，支持自定义主题
 
     
支持 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 
opencode auth login 
cd your-project opencode 
在界面中输入初始化命令：
/init 
 
  
    
    
 
      
    
 
  
    
    
 
      
    
适用人群
 
  
    
    
 
     
全栈开发者：支持前后端多种语言和框架
 
     
独立开发者：快速实现复杂功能
 
     
开源贡献者：理解陌生项目代码结构
 
     
终端用户：习惯命令行工作流程
 
    
 
  
    
    
 
     
 
      
Client/Server 分离，支持远程控制
 
      
SQLite 管理会话，持久化对话历史
 
      
插件化设计，方便扩展功能
 
      
统一接口适配多个 AI 提供商
 
     
 
     
 
      
使用注意事项
 
      
 
       
需要支持 TUI 的现代终端，推荐 WezTerm、Alacritty、Kitty
 
       
使用第三方 AI 模型需付费，Claude Pro 订阅相对划算
 
       
AI 生成的代码建议审查后再提交，特别是安全相关部分
 
      
 
      
 
       
 
        
纯文本交互界面——响应速度慢，交互效率低下
 
        
沙盒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）。
·采用悬浮式操作面板承载输入功能，以最大化地图可见区域。”
输出：
[图片]