人工智能|大模型 —— 开发 —— opencode与agent skills的安装与使用

人工智能|大模型 —— 开发 —— opencode与agent skills的安装与使用

一、Skills下载源

常用的GitHub仓库:

1、https://github.com/anthropics/skills

2、https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
3、https://github.com/hesreallyhim/awesome-claude-code
4、https://github.com/ComposioHQ/awesome-claude-skills
Agent Skills市场:

Agent Skills 市场 - Claude、Codex 和 ChatGPT Skills | SkillsMP
Open Agent Skills Ecosystem:

The Agent Skills Directory
ClawHub:

ClawHub

二、Skills配置

2.1 手动下载存放

        OpenCode 会在特定路径下搜索 SKILL.md 文件。这些路径分为项目本地全局两种,方便我们将 Skill 应用于特定项目或是在所有项目中共享。

        项目本地路径允许我们将 Skill 与代码仓库绑定在一起,当其他开发者克隆项目后,也能立即使用这些为项目定制的 Skill。OpenCode 会从当前工作目录向上搜索,直到 Git 仓库的根目录,并加载所有符合以下模式的 Skill 文件:.opencode/skill/<skill-name>/SKILL.md.claude/skills/<skill-name>/SKILL.md

        全局路径则用于存放那些通用的、与具体项目无关的 Skill。这些 Skill 定义在用户的主目录下,对所有项目都可见:~/.config/opencode/skill/<skill-name>/SKILL.md~/.claude/skills/<skill-name>/SKILL.md~/.agents/skills/<skill-name>/SKILL.md

windows下全局路径实测下来为:C:\Users\用户名\.config\opencode\skills

2.2 下载安装

Agent Skills市场可以直接下载skill zip包,拖着zip包到skill命令行,执行帮安装,会默认安装到C:\Users\用户.config\opencode\skills

2.3 命令行安装

复制$ install --global模块的命令,在命令行中复制并执行命令即可

2.4 直接通过OpenCode安装

但是安装完成后,需要重启opencode,skill才会生效

三、opencode安装

        OpenCode 是一个开源的 AI 编程代理(AI coding agent),它可以作为终端界面、桌面应用或 IDE 扩展,在开发过程中提供协助。它的一大特点是模型无关性,允许连接来自不同供应商的多种 AI 模型,包括 Claude、GPT、Gemini 系列,甚至是本地部署的模型。

        与许多集成在特定编辑器或服务中的 AI 工具不同,OpenCode 强调开放性和灵活性。它拥有一个活跃的开源社区,在 GitHub 上获得了超过 6 万个星标,由数百名贡献者共同维护。这种开放性意味着开发者可以拥有更高的自主权,根据自己的需求选择最合适的 AI 模型,而不被锁定在单一的生态系统中。

3.1 准备工作

3.1.1 终端模拟器

可以使用系统终端,也可以使用其它终端,官方推荐的终端包括:WezTerm (跨平台)Alacritty (跨平台)Kitty (Linux 和 macOS)Ghostty (Linux 和 macOS)

这些终端对图形渲染和文本样式有更好的支持,能确保 OpenCode 的界面清晰、功能完整。

windows 11系统中实测下来,直接用powershell效果就可以,但是需要提前对老版本的powershell进行升级。

3.1.2 AI 模型 API 密钥

        OpenCode 本身是一个代理工具,它需要通过 API 连接到大型语言模型(LLM)才能工作。API 密钥(API Key)可以理解为访问这些模型服务的密码。因此,需要准备至少一个来自 LLM供应商的有效 API 密钥。

        对于初次接触的用户,OpenCode 提供了一个名为 Zen 的选项。它是由 OpenCode 团队筛选和基准测试过的一组模型,专为编程任务优化,可以提供稳定可靠的性能。当然,也可以选择连接自己的 Anthropic (Claude)、OpenAI (GPT) 或其他服务商的账户。

3.2 opencode安装

3.2.1 快速安装

对于 macOS 和 Linux 用户,最简单直接的安装方式是使用官方提供的一键安装脚本。在终端中执行以下命令即可:
curl -fsSL https://opencode.ai/install | bash 

这个命令会从 opencode.ai 下载安装脚本并自动执行。脚本会智能地选择合适的安装路径,优先级顺序如下:环境变量 $OPENCODE_INSTALL_DIR 指定的目录。符合 XDG 基础目录规范的 $XDG_BIN_DIR 目录 (如果存在)。标准的 $HOME/bin 目录 (如果存在)。默认的回退路径 $HOME/.opencode/bin

