TinyVue Skills实战：AI驱动组件理解自然语言指令

一个月前，社区开发者建议TinyVue推出Skills功能，为AI辅助编程提供标准化接口。

这一需求已迅速实现。目前，TinyVue组件库与TinyRobot AI对话组件已原生集成Agent Skills。你可以在支持Skills的IDE（如VSCode、Cursor、Trae）中直接配置并调用。

1. 功能演示

以下演示基于Trae IDE，展示实际效果。

TinyVue Skills实战：AI利用TinyVue组件快速搭建前端页面 → https://www.bilibili.com/video/BV1d6PNzNENw/

接下来以Trae为例，详解TinyVue Skills的安装与配置流程。

2. 安装TinyVue Skills

在终端中执行以下命令：

npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent trae

安装方式建议选择Symlink（推荐）。

安装成功。

验证Skills是否安装成功：

npx skills list -g

3. 启用TinyVue Skills

进入Trae设置，左侧导航栏【规则和技能】→【技能】，将【tiny-vue-skill】开关打开即可。

4. 在AI对话中调用TinyVue Skills

打开Trae的AI侧边栏，输入如下指令：

使用TinyVue组件创建一个登录组件，并集成到App.vue中

AI将自动调用tiny-vue-skill，依据SKILL.md的指引检索对应组件的API与Demo文档，并选用合适的TinyVue组件构建目标页面。

相比AI从海量互联网信息中盲目搜索TinyVue用法，这种方式准确性更佳、Token消耗更低，且有效减少幻觉。

若你正在使用TinyVue组件库，强烈建议配置tiny-vue-skill，借助AI辅助编码显著提升效率。

若你使用的是VSCode Copilot、Cursor等其他IDE，安装步骤类似，只需将命令中的--agent参数替换为对应IDE名称即可。对应关系见下表。

例如在Cursor中安装：

npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor