说话就能让AI写出顶级代码?Vercel官方经验包来了

简介: ## 先说前提:这个干嘛的用大白话说:Vercel是全球最大的网页托管平台。你知道GitHub吗?全球最大的代码托管平台。Vercel就是网页版的GitHub,全世界数百万网站都用它托管。服务过哪些大牌?有字节跳动、Adobe、IBM这些巨头。现在Vercel把内部多年积累的开发经验,打包成了一个 经验包。你不用学技术,不用背规则,甚至不用看文档。只要正常跟AI说话,AI就会

先说前提:这个干嘛的

用大白话说:Vercel是全球最大的网页托管平台。
你知道GitHub吗?全球最大的代码托管平台。
Vercel就是网页版的GitHub,全世界数百万网站都用它托管。

服务过哪些大牌?
有字节跳动、Adobe、IBM这些巨头。

现在Vercel把内部多年积累的开发经验,打包成了一个 经验包。
你不用学技术,不用背规则,甚至不用看文档。
只要正常跟AI说话,AI就会自动按照 Vercel的专业标准 来干活。

我们常会发现AI有时候会写出一些质量不太好的代码。
网页加载很慢、手机上显示不对、有些功能用不了。

这些问题不是说AI不懂,而是它不知道"专业的开发标准是什么"。
Vercel Labs开源的agent-skills,就是解决这个问题的。
把Vercel官方多年积累的开发经验,打包成AI可以直接调用的技能包。

用大白话说,就是"专家经验包"。
就像你玩游戏,有个新手向导告诉你怎么操作。
这个技能包就是AI的"新手向导"。

你跟AI说"优化这个网页",它就会按照Vercel的标准来优化,而不是自己瞎猜。

根据官方介绍,这个项目在GitHub上已经有19k+星,支持Claude、Cursor、Copilot等35+工具。

image.png

并且在 Skills.sh 上仅次于老金分享的findskill,位居 第二。

image.png

怎么安装?

就一行命令。
打开电脑的终端(Windows用户叫CMD或PowerShell),复制下面这行,回车。

npx skills add vercel-labs/agent-skills

等它跑完,就装好了。

装好后怎么用?不用管,它会自动工作。

举个例子:
你跟Claude说"帮我优化这个网页",Claude就会按照Vercel官方的标准来优化,而不是瞎搞。
就这么简单。

怎么触发技能

装好后,技能会自动触发,不用你手动操作。
但如果你想知道"我说的什么话会触发什么技能",老金我给你列出来。

请转换为文科生,进行大声背诵。

react-best-practices(性能优化)

说这些话会触发:

消除串行请求
打包体积优化
服务端性能
客户端数据获取
减少重渲染
渲染性能优化
JS微优化

React是现在最流行的前端框架,就是写网页用的工具。

这个技能包含40+条优化规则,分成8类:

消除串行请求:让网页加载更快。
打包体积优化:让网页文件更小。
服务端性能:让服务器响应更快。
客户端数据获取:让用户操作更流畅。
减少重渲染:让网页不卡顿。
渲染性能优化:让动画更流畅。
JS微优化:让代码运行更快。

根据GitHub上的反馈,有用户用这个优化网页,加载时间从3.2秒降到1.9秒,快了差不多40%。

web-design-guidelines(网页检查)

说这些话会触发:

检查无障碍
检查可访问性
检查我的UI
检查有没有设计问题
审计一下网页

这个技能有100+条检查规则,就像给网页做体检。
检查这些内容:有没有给盲人用的标签、键盘能不能操作、表单有没有验证、图片有没有说明文字、有没有做懒加载。

你写完网页,说一句"检查一下有没有问题",它就会一条一条列出来。

react-native-skills(手机优化)

说这些话会触发:

优化列表
解决卡顿
优化手机网页
React Native性能优化

做手机应用的朋友有福了。

这个技能包含16条规则,专门解决手机网页的性能问题:

列表优化:让长列表不卡。
布局优化:让显示更正确。
动画优化:让动画更流畅。
图片优化:让图片加载更快。
状态管理:让数据管理更清晰。

根据社区反馈,对于一个列表卡顿的问题,技能会直接指出应该用FlashList。
FlashList是一种优化过的列表组件。

composition-patterns(代码结构)

说这些话会触发:

重构这个组件
减少props
优化代码结构
解决boolean props太多的问题

AI会帮你重构成更清晰的代码结构。

vercel-deploy-claimable(一键部署)

这个需要注意,使用的是Vercel自身的代理,需要魔法才能登录网站。
说这些话会触发:

部署我的应用
发布到线上
帮我部署
把网页发出去
给个预览链接

这个技能最实用。
你跟AI说"帮我把网页发布出去",它会自动完成四步:

第一步:检测你用什么工具写的。
第二步:打包你的文件。
第三步:上传到服务器。
第四步:给你一个网址。

根据官方文档,从说"发布"到拿到网址,大概30秒搞定。

如果对你有帮助,记得关注一波~


记住:技能是自动触发的,只要正常跟AI对话,它会在合适的时机自动调用对应的技能。

和其他AI技能有什么区别

老金我知道你们会问这个问题。

相同点:
都是打包的专业知识、都是自动调用不用手动操作、都能让AI变得更聪明。

不同点:
Agent Skills是开放的,支持35+种AI工具。
Claude Code Skills是Claude专用的,功能更深但范围窄。

老金我打个比方:Agent Skills像"百度百科",谁都能用。
Claude Code Skills像"专业词典",内容深但只有特定人用。

值不值得装

老金我给个直接的建议。

如果你用Claude、Cursor、Copilot写代码:装,很有用。
Vercel是全球最大的网页托管平台,他们的标准很靠谱。

