前端工程师都在装的 Agent Skills：从设计到调试六大类盘点
Skill = 多步业务能力包；MCP Server = 底层工具能力（JSON-RPC）。主要用于 Claude Code、Cursor、Cline、OpenClaw——分UI 设计、React/Vue 工程、浏览器调试、代码审查、项目管理、外部集成六大类，一文标注热度、用途、痛点。
01 先搞懂：Skill、MCP、Function Calling 差在哪
2026 年前端圈聊 AI 编程，三个词最容易混：Function Calling、Skill、MCP Server。
面试常问，日常装插件也常搞混。一张表说清楚：
| 概念 | 是什么 | 类比 |
|---|---|---|
| Function Calling | 最小原子动作，调用单个函数 | 一把螺丝刀 |
| Skill | 编排多个 Function/Prompt，封装一套业务流程 | 整套工具箱 + 施工手册 |
| MCP Server | 底层协议服务，向外暴露 Tools/Resources；Skill 可以调用 MCP 提供的工具 | 供电插座 + 标准接口 |
和Rules的区别：
- Rules：始终加载的项目约束（「别用 any」「用 pnpm」）
- Skills：按需动态加载的专业经验包（「怎么做好 React 性能优化」）
Cursor 官方博客讲得很直白——Skills 让 Agent 在相关任务出现时才拉进上下文，既省 token，又在关键时刻「突然变专业」。
所有 Skill 都写在SKILL.md里，遵循 agentskills.io 开放格式。Vercel 的npx skillsCLI 像包管理器，从.agents/skills软链到~/.cursor/skills等目录，一次更新，所有 Agent 同步。
npx skillsfind"frontend"# 搜索npx skills list# 查看已安装npx skills update# 更新全部一句话总结：Rules 管「别乱来」，Skills 管「怎么做好」。
02 UI/UX 设计类：解决 AI 页面「模板化、AI 味儿重」
Skillselion 2026 年 8 月统计：当天增速最快的 7 个 Skill 搜索里，4 个是设计类，合计安装量超 166 万。Agent 早就能跑通页面了，现在抢的是——看起来像人认真设计过的界面。
| Skill/MCP | 来源 | 核心能力 | 适用场景 |
|---|---|---|---|
| frontend-design | Anthropic 官方 | 强制先定视觉风格、排版、留白、色彩体系，再输出代码，拒绝千篇一律 AI 页面 | Landing 页、仪表盘、组件、完整 Web 页面 |
| web-design-guidelines | Vercel Labs | Next.js / Web 设计规范、交互细节、可访问性 A11Y | 企业官网、B 端后台 |
| ui-ux-pro-max | 社区 | 60+ 套 UI 风格库、配色方案、组件范式 | 快速切换设计语言、原型 |
| canvas-design | Anthropic | Canvas / WebGL 可视化生成，图表、动画画布代码 | 大屏、数据可视化 |
frontend-design安装量约 76.8 万（skills.sh 快照），是目前最稳的默认选择。
npx skillsaddanthropics/skills--skillfrontend-design⚠️踩坑提醒：设计类 Skill 功能高度重叠，不要全装。Frontend Design 当默认安全牌；想要更激进审美，再试 Design Taste 或 Impeccable 其中一个。装 2～3 个只会互相抢上下文、烧 token。
03 React / Next.js 专项：前端最高热度
如果说设计 Skill 解决「好不好看」，vercel-react-best-practices解决「快不快、规不规范」——安装量约 54 万，Skillselion 前端开发类排名第一。
| Skill/MCP | 来源 | 能力 |
|---|---|---|
| vercel-react-best-practices | Vercel Labs | 70+ 条 React/Next 性能、组件、Hooks 规范；识别过度渲染、滥用 Effect、Hydration 坑 |
| zustand-patterns | 社区 | Zustand 状态管理最佳实践，避免全局状态滥用、Selector 优化 |
| tanstack-query-skill | 社区 | React Query 规范化，缓存策略、错误处理、分页样板代码 |
| nextjs-app-router-expert | 社区 | App Router、Server Component、Parallel Routes、缓存陷阱排查 |
Agent 写 React 组件时，会优先处理 async waterfall，而不是无脑堆 memo 和 useCallback——这是 Vercel Engineering 按实测影响排序的 70 条规则。
npx skillsaddvercel-labs/agent-skills--skillvercel-react-best-practices04 Vue / UniApp 生态
React 党装完上面那套，Vue 党也有自己的「三件套」：
| Skill | 能力 |
|---|---|
| vue3-composition-best-practice | Composable 封装、ref/reactive 误区、watch/watchEffect 规范 |
| uniapp-skill | UniApp 多端兼容、条件编译、App/小程序坑点、样式适配 |
| pinia-patterns | Pinia 模块化、持久化、状态拆分方案 |
国内做小程序、跨端的同学，uniapp-skill值得单独装——Agent 默认不太懂条件编译和 rpx 适配那些坑。
05 浏览器调试 & DOM（MCP 为主）
这类能力主要靠MCP Server，不是 Skill 文件——Agent 通过 JSON-RPC 直接操控浏览器。
| MCP Server | 能力 |
|---|---|
| chrome-devtools-mcp | 操控 Chrome：DOM 查看、Console、Network 抓包、元素审查、截图、自动化交互、复现线上 Bug |
| browser-agent-mcp（Vercel） | AI 驱动浏览器，访问网页、抓取、交互、测试页面流程 |
| frontend-performance-audit | Lighthouse 自动化，输出性能优化点：FCP、LCP、CLS、资源体积 |
排查线上 Bug、复现用户反馈时，chrome-devtools-mcp几乎是必装——比让 Agent「猜」Network 请求靠谱太多。
06 代码审查、质量、TS 专项
写完代码不算完，审查才是前端日常大头：
| Skill/MCP | 来源 | 能力 |
|---|---|---|
| frontend-code-review | Dify 开源 | TS/TSX/JS 代码审查：性能、安全、业务逻辑，给出具体行号 + 修复代码 |
| typescript-deep-audit | 社区 | TypeScript 类型漏洞，any 泛滥、泛型滥用、类型收窄问题修复 |
| eslint-auto-fix-skill | 社区 | 自动生成/修正 ESLint 配置，批量修复项目 Lint 问题 |
| context7-mcp⭐ | 社区 | 拉取框架官方最新文档，避免 AI 用过时 API（React、Vue、Vite 等） |
context7-mcp值得单独说：Agent 训练数据有滞后，React 19、Next.js 15 新 API 它可能还在用旧写法。这个 MCP 让 Agent 查官方文档再写代码，踩坑率直线下降。
07 项目工程 & 任务管理（Matt Pocock 系列）
GitHub 高星的Matt Pocock 系列 Skill，解决「大项目怎么不让 Agent 上下文爆炸」：
| Skill | 能力 |
|---|---|
| grill-me（mattpocock） | 「拷问 AI」，对方案做逆向评审，找出漏洞、边界 Case、遗漏需求，防设计缺陷 |
| handoff | 大项目任务拆分，把复杂需求拆成子任务，会话交接，防止上下文爆炸 |
| project-map | 生成项目架构地图，梳理目录结构、模块依赖，适合接手老前端项目 |
| monorepo-skill | PNPM/Turborepo 项目维护，依赖分析、包脚本、构建问题排查 |
grill-me搜索增速 +160%（Skillselion 2026.08）——很多人开始在写代码之前先让 AI 自证方案没问题，而不是写完再改。
08 外部工具集成 MCP
| MCP | 用途 |
|---|---|
| supercharged-figma-mcp | 读取/编辑 Figma 图层；设计稿转组件代码；批量导出资源（需 Figma Token） |
| git-mcp | AI 直接读 Git 历史、Diff、PR 评审、Commit 生成 |
| file-system-mcp | 安全本地文件读写，项目文件批量处理 |
设计和开发协作链路里，supercharged-figma-mcp能缩短「设计稿 → 代码」的往返——但 Token 配置别提交到 Git。
09 前端工程师常用组合推荐
不是装越多越好。下面四套是经过社区验证的「最小有效组合」：
组合 1：日常写页面（必装三件套）
frontend-design + vercel-react-best-practices + context7-mcp解决：AI 页面丑、写过时 API、React 写法不规范。
组合 2：排查 Bug / 线上复现
chrome-devtools-mcp + frontend-performance-audit组合 3：接手老项目 / 大型迭代
grill-me + handoff + project-map组合 4：Vue 技术栈
frontend-design + vue3-composition-best-practice + context7-mcp建议：先选一套组合跑一周真实项目，再按需加 Skill。上下文窗口就那么大，装多了 Agent 反而不知道听谁的。
写在最后
2026 年前端圈有个微妙变化：开发者不只是在装 Skill，还在装 MCP、装「品味」、装「拷问能力」。
Function Calling 是螺丝刀，Skill 是工具箱，MCP 是标准插座——三者配合，Agent 才能从「能跑」变成「能交付」。
Skills 不是银弹。Plan Mode 该用还得用，架构约束该写 AGENTS.md 还得写。