Vue Skills——教 AI 正确写 Vue
AI领域迎来重大突破,"Skills"技术将经验转化为AI执行力。文章重点介绍了尤雨溪团队开发的vue-skills项目,该项目将Vue3开发最佳实践封装成AI可执行的智能工作流,显著提升AI编程质量。Skills技术解决了传统函数调用的零散性问题,通过自然语言指令+脚本+资源的组合,使AI能完成复杂任务。该技术降低了开发门槛,让非程序员也能创建AI应用,并已在自动化内容发布、
近年一直有在关注 AI 圈,从 AI 落地变现的有效途径是卖课的李博士翻船,到近日大火的 AI Conding……
不管是 vs code、codebuddy、cursor、claude,还是 agent 以及智能体,重点只有一个:
把“经验”和“最佳实践”,变成 AI 的“理解力”和“执行力”。
近日有看大到尤大转发的新项目:vue-skills,该项目的作者也是 VoidZero 的作者 Yunfei He。
一、🧠 Skills 是什么
AI Coding 中的 “Skills” 是一种将任务指令、代码工具和相关资源打包成的可复用智能工作流,旨在让 AI(如 Claude)像熟练的员工一样,按步骤调用工具并可靠地完成复杂任务。
你可以把 Skills 理解为一份给AI的“员工手册”+“工具箱”,它彻底改变了AI的工作方式。
Skills:从“单个工具”到“整套方案”!
下表清晰地展示了它与传统函数调用的核心区别:
| 维度 | 传统的函数调用 (Function Calling) | Skills (AI工作流) |
|---|---|---|
| 抽象层次 | 接口级:连接AI和单个工具 | 工作流级:整合多个工具和知识 |
| 构成要素 | 单一函数(如 get_weather) |
1. 指令 (SKILL.md):用自然语言描述任务步骤2. 脚本:执行具体操作的代码 3. 资源:参考文档、模板等 |
| 执行逻辑 | 概率性判断:AI自行判断是否需要调用 | 结构化流程:AI依据明确的指令,按步骤、有条件地执行 |
| 核心优势 | 让AI能“打电话”驱动外部世界 | 提供整套解决方案,让AI更可靠、更专业 |
二、🔥 Skills 为什么火了
Skills概念的流行,是技术、需求和市场多方面成熟的结果:
1、技术成熟度跨越拐点:2026年被广泛认为是“AI应用元年”。推理成本大幅下降、交互方式从简单对话转向能自主规划行动的智能体(Agent),这为Skills这类复杂工作流的落地提供了经济和技术基础。
2、切实降低开发与应用门槛:Skills的核心(SKILL.md)用自然语言编写,非程序员也能通过清晰定义工作流来创建强大的AI应用。同时,它解决了传统函数调用“零散、一次性”的痛点,让AI能执行包含多步骤和逻辑判断的长任务。
3、解决真实业务痛点:Skills能封装那些重复性高、步骤固定但需要一定判断力的任务,正好契合了企业降本增效的强烈需求。例如:
- 自动化内容发布:将Markdown文章一键发布到 X 并完美保留格式、自动上传图片。
- 智能会议助手:从会议记录中自动提取摘要、决策和待办事项,并起草跟进邮件。
- 数据分析报告:自动分析CSV文件,识别关键指标与异常值,生成图文报告。
以前我们用 AI 写代码,更多是这样:
- “给我写一个文章列表的 Vue3 组件”
- “排队这个报错”
- “帮我优化代码”
根据第一性原理可知,LLM 的本质是预测下一个最可能的 tokens。那么 AI 每次是在“临时理解问题”,临时给答案。
而 Skills 的出现,就是把「长期积累的经验、规则、最佳实践」封装成一套 可复用、可组合、可触发的技能。你可以把 Skills 理解为:
AI 的「专业知识模块」
AI 的「长期记忆 + 行为约束」
甚至是某个技术栈的「官方用法说明书(AI 版)」
AI Coding中的Skills,代表了从“教AI使用工具”到“教AI完成工作”的范式转变。它的流行标志着AI应用开发正从“提示词工程”迈向“系统工程”,未来开发者的核心能力将逐渐转变为定义问题、设计智能工作流和审核AI产出的“教练”与“架构师”。
这也就是 Skills 为什么开始火了的原因。
三、vue-skills 是什么?
1、背景
vue-skills 是由 Vue.js 团队成员 hyf0 创建的开源项目,定位为 "Agent skills for Vue 3 development"(Vue 3 开发的 AI 智能体技能包)。
这个项目诞生于 AI 编程工具(如 Cursor、Claude Code、GitHub Copilot 等)快速发展的背景下。传统的 AI 编程依赖于模型本身的能力,而 Skills 机制允许将特定技术栈的最佳实践、编码规范和架构决策编码成 AI 可理解的规则,从而显著提升 AI 生成代码的质量和一致性。
2、核心功能
vue-skills 作为 Vue 3 的专用技能包,提供了以下核心能力:
-
按需加载机制
不同于传统的 Rules(规则文件),Skills 支持分层加载- 元数据 → 完整指令 → 参考资料
- 不会默认加载所有内容占用上下文,而是根据实际需要动态加载
-
内置脚本支持
- 包含可执行脚本文件,AI 可以直接运行这些脚本而无需读取其完整内容
- 进一步减少上下文占用,提升效率
3、覆盖 Vue 生态核心模块
目前包含的技能模块涵盖:
- Vue 3 - 核心框架最佳实践
- Pinia - 状态管理
- Vue Router - 路由管理
- CSS - 样式规范
- Volar - TypeScript 支持
4、无需 MCP
这些能力不需要依赖 MCP(Model Context Protocol)即可实现,简化了配置流程。
四、快速上手 vue-skills
1、安装
在项目中使用 add-skill CLI 工具安装(项目在 github 上,自行解决访问问题,也可查我的前面“Postman无法重置(找回)密码”里面的方法):
npx add-skill hyf0/vue-skills

选择“项目”或“全局”视自己的需要选择。

安装方式:“符号链接”或“复制到所有 agent”。如果访问 github 不是很方便,个人推荐“复制到所有 agent”。

因为已经安装过了,所以再次安装会提示“覆盖”

安装完成!

安装完成后,在两个目录 .agent 和 .trae 的 skills 文件夹中都有了对应的 skills。
只要工具支持 Agent Skills,安装完成后一般不需要你手动“开启”。
开始提 Vue 相关问题 / 任务
然后你就可以直接提问或布置任务了:
“帮我写一个 Vue 3 组件,要求符合最佳实践。”
“这个 Pinia Store 的写法对吗?帮我优化一下。”
这时 AI 在生成或修改代码时,就会自动参考 vue-skills 中的规则,而不是随便拼一段代码给你。
五、意义与价值
vue-skills 代表了 前端 + AI 协作的未来方向:
-
团队标准化:可将公司内部的编码规范、架构决策封装成私有 skills,确保 AI 生成的代码符合团队标准
-
新人上手:新团队成员通过 skills 包即可快速获得与团队一致的 AI 编程体验
-
质量提升:AI 写代码的质量不再单纯依赖模型本身,而取决于提供的技能包质量
如果你是 Vue 开发者,这个项目,值得关注。
vue-skills Github 地址:https://github.com/hyf0/vue-skills
如果你是其它开发,可以到 Github 上去看对应的 Skills。
祝:
天下牛马都衣食无忧!
天下老板都财源滚滚!
愿:
世界和平!
更多推荐



所有评论(0)