如果你用其他AI工具:也装。
支持35+工具,大概率能用上。

如果你完全不用AI写代码:那就不用装了。
这玩意儿是给AI用的,不是给你直接用的。

老金总结

Vercel这次确实有点东西。
19k星不是偶然,把多年的专业经验打包成AI技能包,这个思路很好。

老金我觉得这代表了一个趋势:从"通用AI"到"专业AI"。
AI再聪明,也需要专业知识。
有了技能包,AI就能"开挂"一样,变成各个领域的专家。

这个方向值得期待。


往期推荐:

AI编程教程列表
提示词工工程(Prompt Engineering)
LLMOPS(大语言模运维平台)
AI绘画教程列表
WX机器人教程列表


每次我都想提醒一下,这不是凡尔赛,是希望有想法的人勇敢冲。
我不会代码,我英语也不好,但是我做出来了很多东西,在文末的开源知识库可见。
我真心希望能影响更多的人来尝试新的技巧,迎接新的时代。

谢谢你读我的文章。
如果觉得不错,随手点个赞、在看、转发三连吧🙂
如果想第一时间收到推送,也可以给我个星标⭐~谢谢你看我的文章。

开源知识库地址:
https://tffyvtlai4.feishu.cn/wiki/OhQ8wqntFihcI1kWVDlcNdpznFf

相关文章
|
3月前
|
人工智能 前端开发 安全
从部署到落地:AI编程辅助工具全流程实操指南
在AI编程工具同质化日益明显的当下,一款开源可扩展、安全可控的AI编程辅助工具,成为适配个人开发者与中小团队的实用选择。它并非单纯的代码生成器,而是覆盖需求拆解、编码开发、代码Review全流程的AI研发基础设施,能够有效降低重复编码成本,提升开发效率。本文结合笔者两个多月的实操经验,分享其核心使用场景、可复现实战案例及客观使用心得
435 11
|
3月前
|
存储 人工智能 开发工具
Claude Code自动记忆来了!配合老金三层记忆系统全开源!加强Plus!
昨天晚上,老金我照例打开 Claude Code 准备写代码。 随便聊了几句项目架构,Claude突然冒出一句: "Based on our previous discussions, this project uses pnpm and TypeScript strict mode." 老金我愣了一下。 上次提到pnpm是三天前的事了,这中间重启了好几次。 打开 ~/.claude/p
|
3月前
|
人工智能 监控 API
Claude Code终于有仪表盘了:3条命令装个HUD,上下文用了多少一眼就知道
老金我最近用Claude Code,遇到一个特别烦的事。 写着写着,突然蹦出来一句"context window is getting full"。 然后AI就开始犯傻了——回答变短、逻辑变乱、之前说好的方案全忘了。 每次遇到这种情况,老金我都想骂人。 问题出在哪? Claude Code的终端界面,压根看不到上下文用了多少。 你只能输入 /context手动查,但谁写代码的时候
11909 9
|
3月前
|
数据采集 人工智能 自然语言处理
从“通才”到“专才”:揭秘AI大模型预训练与微调的核心魔法
本文通俗解析AI“预训练+微调”范式:预训练如AI的“基础教育”,让模型从海量数据中自学语言与视觉规律;微调则是定向“专业培训”,用少量业务数据将通用大模型转化为解决具体问题的“专属专家”。全程兼顾原理、步骤与实践,助力零基础用户轻松上手。(239字)
439 7
从“通才”到“专才”:揭秘AI大模型预训练与微调的核心魔法
|
3月前
|
Java 应用服务中间件 Shell
Apache Tomcat 历史版本下载地址 官网地址
本指南详解Tomcat (以7.0.67为例)的完整部署流程:从官网下载历史版本、解压安装,到启动/停止服务(startup.sh/shutdown.sh),再到配置开机自启(systemctl)。涵盖目录结构说明及端口验证方法,适合Linux服务器快速部署。
765 135
|
1月前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
39084 72
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
3月前
|
人工智能 运维 架构师
老金开源Agent Teams编排Skill:一句话自动组队,手动挡时代结束了
加我进AI讨论学习群,公众号右下角“联系方式” 文末有老金的 **开源知识库地址·全免费** --- 术语说明:"Swarm/蜂群"是多Agent协作的通用说法(OpenAI有官方项目叫Swarm),但 Claude Code的官方概念是Agent Teams。本文使用官方术语Agent Teams,保留"蜂群"作为通俗说明。 先说老金我昨儿开源了[老金开源10万字Claude Code中文
5065 10
老金开源Agent Teams编排Skill:一句话自动组队,手动挡时代结束了
|
4月前
|
人工智能 测试技术 开发者
AI Coding后端开发实战:解锁AI辅助编程新范式
本文系统阐述了AI时代开发者如何高效协作AI Coding工具,强调破除认知误区、构建个人上下文管理体系,并精准判断AI输出质量。通过实战流程与案例,助力开发者实现从编码到架构思维的跃迁,成为人机协同的“超级开发者”。
3252 106
|
3月前
|
人工智能 安全 测试技术
OpenClaw出事后开发者怒了,48小时造出省99%成本的AI技能共享系统-EvoMap
上周五(2月14号),OpenClaw创始人 Peter Steinberger 宣布加入OpenAI。 这个拥有20万+GitHub星的开源项目,创始人被OpenAI收编了。 但真正让开发者社区炸锅的,不是这件事本身。 而是同一天,ClawHub上大量中文开发者被集体封号。 封号理由极其荒谬——ClawHavoc恶意Skill事件后平台启动自动审核,大量中文开发者被误伤。 据反馈,系统把中文编码