TinyVue skills使用指南

OpenTiny社区 OpenTiny社区 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 700+累计阅读 726平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄4年
关注
原创 最新推荐文章于 2026-11-08 09:11:01 发布 726 阅读 AI 写同款· GEO 优化 ›
自然语言驱动UI：TinyVue Skills如何让组件听懂人话 自然语言处理（NLP）与前端开发的结合，正推动人机交互从精确指令向自然对话演进。其核心原理在于利用大语言模型（LLM）进行意图识别与实体抽取，将模糊的人类语言转化为结构化指令。这一技术的工程价值在于显著降低交互门槛，通过自然语言到代码（NL2Code）的映射，使非技术用户也能高效操作复杂界面。在应用场景上，它尤其适用于低代码平台、智能助手和教育工具，通过构建组件能力知识库和优化提示词工程，实现从“人迁就机器”到“机器理解人”的转变。TinyVue Skills项目正是这一前沿理念的具体实践，为Vue生态带来 阅读详情

本文由体验技术团队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。

2 安装 TinyVue Skills

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

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

在这里插入图片描述

安装方式选择 Symlink (Recommended)

安装成功！
在这里插入图片描述
查看 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也没关系，安装 TinyVue Skills 遵循类似的步骤，只需要把命令中的 --agent 修改成对应的 IDE 即可，以下是对应表格。

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

npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor
Agent--agent项目内路径全局路径
Ampamp.agents/skills/~/.config/agents/skills/
Antigravityantigravity.agent/skills/~/.gemini/antigravity/skills/
Claude Codeclaude-code.claude/skills/~/.claude/skills/
Clawdbotclawdbotskills/~/.clawdbot/skills/
Codexcodex.codex/skills/~/.codex/skills/
Cursorcursor.cursor/skills/~/.cursor/skills/
Droiddroid.factory/skills/~/.factory/skills/
Gemini CLIgemini-cli.gemini/skills/~/.gemini/skills/
GitHub Copilotgithub-copilot.github/skills/~/.copilot/skills/
Goosegoose.goose/skills/~/.config/goose/skills/
Kilo Codekilo.kilocode/skills/~/.kilocode/skills/
Kiro CLIkiro-cli.kiro/skills/~/.kiro/skills/
OpenCodeopencode.opencode/skills/~/.config/opencode/skills/
Roo Coderoo.roo/skills/~/.roo/skills/
Traetrae.trae/skills/~/.trae/skills/
Windsurfwindsurf.windsurf/skills/~/.codeium/windsurf/skills/

关于OpenTiny

欢迎加入 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标签，一起参与开源贡献~

标签
#前端 #OpenTiny #vue.js #AI编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
【Docker】搭建一个媒体服务器插件后端API服务 - MetaTube 本教程基于群晖的NAS设备DS423+的docker功能进行搭建，DSM版为 7.2.1-69057 Update 5。MetaTube是一个媒体服务器插件，主要用于Emby和Jellyfin媒体服务器。它的主要功能是从互联网上抓取内容并响应 JSON 数据，然后通过预安装的 MetaTube 插件请求服务器并下载相应的元数据，以与 Jellyfin/Emby 服务器配合使用。使用 MetaTube 的步骤大致如下：部署后端：首先，需要部署一个名为​ 的后端 API 服务器来抓取内容。 阅读详情

相关推荐

MATLAB仿真实战：双有源桥（DAB）变换器的扩展移相调制（EPS）全流程解析

本文提供了一份详细的MATLAB/Simulink仿真实战指南，手把手解析双有源桥（DAB）变换器在扩展移相调制（EPS）下的全流程建模。内容涵盖从核心原理、主功率电路搭建、EPS驱动信号生成，到仿真运行、波形分析及模型优化的完整步骤，旨在帮助工程师和研究者快速掌握DAB变换器的仿真与性能验证方法。

o4p5q6r7s的博客 503

【拥抱AI】TRAE SOLO下的Skills使用与推荐

Trae等AI编程工具中的"Skills"是指自定义的AI助手角色或系统提示词，通过配置技能使AI更精准理解需求。一个Skill包含YAML元数据和流程说明，用于固化最佳实践。文章提供了多个可直接使用的技能包模板，包括代码审查、团队规范、测试生成、文档编写等，每个模板都包含具体的使用场景和执行步骤说明。这些技能包可帮助开发者提高代码质量、规范团队协作、确保安全合规等，用户只需复制模板到对应目录即可使用。

