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

OpenTiny社区
25 阅读4分钟

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

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

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

安装 TinyRobot Skills

  • 方式一：使用 skills 工具安装 TinyRobot Skills
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 会列出支持的代理列表，选择一个或多个代理即可。

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

1.png

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

2.png

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

3.png

OpenCode

安装 opencode

npm install -g opencode-ai

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

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

// ~/.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

opencode

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

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

4.png

接下来就可以提问了！

5.png

使用场景

场景一：代码生成

根据您的需求描述，Skill 可以生成符合 TinyRobot 规范的组件使用代码。

使用方法：

描述您的功能需求，例如：

  • "生成一个AI聊天页面，包括对话列表和输入框"
  • "实现对话气泡内容使用Markdown渲染"
  • "实现多会话管理，消息存储到localstorage"

Skill 会生成：

  • 完整的组件代码（HTML、TypeScript、CSS）
  • 符合 TinyRobot API 规范的实现

示例：

6.png

场景二：问题排查

当在使用 TinyRobot 组件时遇到问题，可以通过输入问题描述来获取帮助。

使用方法：

描述您遇到的问题，例如：

  • "气泡没有使用Markdown渲染"
  • "输入框附件上传不生效"

Skill 会分析问题并提供：

  • 可能的原因分析
  • 解决方案建议
  • 相关代码示例

关于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标签，一起参与开源贡献~

avatar
文章
阅读
粉丝