给组件装上“大脑”：揭秘 TinyVue Skills 如何让 AI 听懂你的自然语言指令

本文由体验技术团队Kagol原创。

一个月前，有用户建议 TinyVue 出几个 Skills，方便 AI 编程。

必须安排上！

目前 TinyVue 组件库和 TinyRobot AI 对话组件均已支持 Agent Skills，你可以在支持 Skills 的 IDE（比如 VSCode、Cursor、Trae 等）上配置和使用。

1 演示视频

先看下使用效果（以 Trae 为例）。

TinyVue Skills：让 AI 使用 TinyVue 组件生成前端页面：https://www.bilibili.com/video/BV1d6PNzNENw/

以 Trae 为例，给大家介绍如何安装和配置 TinyVue Skills。

在命令行终端中执行以下命令：

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

安装方式选择 Symlink (Recommended)

安装成功！

查看 Skills 是否安装成功：

npx skills list -g

打开 Trae 的设置页面，在左侧的【规则和技能】菜单中找到【技能】，开启【tiny-vue-skill】这个技能即可。

在 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也没关系，安装 TinyVue Skills 遵循类似的步骤，只需要把命令中的 --agent 修改成对应的 IDE 即可，以下是对应表格。

比如在 Cursor 中安装 tiny-vue-skill：

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

Agent	`--agent`	项目内路径	全局路径
Amp	`amp`	`.agents/skills/`	`~/.config/agents/skills/`
Antigravity	`antigravity`	`.agent/skills/`	`~/.gemini/antigravity/skills/`
Claude Code	`claude-code`	`.claude/skills/`	`~/.claude/skills/`
Clawdbot	`clawdbot`	`skills/`	`~/.clawdbot/skills/`
Codex	`codex`	`.codex/skills/`	`~/.codex/skills/`
Cursor	`cursor`	`.cursor/skills/`	`~/.cursor/skills/`
Droid	`droid`	`.factory/skills/`	`~/.factory/skills/`
Gemini CLI	`gemini-cli`	`.gemini/skills/`	`~/.gemini/skills/`
GitHub Copilot	`github-copilot`	`.github/skills/`	`~/.copilot/skills/`
Goose	`goose`	`.goose/skills/`	`~/.config/goose/skills/`
Kilo Code	`kilo`	`.kilocode/skills/`	`~/.kilocode/skills/`
Kiro CLI	`kiro-cli`	`.kiro/skills/`	`~/.kiro/skills/`
OpenCode	`opencode`	`.opencode/skills/`	`~/.config/opencode/skills/`
Roo Code	`roo`	`.roo/skills/`	`~/.roo/skills/`
Trae	`trae`	`.trae/skills/`	`~/.trae/skills/`
Windsurf	`windsurf`	`.windsurf/skills/`	`~/.codeium/windsurf/skills/`

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyVue skill源码：https://github.com/opentiny/agent-skills （欢迎 Star ⭐）

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