保持前进，即便速度慢，也不能停下脚步... 1万+

KEIL5编译报错L6200E：__stdout重定义问题分析与解决

本文深入分析KEIL5编译报错L6200E中__stdout重定义问题的根源，指出因未完整定义__stderr导致与标准库stdio_streams.o冲突。提供完整重定义标准流、启用MicroLIB库等解决方案，帮助开发者彻底解决Symbol multiply defined错误，提升嵌入式开发效率。

uran的专栏 954

Vue Skill：让 AI 真正懂 Vue 3

Vue Skill 项目代表了 AI 辅助开发的一个重要方向——通过专门的技能库来提升 AI 对特定技术栈的理解和应用能力。对于 Vue 3 开发者来说，这个项目提供了一个强大的工具，可以帮助他们在日常开发中获得更专业、更符合最佳实践的代码建议。

weixin_43220800的博客 2429

【华为OD机考真题】- 构成的正方形数量(B卷-100分)（Java版）

🔔本文收录于「最新最全华为OD机试真题(Java版)」专栏，手把手带你零基础教学华为OD机试。本题集提供最优题解思路，解题步骤，代码解析，复杂度分析及最优题解源码等，支持多语言题解，助你轻松拿捏OD机考，一举上岸！安利大家关注&&收藏&&订阅！题库正在疯狂收录中，up！up！up！！ 🚫提醒：拒绝一切代考/替考，违法必究！专栏所写题库均精心搜集于互联网，经过精心筛选和整理，结合数位十多年大厂实战经验资深大佬经验所撰，欢迎订阅。    💗订阅福利：一次订阅，可永久免费阅读，提供在线答疑解惑，后续题库更新

**My Coding Family** 1349

【华为OD机试真题E卷】514、学生方阵 | 机试真题+思路参考+代码分析（E卷复用）（C++、Java、Py）

【华为OD机试真题E卷】514、学生方阵 | 机试真题+思路参考+代码分析（E卷复用）（C++、Java、Py） 题目描述 学校组织活动，将学生排成一个矩形方阵 请在矩形方阵中找到最大的位置相连的男生数量 这个相连位置在一个直线上，方向可以是水平的，垂直的，成对角线的或者呈反对角线的 注：学生个数不会超过10000

KJ.JK 2492

Vue-skills的中文文档

Vue-skills的中文文档：使用以及示列

weixin_45866961的博客 2867

SAP-ABAP：SAP信贷管理核心：CL_UKM_BUPA_FACTORY类完整解析与实践指南

SAP信贷管理核心类CL_UKM_BUPA_FACTORY解析 CL_UKM_BUPA_FACTORY是SAP信贷管理(UKM)模块的核心类，作为业务伙伴信贷数据的中央控制台，它提供： 统一入口：标准化实例化客户/供应商信贷对象 主要功能： 获取单条/批量业务伙伴数据 安全保存数据变更 封装底层数据访问逻辑 典型应用场景： 信贷主数据批量维护 自动化限额调整 订单信贷实时检查 性能优化建议： 使用批量方法替代循环单条处理 合理设置字段选择 实施缓存策略 该类通过简洁API简化复杂信贷操作，是SAP信贷管理开

baidu_35680696的博客 1208

AI Skills：前端新的效率神器！

要说清楚什么是 Skills，先来了解一下关于 AI 的 2 个核心概念--Agent和MCP。

W11929311582的博客 4324

第54节：vue3+cesiumjs

对之前的vue2+cesiumjs 进行了升级

qq_29384639的博客 62

Python爬虫实战：汽车之家车型参数与口碑数据抓取分析

在当今信息爆炸的时代，购车决策已从传统的4S店咨询转变为数据驱动的智能化过程。汽车之家作为国内领先的汽车信息平台，汇聚了海量车型参数、车主口碑和专业评测数据。本文将详细介绍如何使用Python最新爬虫技术构建一个高效、稳定的汽车数据采集系统，通过多维度数据分析辅助用户做出更明智的购车决策。本项目将采用异步爬虫、智能反爬绕过、数据清洗与分析等现代化技术栈，完整实现从数据采集到可视化分析的全流程。本文详细介绍了如何使用Python最新技术构建一个功能完整的汽车之家数据爬虫系统。

2201_76125261的博客 1488

Vue Skills 发布！Vue3 “AI 避坑指南“！

