别再让AI瞎写Vue代码了，用Skills给它装个大脑
现在用AI写代码的人越来越多。打开Cursor或者Claude，说句话就能生成一段vue代码，确实方便。但用久了你会发现一个问题：AI写出来的代码能用，但看着就是不太对劲。命名乱来，结构别扭，跟团队其他人写的对不上。不是代码有错，是写法不像人写的。
最近Vue核心团队成员Anthony Fu开源了一个项目叫antfu/skills，专门解决这个问题。这东西说白了就是给AI装上一套"脑子"，让它写Vue代码的时候知道该怎么写才对。
Skills是什么
Skills就是一堆写好的Markdown文件，里面装着某个技术栈该怎么用的说明。比如Vue该怎么写，Pinia该怎么用，Vite该怎么配。AI在写代码之前会先看这些文件，然后再动手。
你可以这么理解：以前AI写代码是凭记忆瞎蒙，现在有了Skills，它手里有了说明书。
这个项目把Vue生态里常用的一套工具全整理成了Skills：
还有Anthony Fu自己多年积累的最佳实践，比如用pnpm、配ESLint、写Vitest这些习惯。
怎么装
装起来很简单，一行命令的事：
pnpx skills add antfu/skills --skill='*'这会把所有Skill都装到你电脑里。如果只想装Vue相关的：
pnpx skills add antfu/skills --skill vue装完以后，在你电脑的用户目录下会多出一个skills文件夹，里面每个子文件夹都有一个SKILL.md文件。这些文件就是AI要看的说明书。
怎么用
装好之后你什么都不用改。平时怎么用AI还怎么用，只是AI写出来的代码会不一样。
比如你让AI写一个Vue按钮组件：
"写一个Vue3按钮组件，支持disabled和loading状态，按最佳实践写"
有了Vue Skill之后，AI会知道应该用<script setup>，应该用TypeScript，props该怎么定义，事件该怎么发。写出来的代码跟你团队里老手写的差不多。
如果你用Nuxt，让AI写个页面：
"创建一个Nuxt3页面，用文件路由，调接口展示数据"
Nuxt Skill会让AI知道要用useFetch还是useAsyncData，路由文件该放哪，配置该怎么写。
背后是怎么做的
这个项目不只是收集了一堆文档。它把来源分成了三类：
第一类是手工维护的技能。比如Anthony Fu自己整理的那套工程习惯，包括ESLint怎么配、pnpm怎么用、项目结构怎么搭。这些是他的个人经验，别人可以直接拿来用。
第二类是从官方文档生成的技能。Vue、Nuxt、Pinia这些官方文档，通过脚本自动转成AI能读的格式。好处是官方文档一更新，这边也能跟着变，不会过期。
第三类是外部项目自带的技能。比如VueUse、Slidev这些项目，它们自己维护的Skill可以直接引进来。antfu/skills就像一个聚合入口，把分散的Skill都收在一起。
实际能帮你什么
拿写一个购物车来举例。以前你让AI写购物车，它可能给你拼出一堆代码，但Pinia的用法可能是错的，响应式可能写得不对，持久化可能压根没做。
有了Pinia Skill之后，AI知道要用defineStore，知道store里该用ref还是reactive，知道该怎么配持久化。代码写出来可以直接用，不用你自己改半天。
对团队来说更有用。你可以fork这个项目，在里面加上自己团队的规范。比如你们公司后端接口怎么调，错误怎么处理，日志怎么打，都可以写成Skill。新来的同事让AI写代码，AI会自动遵守你们团队的规矩。
会不会装太多
Skill不是越多越好。写Vue项目就装Vue相关的，用不到Slidev就别装。装太多反而可能让AI不知道该听谁的。
比较好的做法是：把必须遵守的规范写在项目根目录的AGENTS.md里，剩下的按需加载Skill。比如写组件的时候加载组件规范，写测试的时候加载测试规范。
值不值得用
AI写代码这事，以前大家都图快，能跑就行。但现在越来越多的人开始在意代码质量。Skills这套东西，就是把质量这件事交给AI去管。
你不用再一遍遍告诉AI"用<script setup>"、"用TypeScript"、"这里要加类型"。装好Skill，AI自己知道。
项目地址：https://github.com/antfu/skills
装一个试试，你会发现AI写出来的Vue代码，终于像人写的了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！