如果需要将 OpenCode 安装到特定位置,可以在执行命令前设置相应的环境变量。

3.2.2 使用包管理器安装

对于习惯使用包管理器的开发者,OpenCode 也提供了多种选择。
(1)macOS 与 Linux 安装
在 macOS 和 Linux 系统上,Homebrew 是一个非常流行的包管理器。OpenCode 提供了两种 Homebrew 安装方式,它们的更新频率有所不同。

推荐使用 OpenCode 官方维护的 tap,因为它总能获取到最新的版本:

brew install anomalyco/tap/opencode 

也可以使用 Homebrew 官方仓库中的配方,但它的更新可能会有延迟:

brew install opencode 

对于 Arch Linux 用户,可以通过 Paru 从 AUR 安装:

paru -S opencode-bin 
(2)Windows 安装
在 Windows 系统上,可以通过 Chocolatey 或 Scoop 这两个主流的包管理器进行安装。

使用 Chocolatey 的命令如下:

choco install opencode 

使用 Scoop 的安装命令则需要先添加 extras 存储桶:

scoop bucket add extras scoop install extras/opencode 
(3)跨平台 Node.js 包管理器
如果你的开发环境中已经安装了 Node.js,那么使用 npm 或其他 Node.js 包管理器进行全局安装是一种方便的跨平台选择。

