Skip to content

OpenCode skills 使用

在之前的内容,我们已经了解了 OpenCode 和 skills,如果还没阅读,可以参阅:

接下来我们将将介绍如何在 OpenCode 中使用 skills。

现在市面上已经有很多现成的 skills,我么可以直接拿来使用,我们可以在 https://skills.sh/ 查找更多的 skill。

安装方式:

bash
npx skills add <owner/repo>

**注:**如果对 npx 不了解,可以参阅:npx 入门教程


ui-ux-pro-max

接下来我们使用 ui-ux-pro-max 这个 skill 演示,地址:https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max

UI/UX Pro Max 是一个 AI 设计智能技能(AI Skill),为构建专业级 用户界面(UI)和用户体验(UX) 提供结构化设计知识和自动化辅助,主要用于与 AI 编码助手集成(例如 Claude Code、Cursor、Windsurf 等)。

UI/UX Pro Max 包含一个可搜索的设计数据库,可根据自然语言提示智能推荐界面风格、配色、排版与组件实现方式。

安装命令:

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

安装过程,可以勾选我们需要的环境,比如 OpenCode:

7345bb6f-82e9-4228-8772-70e22b53c9f1.png

接下来这里选择当前目录也就是我们之前创建的 opencode-runoob-test,另一个选项 Global 是全局安装:

07e6ffab-eed0-47ef-83e1-8cf1cbd37ce7.png

接下来一路回车就好了。

使用 opencode 命令打开 OpenCode,输入 /ui 就可以看到安装的 skill:

94078c59-8f03-486c-9247-c61ff90de3d8.png

接下来我们就可以直接输入需求:

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

AI 会自动调用我们安装的 skill 来设计,一路回车就好了:

6740cb33-2d26-4475-b825-df49a97417b9.png

接下来自动生成目录与文件:

b27e2a0f-910d-4012-8d8e-0294dbf69bdf.png

然后查看最终效果,好看很多:

a9d18e1c-ae82-4dfa-bb9f-f7fe30a01cb7-scaled.png


remotion-best-practices

接下来使用 remotion-best-practices 这个 skill 来演示。

  • Opencode:一个负责让 AI 写代码自动化流程
  • remotion-best-practices:一个负责用 React 直接生成视频的 skills

remotion-best-practices 是针对 Remotion 的专门技能,包含数十个规则文件(基于官方最佳实践),例如:

  • 三维内容(3D)
  • 动画基础
  • 媒体导入(图片、音频、字体)
  • 字幕与字幕同步
  • 序列与场景组织
  • 透明视频与剪辑
  • 文本动画 & 插值方法 …

skill 地址:https://skills.sh/remotion-dev/skills/remotion-best-practices

安装与使用

开始前我们先创建一个目录 opencode-runoob-test:

bash
mkdir opencode-runoob-test
cd opencode-runoob-test

在 opencode-runoob-test 目录下我们可以使用 npx 命令来安装:

bash
npx skills add remotion-dev/skills

d20bbdce-71f0-486f-a36a-9e3d330bfe23.png

安装过程,可以勾选我们需要的环境,比如 OpenCode:

7345bb6f-82e9-4228-8772-70e22b53c9f1.png

接下来这里选择当前目录也就是我们之前创建的 opencode-runoob-test,另一个选项 Global 是全局安装:

07e6ffab-eed0-47ef-83e1-8cf1cbd37ce7.png

接下来一路回车就好了,之后会显示安装目录及支持的开发工具:

2d9dab42-dc41-45d5-bc04-c10bc664e856.png

用 VS Code 打开 目录 opencode-runoob-test就可以看到这个 skill 了:

e6bdede2-9a4a-4cbf-894c-abd3f6871a2d.png

我们也可以打开 OpenCode,输入 /remotion 就可以看到这个 skill:

0058151a-0f77-483c-83de-10c0b91e74d0.png

然后在输入框输入:

bash
生成一个 Hello Runoob!的演示视频

接下来 AI 就会找到这个 skill(技能):

777dbe1f-5d3a-48ae-8290-516813b54c40.png

然后 AI 就会使用这个 skill 来开始设计编写:

92bbefa8-f6e2-403c-8f24-718ecab66613.png

AI 思考中...

OpenCode 教程

基于 VitePress 构建,部署于 GitHub Pages