AI 写代码的质量，不再只取决于模型本身， 而取决于你给它“喂了什么技能”。当我们开始给 AI 定义「技能」的时候， 写代码这件事，本身就已经变了。如何把“经验”和“最佳实践”，变成 AI 可以真正理解和执行的能力。不是“教人写 Vue”，而是“教 AI 正确地写 Vue”。AI 如果没有被明确约束，很容易写出“能跑但不对”的代码。Skills 的出现，本质是在做一件升级版的事情。虽然规则不多，但都是日常开发中非常高频的问题。AI 是在“临时理解问题”，临时给答案。并不是一个组件库，也不是工具函数集合。

pingan8787 425

V-Mamba：2D 选择性扫描状态空间模型图像分类

V-Mamba CIFAR-10 分类链路：32² RGB → Stem Conv (3→64ch, stride2→16²) → VMambaBlock ×4 (SS2D 四方向 → Mamba S6 扫描 → MLP) → GAP → Linear → 10 类。核心贡献：SS2D 四方向扫描将 2D 空间建模转为 4 个 1D 序列, 计算复杂度从 O(N²) 降至 O(N)。建议先从 CIFAR-10 dim=64 depth=4 验证 SSM 收敛性;

FJN110的博客 70

TinyVue skills使用指南：把组件库接入 AI 编码工作流

用 skills 机制给 AI 装上 TinyVue 组件库说明书，解决生成代码标签错、props 幻觉问题。本文提供 SKILL.md 模板、TaoToken 模型通道配置与 401 排错清单，配置片段可直接复制。详见 https://taotoken.net/?utm_source=taotoken_aicg_blog_end

weixin_34779181的博客 218

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料，已经经过了本人的筛选和整理，希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助！

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

TinyVue Skills 使用指南：把组件库知识接进 AI 编程工作流

TinyVue Skills 把组件库知识包挂进 IDE，让 AI 按真实 API 生成代码。用 npx skills add 安装并选 Symlink，开启后提问带上「使用 TinyVue 组件」即可验证。模型调用可走 TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end 统一管理 Key。

weixin_35755823的博客 59

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。

Trae 跑 TinyVue Skills：模型 Key 用 TaoToken

本教程在 Trae 中安装 tiny-vue-skill，并把模型 Key 换成 TaoToken。用 npx skills add opentiny/agent-skills --skill tiny-vue-skill --agent trae 安装，再到 Trae 设置启用技能，将模型供应商 Base URL 与 API Key 指向 TaoToken。相比盲搜 TinyVue 组件 API，启用 skills 后 AI 读取本地 SKILL.md，幻觉和 Token 消耗都更少。遇到 401 或 m

weixin_42186387的博客 10

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

TinyVue Skill 实战：让 AI Agent 真正懂你的组件库

用 npx skills add opentiny/agent-skills 安装 TinyVue Skill，让 AI Agent 通过 MCP 协议精准调用组件库 API，告别通用大模型写 TinyVue 代码时的属性幻觉与版本混淆。配合 TaoToken 稳定模型入口，代码准确率显著提升、Token 消耗降低。详见 https://taotoken.net/?utm_source=taotoken_aicg_blog_end

weixin_35750747的博客 11

“TinyVue Skill：让 AI 真正懂你的组件库” 是 OpenTiny 团队针对 AI 智能体（Agent）开发的一套**技能工具集**

除了生成代码，OpenTiny 还基于 MCP 协议实现了 **AI 直接操作 TinyVue 组件**的能力（属于 TinyVue 智能组件库的一部分）。这意味着 AI 不仅能写代码，还能像人一样“点击”你页面上已有的 TinyVue 按钮、选择下拉框、操作表格数据。这对于自动化测试或低代码场景非常有价值。

[Blog][Domain] programb.blog.youkuaiyun.com 262

TinyRobot v0.5.0新版本强在哪？可挂载 Agent Skills，长内容交互体验彻底翻新

TinyRobot v0.5.0 版本发布，这是一套专为AI应用打造的前端交互框架，提供从对话UI到会话管理的完整能力。新版本主要特性包括：新增Skills能力，支持轻量级扩展AI助手功能；引入Anchor组件优化长内容导航；新增Layout组件简化复杂页面布局；提供CLI工具快速创建项目。该版本着重提升了开发效率和交互体验，使构建AI聊天应用更简单快捷。项目已开源，欢迎开发者体验和反馈。

OpenTiny的博客 306

告别 AI 乱写 Vue！用 vue-skills 构建前端智能编码标准