使用 npm:(这里边可能涉及到powershell的更新

npm install -g opencode-ai 

使用 pnpm:

pnpm install -g opencode-ai 

使用 Bun:

bun install -g opencode-ai

3.2.3 检查是否安装成功

在powershell中输入 opencode --version 检查是否已安装

3.3 桌面应用的安装与使用

除了终端版本,OpenCode 还提供了一个处于测试(Beta)阶段的桌面应用程序。它为不习惯在终端中工作的开发者提供了图形化界面,功能与终端版本保持一致。

可以直接从 OpenCode 的官方网站或 GitHub 的 Releases 页面下载对应系统的安装包。

平台下载文件
macOS (Apple Silicon)opencode-desktop-darwin-aarch64.dmg
macOS (Intel)opencode-desktop-darwin-x64.dmg
Windowsopencode-desktop-windows-x64.exe
Linux.deb.rpm, 或 AppImage

对于 macOS 用户,同样可以使用 Homebrew Cask 来安装桌面版:

brew install --cask opencode-desktop 

下载并安装后,直接打开应用即可开始使用,后续的配置步骤与终端版类似。

windows系统下,个人感觉桌面应用并不好用,不如直接cmd操作便捷(个人建议,仅供参考)。

四、opencode配置

安装完成后,第一次运行 OpenCode 时需要进行一些基础配置,主要是连接 AI 模型。

4.1 大模型配置

在终端中进入一个项目目录,然后命令行输入opencode启动:
opencode 
启动后,会看到 OpenCode 的文本用户界面。此时,输入 /connect 命令并回车,它会弹出一个列表,让你选择要连接的 LLM 供应商。  
对于新用户,选择 opencode (即 OpenCode Zen) 是最简单的开始方式。

选择后,按照提示在浏览器中打开授权链接,登录并获取 API 密钥,然后将密钥粘贴回终端即可完成连接。  

连接成功后,还需要对当前项目进行初始化。在 OpenCode 界面中输入 /init 命令:

/init 

这个命令会让 OpenCode 分析当前项目的代码结构、依赖和编码风格,并在项目根目录下生成一个名为 AGENTS.md 的文件。这个文件存储了项目的上下文信息,能帮助 AI 代理更好地理解项目需求。建议将 AGENTS.md 文件提交到 Git 仓库中,以便团队成员共享和同步项目上下文。

此外,输入/models可以切换裸模型(基座模型)

4.2 基本用法

        完成初始化后,就可以开始与 OpenCode 交互了。OpenCode 内置了两个核心代理(Agent),可以通过按 Tab 键在它们之间切换。build: 这是默认的代理,拥有完整的开发权限,可以读取文件、写入代码以及执行命令。plan: 这是一个只读的代理,用于分析代码和规划任务。它默认会拒绝修改文件,并在执行命令前征求许可,非常适合在探索不熟悉的代码库或规划复杂功能时使用。

例如,可以向它提问来理解代码库的某个部分。在提问时,可以使用 @ 符号来模糊搜索并引用项目中的文件:

How is authentication handled in @packages/functions/src/api/index.ts 

OpenCode 会读取并分析你引用的文件内容,然后给出相应的解释。这种交互方式使得理解和修改代码变得更加高效。至此,OpenCode 的基本环境已经搭建完毕,可以开始探索它在实际开发工作中的更多应用了。

Read more

前端仔狂喜!我用这个开源神器,3分钟给项目配上API后台!

前端仔狂喜!我用这个开源神器,3分钟给项目配上API后台!

作为一名前端开发,我最怕听到的话就是:“这个页面内容需要后台可配”。这意味着无尽的沟通、漫长的等待,甚至还得自己去学写后端接口。最近,我终于找到了一个能将我从这种痛苦中解放出来的神器——Strapi。 什么是Strapi? Strapi 是一个开源的无头(Headless)CMS,GitHub上狂揽 60.5k Star。简单说,它能让你通过点击鼠标的可视化界面,快速创建出结构化的内容模型,并自动生成配套的 RESTful API 或 GraphQL。你不需要写一行后端代码,就能拥有一个功能强大的、可随时调用的数据后台。 传统部署的“噩梦” 想法很美好,但我尝试手动部署 Strapi 时,才发现这根本不是给前端玩的: * 环境依赖复杂:首先你得有个 Node.js 环境,还得配个正经的数据库,比如 PostgreSQL 或 MySQL,光是数据库的安装和配置就够我喝一壶的。 * 配置繁琐:你需要手动创建数据库、配置环境变量,

前端多版本零404部署实践:为什么会404,以及怎么彻底解决

这是一篇给“小白也能看懂”的实践文:讲清现象、根因、方案选择与我们的落地实现。 1. 现象:为什么发布新版本后会出现 404? 一个真实场景: * 10:00 用户打开了你的网页(加载的是 v1.0.4 的 HTML) * 10:10 你发布了 v1.0.5 * 用户没有刷新页面,继续点击某个功能 * 页面尝试按旧 HTML 里的地址加载某个 chunk:/assets/pages-about-about.DK5VADjQ.js * 服务器上只剩 v1.0.5 的文件,旧的被删了 → 直接 404 关键点: * HTML 决定了要加载哪些 JS/CSS(包含具体

企业级部署建议:Qwen3Guard-Gen-WEB权限控制设置

企业级部署建议:Qwen3Guard-Gen-WEB权限控制设置 在将Qwen3Guard-Gen-WEB这类高敏感度安全审核模型投入生产环境前,一个常被低估却至关重要的环节是——权限控制体系的构建。它不是锦上添花的附加配置,而是决定模型能否合规、可控、可持续运行的生命线。Qwen3Guard-Gen-WEB作为阿里开源的生成式安全审核模型,其核心能力在于对文本内容进行三级风险判定(安全/有争议/不安全)并输出可解释依据。但若缺乏严谨的访问控制,这一能力反而可能成为风险源:未授权人员误用导致误判扩散、恶意调用耗尽资源、敏感审核日志外泄引发合规危机……本文不讲模型原理,也不演示基础推理,而是聚焦于企业真实落地中最易踩坑、最需前置规划的环节——如何为Qwen3Guard-Gen-WEB构建一套稳健、可审计、符合等保与GDPR精神的权限控制机制。 1. 为什么Web界面更需要权限控制?——从便利性到风险敞口 Qwen3Guard-Gen-WEB的“一键启动+网页操作”设计极大降低了使用门槛,但恰恰是这种便利性,放大了权限失控的后果。我们来对比两种典型场景: * 无权限控制状态:1

【降低 30% 开发成本:使用 Trae IDE 将 Figma 设计稿转化为前端代码】

【降低 30% 开发成本:使用 Trae IDE 将 Figma 设计稿转化为前端代码】

降低 30% 开发成本:使用 Trae IDE 将 Figma 设计稿转化为前端代码_ide_葡萄城技术团队-葡萄城开发者空间 TRAE与Figma MCP:iOS原生应用UI自动生成的艺术-易源AI资讯 | 万维易源 Login | Figma 基于提供的Figma设计文件和网页链接,开发一个完整的前端网站项目。具体要求如下: 1. 页面展示要求: * 采用平铺式布局展示所有页面 * 严格遵循Figma设计稿中的视觉规范 * 实现IOS风格的高保真原型效果 * 确保所有交互元素与设计稿一致 2. 技术实现要求: * 使用现代前端框架(如React/Vue) * 实现响应式布局,适配不同设备 * 添加平滑的页面过渡动画 * 确保所有UI组件的高还原度 3. 交付物要求: * 完整的可运行前端代码 * 详细的部署文档 * 跨浏览器兼容性测试报告 * 性能优化方案 4. 质量标准: * 像素级还原设计稿 * 所有交互功能完整可用 * 代码符合最佳实践