TinyRobot Skills技巧大公开：让 AI 成为你的 “UI 搭建”副驾驶

TinyRobot 是一套专为 AI 应用构建的前端交互框架，帮助团队快速搭建企业级 AI 助手、智能客服与多轮对话系统。
TinyRobot 现已支持 Skills。TinyRobot Skill 用于指导用户使用 TinyRobot 组件库来构建 AI 聊天界面，可以帮助你：

组件使用 - 使用 Bubble、Sender、Prompts 等组件构建聊天 UI
项目配置 - 项目初始化、主题配置
代码生成 - 按照最佳实践生成 Vue 组件代码
状态管理 - 使用消息、对话、AI 请求相关的工具函数

下面介绍如何使用 TinyRobot Skills 让 AI 辅助搭建界面。

安装 TinyRobot Skills

方式一：使用 skills 工具安装 TinyRobot Skills

bash 复制代码

npx skills add opentiny/agent-skills --skill tiny-robot-skill --agent <your-agent>
# 或者
pnpm dlx skills add opentiny/agent-skills --skill tiny-robot-skill --agent <your-agent>

<your-agent> 为你的 AI 代理。如果要查看支持的代理列表，可以执行 npx skills add opentiny/agent-skills --skill tiny-robot-skill 命令，在 CLI 会列出支持的代理列表，选择一个或多个代理即可。

接着会提示选择安装位置（项目/全局）和最终确认。安装完成后，会提示安装成功。

方式二：直接克隆仓库到本地，然后将 tiny-robot-skill 文件夹复制到用户工程或都用户全局配置的指定路径中，具体位置请参考各 IDE/CLI 的官方文档

bash 复制代码

# 推荐使用 degit 工具下载指定目录到本地，并且不带提交记录
npx degit opentiny/agent-skills/skills/tiny-robot-skill <path>/tiny-robot-skill
# 或者
pnpm dlx degit opentiny/agent-skills/skills/tiny-robot-skill <path>/tiny-robot-skill

# git clone
git clone https://github.com/opentiny/agent-skills.git
cp -r agent-skills/skills/tiny-robot-skill <path>

使用 TinyRobot Skills

下面介绍 Cursor 和 OpenCode 中使用 TinyRobot Skills 的使用方式。

Cursor

pnpm dlx skills add opentiny/agent-skills --skill tiny-robot-skill --agent cursor

成功安装 TinyRobot Skills 后，在 Cursor 对话框输入 /，会自动列出当前可用的技能列表，选择 tiny-robot-skill 即可。

如果通过 Cursor Settings -> Rules, Skills, SubAgents 来检查 Skills 是否加载成功。如果仍然没有，可以考虑重新启动 Cursor。

在对话框使用 /tiny-robot-skill + 问题描述。

OpenCode

安装 opencode

bash 复制代码

npm install -g opencode-ai

pnpm dlx skills add opentiny/agent-skills --skill tiny-robot-skill --agent opencode

如果想在 opencode 接入自己的大模型，可以编辑用户目录的 .config/opencode/opencode.json，下面是增加与 ChatGPT 接口格式兼容的接口示例

json 复制代码

// ~/.config/opencode/opencode.json
{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "my-agents": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "MyAgent",
      "options": {
        "baseURL": "http://xxxx/chat/v1",
        "apiKey": "你的apiKey"
      },
      "models": {
        "auto": {
          "name": "Model Auto"
        }
      }
    }
  }
}

打开 OpenCode

bash 复制代码

opencode

输入 /models 指令来选择模型。如果未使用过，需要往下翻页，可以找到你填写的模型

选择模型后，输入 /skills 执行来选择 tiny-robot-skills 技能

接下来就可以提问了！

关于OpenTiny

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品，加速企业应用的智能化改造，实现AI理解用户意图自主完成任务。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design/

TinyRobot 代码仓库：github.com/opentiny/ti...（欢迎star ⭐）

TinyRobot skill源码：github.com/opentiny/ag... （欢迎 Star ⭐）

关于我们：opentiny.design/opentiny-de...

欢迎进入代码仓库 Star🌟TinyVue、TinyEngine、TinyRobot、TinyPro、TinyNG、TinyCLI、TinyEditor 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~