OpenCode + Skills 快速上手指南：让 AI 编程助手真正替你做事

引言

如果你用 AI 写代码，但每次都需要手把手教它怎么做——告诉它用什么框架、怎么配环境、用什么组件——那你可能用错了工具。

OpenCode 是 2026 年最热门的开源 AI 编程助手，它的特点是：开源、可扩展、Skills 生态丰富。结合 Skills，OpenCode 能做的事远不止"写代码"——它能直接帮你搭建完整项目、配好环境、生成 UI、甚至做视频。

本文是快速上手指南，手把手教你安装 OpenCode 并使用 Skills。

一、OpenCode 是什么？

1.1 先搞清楚名字

OpenCode 是一个开源的 AI 编程代理（AI coding agent），类似 Claude Code 或 Cursor Agent，但完全开源。

它的核心能力：

• 在终端、桌面应用或主流 IDE（如 VS Code）中运行
• 理解整个代码库，不只是单个文件
• 帮你写新功能、重构代码、修复 Bug
• 通过 Skills 扩展能力边界

1.2 OpenCode vs 其他工具

1.3 为什么 2026 年用 OpenCode？

2026年4月，Anthropic 宣布封锁第三方 harness（包括 OpenCode）的 API 访问。这意味着依赖官方 Claude API 的第三方工具面临重大挑战。

但 OpenCode 的优势反而更明显了：

• 完全开源，不受平台政策影响
• 支持 15+ 模型供应商（Anthropic、OpenAI、Google、Ollama、OpenRouter、Azure、Bedrock……）
• 不强制上传代码，隐私有保障
• Skills 生态完全开放

二、安装 OpenCode

2.1 前置要求

• Node.js 18+（需要 npx）
• 支持的模型 API Key（OpenAI、Anthropic、Google 等任选一个）

2.2 安装步骤

方式一：npm 一键安装（推荐）

npx opencode@latest

方式二：通过 GitHub 安装

# 克隆仓库
git clone https://github.com/opencode-ai/opencode.git
cd opencode

# 安装依赖
npm install

# 启动
npx opencode

方式三：VS Code 扩展

在 VS Code 扩展商店搜索 "OpenCode"，安装官方扩展，即可在 VS Code 内直接使用。

2.3 首次配置

启动后，OpenCode 会引导你配置 API Key：

# 设置 API Key（以 OpenAI 为例）
export OPENAI_API_KEY=sk-xxxx

# 或者使用 Anthropic
export ANTHROPIC_API_KEY=sk-ant-xxxx

# 也可以通过界面配置多供应商

OpenCode 支持同时配置多个模型供应商，可以根据任务类型自动切换最优模型。

2.4 快速验证

安装完成后，运行：

opencode --version
# 或
npx opencode --version

看到版本号即安装成功。

三、Skills 是什么？能做什么？

3.1 OpenCode Skills 的定位

Skills 是 OpenCode 的扩展包，每个 Skill 包含：

• 特定领域的专业知识和规则
• 预配置的 prompt 模板
• 相关的工具链集成

类比一下：OpenCode 就像一部智能手机，Skills 就是 App。装了什么 App，就能做什么事。

3.2 Skills 能做什么？

举几个实际例子：

🎨 ui-ux-pro-max：专业 UI/UX 设计 Skill，AI 自动推荐配色、组件、布局方案

🎬 remotion-best-practices：React 视频生成 Skill，用代码写视频动画

🔍 代码搜索 Skill：快速理解陌生代码库的结构

📊 数据可视化 Skill：自动生成图表和可视化方案

🌐 前端全栈 Skill：从设计稿直接生成可运行的前端代码

3.3 Skills 生态在哪找？

主流 Skills 市场：

• https://skills.sh/ —— 最完整的 OpenCode Skills 商店
• GitHub —— 社区开发的开源 Skills
• OpenCode 官方文档 —— 推荐 Skills 列表

四、安装和使用 Skills（详细步骤）

4.1 安装 Skills 的基本命令

npx skills add <owner/repo>

这是从 skills.sh 安装的标准格式。

4.2 实例一：安装 ui-ux-pro-max（UI 设计 Skill）

这个 Skill 做什么： 提供专业级 UI/UX 设计知识，AI 自动推荐界面风格、配色方案、组件实现方式。

安装步骤：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

安装过程中：

1. 选择你需要的开发环境（OpenCode、Claude Code、Cursor、Windsurf 等）
2. 选择安装位置（当前项目目录 / 全局）
3. 确认，一路回车

使用方式：

opencode

启动后输入 /ui 可以看到已安装的 Skills 列表。

然后输入你的需求，比如：

为宠物美容服务搭建一个着陆页，风格活泼亲和，并设置预约类行动召唤按钮。

AI 自动调用 ui-ux-pro-max Skill，设计方案并生成完整代码。

效果对比： 没有 Skill 时，AI 只能生成基础 HTML；有 Skill 后，AI 理解设计规范，生成专业级 UI 方案，包含动画、响应式布局、无障碍访问等。