如果你是 Vue 开发者，尤其是负责架构或工程效能的同学，现在就是关注并尝试 vue-skills 的最佳时机。因为从今天起，写代码不再是单打独斗，而是你与 AI 共同遵循一套智能契约的过程。📜 开源协议：MIT（可免费用于商业项目）

专注前端开发领域，深耕 Python AI Agent应用开发，热爱探索 Web 与人工智能的前沿技术。 961

Vue Skills——教 AI 正确写 Vue

AI领域迎来重大突破，"Skills"技术将经验转化为AI执行力。文章重点介绍了尤雨溪团队开发的vue-skills项目，该项目将Vue3开发最佳实践封装成AI可执行的智能工作流，显著提升AI编程质量。Skills技术解决了传统函数调用的零散性问题，通过自然语言指令+脚本+资源的组合，使AI能完成复杂任务。该技术降低了开发门槛，让非程序员也能创建AI应用，并已在自动化内容发布、智能会议助手等场景验证价值。vue-skills作为Vue生态专用技能包，包含核心框架、状态管理等模块，安装简单

weixin_56371726的博客 3307

2026年初爆火的 Skills 是何方神圣？又如何集成到字节 Trae IDE

这里仅为个人理解，如有不正确的地方，请在评论区指正🤝。Skills 的本质：不是新能力，而是“新边界”。Skills 并没有让 AI 变聪明，它只是让 AI 变得可控。Skills 跟我们之前用惯的 Prompt 是共存的，Prompt 描述想做什么（意图），Skills 决定怎么做（执行）。简单说，就是我可以用Prompt描述我要做的事情，比如写一个贪吃蛇的小游戏，大模型 GET 到我们的意图，尝试用自己的认知去实操，这时如果正好有一份贪吃蛇游戏开发说明书，大模型就可以照着来做，效果杠杠的😄。

集成显卡的开源主页 https://github.com/0604hx 1238

Vue前端开发学习的简单记录

的vue项目，该项目为vue 2项目，并且已经默认添加了四个常用的模块： less, babel, router, vuex。页面中有Vue的图标，标题为：Welcome to Your Vue.js App，并且还有一些其他文字、超链接。如果Git是默认的路径：C:\Program Files\Git\bin，则不需要在VScode中配置。比如src是source的简写，代表源码的含义，也是我们核心代码的存放之处。输入到浏览器的地址栏中，并回车，可以看到Vue项目的初始（默认）网站页面。

blucod的博客 748

trae cn 的skill编写规则详解

TRAE 的 Skill 本质上是一份给 AI 的（SOP），通过SKILL.md文件定义。它解决了重复写 Prompt 的痛点，让 AI 在特定场景下能稳定输出符合你规范的结果。

quyunde的博客 1334

把 .vue 组件变成 AI 可调用的“技能“：前端能力可调用化的工程实践

当 AI Agent 成为软件系统的新型"用户"，传统 .vue 组件的封装范式正面临根本性挑战——组件的能力"藏"在 DOM 结构里，AI 无从调用。"前端能力可调用化（Front-end Capability as Skill）"是一种新范式：将 .vue 组件抽象为具名、类型化、可被 AI 发现与调用的 Skill，让前端能力以标准化接口的形式参与 AI 驱动的智能应用。本文结合 SPARK 框架的能力系统（Capability System）与组件注册表（Registry），深入讲解这一范式的原理、

领码SPARK - 以无代码之星火，燎原数字之未来！ 1556

从组件到能力：把 `.vue` 抽象为 Skill，开启前端能力可调用时代—— Front-end Capability as Skill 的架构思考与实践

本文探讨了前端组件从传统UI构建块向"可调用能力单元"(Skill)的演进趋势。随着AI和低代码技术的发展，Vue组件正在被重新定义为可描述、可组合的能力模块。文章提出将组件抽象为Skill的设计思路，使其具备明确的元数据描述、输入输出定义和可执行动作，从而支持AI理解和自动组合UI。通过Skill Registry、Engine和Runtime的架构设计，实现"AI自动生成页面"的新型开发模式。这种转变使前端组件从代码结构升级为系统级能力单元，为AI原生前端框架和低代码平台的发展提供了新思路。

领码SPARK - 以无代码之星火，燎原数字之未来！ 705
上一篇： OpenTiny NEXT-SDK 重磅发布：四步把你的前端应用变成智能应用
下一篇： 以界面重构文字，GenUI 正式发布！
点赞 3
评论 0
书签 书签 6
OpenTiny社区
OpenTiny社区
博客等级 码龄4年 1540粉丝 266原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值