4.3 实例二：安装 remotion-best-practices（视频生成 Skill）

这个 Skill 做什么： 专门为 Remotion（用 React 生成视频的开源库）设计的最佳实践 Skill，包含 3D 动画、字幕同步、媒体导入等数十个规则文件。

安装步骤：

先创建一个项目目录：

mkdir my-video-project
cd my-video-project

# 在项目目录下安装 Skill
npx skills add remotion-dev/skills

安装过程中选择 OpenCode 环境，确认即可。

使用方式：

在 OpenCode 中输入：

生成一个 Hello Runoob！的演示视频

AI 找到 remotion Skill，自动调用 Remotion 框架，生成包含动画、字幕、过渡效果的视频代码。

4.4 实例三：从 skills.sh 安装任意 Skill

第一步：在 https://skills.sh/ 找到想要的 Skill

比如搜索 "React best practices"：

第二步：复制安装命令

skills.sh 上每个 Skill 页面都有安装命令，直接复制即可：

npx skills add <owner/repo>

第三步：项目中启用

在项目目录下运行安装命令，OpenCode 会自动识别。

4.5 管理已安装的 Skills

# 查看已安装的 Skills
npx skills list

# 更新某个 Skill
npx skills update <owner/repo>

# 卸载 Skill
npx skills remove <owner/repo>

五、OpenCode + Skills 的进阶用法

5.1 多 Skill 组合使用

OpenCode 支持同时启用多个 Skills，你可以组合使用：

用 ui-ux-pro-max 设计页面 → 用 remotion-best-practices 生成推广视频 → 用前端 Skill 对接 API

整个流程由 AI 自动串联，你只需说最终目标。

5.2 自定义 Skill

如果你有特定领域的专业知识，可以自己做 Skill：

npx skills create

按向导创建 Skill 目录结构，编写 SKILL.md 和相关规则文件，然后发布到 GitHub 或提交到 skills.sh。

5.3 企业场景：团队共享 Skill

企业可以将内部的开发规范、设计系统、API 文档打包成私有 Skill：

1. 将 Skill 存储在内部 Git 仓库
2. 团队成员通过 npx skills add <内部仓库地址> 安装
3. 所有项目保持一致的 AI 输出标准

六、常见问题

Q1：安装 Skills 需要花钱吗？

不需要。 Skills 本身免费，但你需要有一个模型 API Key（OpenAI/Anthropic/Google 等），按用量付费。

Q2：Skills 装在哪里？

两个选择：

• 项目级：装在当前项目目录下，仅该项目可用
• 全局级：装在用户目录，所有项目都能用

建议：通用 Skills（如代码规范、设计原则）全局安装；项目特定 Skills（如特定框架的最佳实践）项目级安装。

Q3：Skills 影响模型调用次数吗？

会。 Skill 的规则文件和 prompt 会占用 context 窗口，复杂的 Skill 会消耗更多 token。但这是值得的——它让你的输出质量大幅提升。

Q4：Skill 和 MCP 有什么区别？

简单说：MCP 让 AI 能做事，Skill 让 AI 做事更专业。

Q5：遇到问题怎么办？

• GitHub Issues：https://github.com/opencode-ai/opencode
• skills.sh 社区：https://skills.sh/discuss
• 官方 Discord：OpenCode 官方社区有活跃的讨论频道

七、实战项目：用 OpenCode + Skills 做一个落地页

完整演示步骤：

# 1. 创建项目
mkdir landing-page && cd landing-page

# 2. 安装 UI 设计 Skill
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

# 3. 启动 OpenCode
opencode

# 4. 输入需求
# /ui
# 为 AI 初创公司创建一个着陆页，包含：
# - Hero 区域（标题 + 副标题 + CTA 按钮）
# - 功能介绍（3 列卡片）
# - 定价表格
# - 底部 Footer
# 风格：科技感、深色主题、渐变按钮

# 5. AI 自动完成：
# - 调用 ui-ux-pro-max Skill
# - 设计配色方案和布局
# - 生成完整 HTML/CSS/JS 代码
# - 确保响应式和可访问性

整个过程你只需要说"做什么"，OpenCode + Skill 自动搞定"怎么做"。

总结

OpenCode + Skills = 可扩展的 AI 编程助手

• OpenCode 本身：免费、开源、多模型支持的编程 Agent
• Skills 扩展：按需安装专业能力包，从"会写代码"到"专业级输出"
• 生态丰富：skills.sh 上有数百个现成 Skills，社区持续贡献

下一步行动清单：

1. ✅ 安装 OpenCode（npx opencode@latest）
2. ✅ 去 https://skills.sh/ 看看有哪些 Skills
3. ✅ 选一个装上试试（建议从 ui-ux-pro-max 开始）
4. ✅ 用它做一个真实项目

参考资料：OpenCode 官方 GitHub、skills.sh、菜鸟教程、GitHub opencode-ai 仓库、 popularaitools.ai

标签：#OpenCode #AI编程 #Skills #效率工具 #开源