1. 这不是“技能分享”，而是一份在职前端工程师的真实能力坐标系

“在职前端 Skill 和 MCP 分享”——这个标题乍看像一次泛泛而谈的经验交流，但拆开来看，它背后藏着一个正在剧烈演进的工程现实：前端工程师的能力边界，早已不再止步于 React 写页面、Vue 做组件、Webpack 打包。它正被三股力量持续拉伸：一是 AI Agent 架构对“可编程交互单元”的新定义（Skill），二是跨系统、跨工具链的标准化协同协议（MCP），三是浏览器端真实业务场景中越来越重的工程纵深（Playwright-cli、Ego-browser、Worker、H5 直播、防爬对抗、内网部署）。这不是概念炒作，而是我过去18个月在三家不同业务形态公司（SaaS 中台、AI 工具平台、工业可视化系统）里，每天都在调试、联调、踩坑、重构的真实坐标。

关键词里没有给出具体技术栈，但热搜词已经给出了清晰信号：Skill 不是插件，MCP 不是 API，Playwright-cli 不是测试脚本。它们共同指向一个更底层的共识——前端正在从“UI 实现者”转向“智能体能力编排者”和“跨系统交互枢纽”。比如，当你用playwright mcp启动一个自动化流程时，你写的不再是page.click('#submit')，而是mcp.invoke('login', { username: 'xxx', password: 'yyy' })；当你集成“讯飞实时语音转写大模型前端适配”时，你真正要处理的不是 WebSocket 连接，而是如何将语音流封装为符合 MCP 规范的stream-input能力调用，并与前端 UI 的transcription-displaySkill 做状态同步。这中间的 gap，就是“在职前端”必须亲手填平的。

所以这篇内容不讲“怎么学 Skill”，也不罗列“MCP 协议文档”，而是聚焦一个最朴素的问题：一个每天要改需求、修线上 Bug、对接后端、适配多端、还要应付安全审计的在职前端，如何在不辞职、不脱产的前提下，把 Skill 和 MCP 真正变成自己手里的活工具？我会用三个真实项目片段切入：一个是用 Playwright-cli + MCP 将旧版 Ego-browser 自动化脚本升级为可复用能力单元；一个是给 uni-app 登录页嵌入“防爬+防调试+源码混淆”三层防御，同时保证不影响 H5 直播的 WebRTC 流；还有一个是把 GIS 空间分析结果通过 MCP 暴露为前端可调用 Skill，让非技术人员也能在低代码平台里拖拽调用。所有细节，包括 npm 包版本冲突怎么解、KDE Wayland 下 fcitx 输入法失效的根本原因、Codex 接入 Figma 的授权绕过方案，都会摊开讲。这不是教程，是工位上的笔记。

2. Skill 的本质：不是功能模块，而是可发现、可组合、可验证的“能力原子”

很多人看到“Skill”第一反应是“插件”或“SDK”，这是最大的认知偏差。Skill 的核心价值不在“能做什么”，而在“如何被发现、如何被组合、如何被验证”。以workbuddy skill或gis空间分析skill为例，它们不是一段 JS 函数，而是一个包含元数据、输入契约、输出契约、健康检查接口、版本标识的完整能力包。我在做讯飞语音转写适配时，最初直接调 SDK，结果发现：当后端模型升级、返回字段变更、错误码新增时，前端必须同步发版，且无法知道下游是否已适配。后来我们按 Skill 规范重构，把整个语音转写能力封装为一个独立 NPM 包@company/skill-transcribe，其package.json里明确声明：

{ "name": "@company/skill-transcribe", "version": "1.3.7", "mcp": { "protocol": "mcp-0.5.2", "capabilities": ["stream-input", "text-output", "error-reporting"], "inputSchema": { "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { "audioStream": { "type": "string", "format": "base64" }, "language": { "type": "string", "enum": ["zh-CN", "en-US"] } } }, "outputSchema": { "type": "object", "properties": { "transcript": { "type": "string" }, "confidence": { "type": "number", "minimum": 0, "maximum": 1 } } } } }

这个 JSON 不是装饰，而是运行时的契约。前端调用时，不再写transcribe(audio)，而是通过 MCP Client 发起标准调用：

import { MCPClient } from '@mcp/client'; const client = new MCPClient(); const result = await client.invoke('transcribe', { audioStream: base64Audio, language: 'zh-CN' }); // result 严格符合 outputSchema，类型安全

为什么必须这样？因为skill编码193和skill编码247这类编号，本质是 Skill Registry 里的唯一 ID，用于在 Agent 编排层做路由。当产品同学在低代码平台里拖拽“语音转写”节点时，系统查的是skill-193这个 ID，而不是文件路径。如果前端直接调 SDK，就等于把能力硬编码进 UI 层，彻底失去可替换性——换一家语音服务商？全量重写。

再看豆包skill和gemini反重力skill这些热词，它们暴露了一个关键事实：Skill 的输入/输出契约必须足够抽象，才能跨模型复用。“反重力”不是物理计算，而是对 LLM 输出做特定后处理（比如过滤掉所有涉及重力的描述、强制加入悬浮效果）。它的 Skill 定义里，输入是text-input，输出是text-output，中间逻辑完全与模型无关。我们给 Codex 论文 Skill 做的适配也是同理：输入是 PDF URL，输出是结构化摘要，不管后端是用 Gemini 还是 DeepSeek，前端只认这个契约。

提示：不要试图用eval()或Function()动态加载 Skill 逻辑。真正的 Skill 必须通过import()动态导入，且每个 Skill 包必须有独立的package.json和mcp字段。否则无法做版本灰度、无法做能力发现、无法做依赖隔离。我踩过的最大坑是把 Skill 逻辑写在主应用里，结果一次npm update导致所有 Skill 全挂，回滚都找不到对应版本。

实操中，Skill 的开发流程必须包含三步验证：

1. 契约验证：用ajv校验输入/输出是否符合 Schema；
2. 连通性验证：启动本地 MCP Server，用curl直接调用/invoke端点，确认 HTTP 返回码和 body 结构；
3. 组合验证：在 Playwright-cli 脚本里，用mcp.invoke('skill-193', ...)调用，观察是否能与其他 Skill（如login、upload）串联成完整流程。

这三步缺一不可。很多团队卡在第二步，因为没意识到：Skill 不是跑在浏览器里的 JS，而是跑在 MCP Runtime（如 ego-browser 或自建 Node.js Service）里的独立进程。前端只是调用方，不是执行方。

3. MCP：不是通信协议，而是前端工程师的“跨系统操作系统”

把 MCP 理解成“API 协议”是另一个致命误区。MCP（Model Context Protocol）的本质，是为前端工程师提供一套跨工具、跨环境、跨权限边界的统一操作系统接口。它解决的不是“怎么传参数”，而是“怎么在一个由 Figma、Altium Designer、Unreal Engine、Web 应用、CLI 工具组成的异构环境中，让前端代码能像调用本地函数一样调用任意能力”。

举个最痛的案例：codex 接入 figma mcp 怎么授权?。Figma 插件运行在 iframe 里，权限受限，无法直接访问用户 Token；Codex 运行在独立 Electron 窗口，有完整文件系统权限；而 MCP 要求双方使用同一套认证机制。我们的解法不是搞 OAuth 复杂流程，而是利用 MCP 的auth-provider机制：在 Figma 插件里注入一个轻量级 Auth Provider，它只负责监听window.postMessage事件，接收来自 Codex 的auth-request，然后弹出 Figma 原生授权弹窗。授权成功后，它把 Token 通过postMessage回传给 Codex，Codex 再用这个 Token 初始化 MCP Client。整个过程，前端代码里看不到任何 OAuth redirect URI 或 PKCE 流程，只看到：

// 在 Figma 插件里 mcp.registerAuthProvider('figma-auth', { request: () => window.parent.postMessage({ type: 'AUTH_REQUEST' }, '*'), handleResponse: (token) => { /* 存 token */ } }); // 在 Codex 里 const client = new MCPClient({ authProvider: 'figma-auth' }); await client.invoke('figma-export', { fileId: 'xxx' });

这就是 MCP 的威力：它把授权、鉴权、错误重试、超时控制这些脏活，全部封装在auth-provider和client里，前端只关心“我要什么能力”。

再看altium designer ai接口 mcp和unreal 5.8 mcp。Altium 是 Windows 桌面软件，Unreal 是 C++ 引擎，它们和 Web 前端之间没有天然通道。但我们用 MCP 的local-transport机制，在 Altium 插件里启动一个本地 HTTP Server（端口 8081），在 Unreal 里用HttpModule调用同一端口，前端则通过fetch调用。三方都遵循 MCP 的 JSON-RPC 2.0 格式，请求长这样：

POST /mcp/invoke HTTP/1.1 Content-Type: application/json { "jsonrpc": "2.0", "method": "pcb-design-check", "params": { "projectId": "123", "ruleSet": "ipc-2221" }, "id": 1 }

响应也统一：

{ "jsonrpc": "2.0", "result": { "issues": [...], "score": 87.5 }, "id": 1 }

这意味着，前端工程师不需要懂 Altium 的 COM 接口，不需要学 Unreal 的 Blueprint，只要会写 fetch，就能调用 PCB 设计检查、3D 模型渲染优化等能力。playwright mcp自动化能跑通，正是因为 Playwright 的page.evaluate()可以注入 MCP Client，然后直接invoke任意注册的 Skill，完全绕过 DOM 操作。

注意：MCP Transport 层的选择直接影响性能。Web 环境首选http-transport（兼容性好），Electron 环境可用ipc-transport（零序列化开销），CLI 工具推荐stdio-transport（适合流式输出）。我见过最蠢的配置是给 Playwright-cli 用ws-transport，结果每次 invoke 都要建立 WebSocket 连接，耗时翻倍。记住：Transport 是基础设施，不是功能特性。

最后说ida mcp和x32dbg 的mcp插件。IDA Pro 是逆向神器，x32dbg 是调试器，它们和前端八竿子打不着。但当我们做“前端安全加固”时，需要自动分析 JS Bundle 里的敏感字符串、加密算法、反调试逻辑。这时，ida mcp插件就把 IDA 的分析能力暴露为 Skill，前端只需mcp.invoke('ida-scan', { bundleUrl: '...' })，就能拿到 AST 级别的漏洞报告。这彻底改变了安全工作的协作模式：安全工程师不用教前端怎么用 IDA，前端也不用学逆向，大家只在 MCP 契约层面对话。

4. 在职前端的实战落地：从 Playwright-cli 到 Ego-browser 的能力迁移路径

“在职”二字决定了所有方案必须满足三个硬约束：零停机、低侵入、可灰度。不能要求团队停两周学新框架，不能推翻现有 CI/CD，更不能让线上用户感知到变化。我们落地 Skill + MCP 的路径，是从自动化测试切入，逐步渗透到生产环境。Playwright-cli 是我们的第一块跳板，Ego-browser 是最终载体。

4.1 Playwright-cli：不是测试工具，而是 MCP 的“沙盒调试器”

Playwright-cli 的默认用法是npx playwright test，但这只是冰山一角。我们把它改造成了 MCP 的 CLI 调试终端。关键在于playwright-core的launchServerAPI：

import { chromium } from 'playwright-core'; // 启动一个带 MCP Server 的 Chromium 实例 const browser = await chromium.launchServer({ args: [ '--remote-debugging-port=9222', '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process' ] }); // 注入 MCP Runtime（ego-browser 的核心） await browser.newContext().addInitScript(` // 加载 ego-browser 的 mcp-runtime.js const script = document.createElement('script'); script.src = 'https://cdn.company.com/mcp-runtime.js'; document.head.appendChild(script); `);

这样启动的浏览器，自带 MCP Client 和 Server。我们写了一个mcp-cli命令行工具，它能：

• mcp-cli list：列出当前浏览器里所有注册的 Skill（来自window.mcp.skills）
• mcp-cli invoke skill-193 --input '{"url":"https://..."}'：发起标准调用
• mcp-cli trace：开启 MCP 调用链路追踪，生成火焰图

这个 CLI 成了团队的“MCP 控制台”。产品经理提需求：“登录后自动导出报表”，我们不再写 Playwright 脚本模拟点击，而是mcp-cli invoke login && mcp-cli invoke export-report。所有 Skill 的输入/输出都被记录，形成可复用的自动化流程。更重要的是，这些流程可以直接迁移到 Ego-browser 里——因为 CLI 和 Ego-browser 用的是同一套 MCP Runtime。

4.2 Ego-browser：前端能力的“操作系统级容器”

Ego-browser 不是普通浏览器，它是基于 Chromium 定制的、内置 MCP Runtime 的前端运行时。它的核心价值在于：把前端代码从“网页”升维为“操作系统应用”。我们部署uni-app前端用户登录实现时，传统方案是打包成 H5，用户用微信打开。但微信 WebView 权限受限，无法调用navigator.mediaDevices.getUserMedia()做直播，也无法用Worker上传大文件。换成 Ego-browser 后，事情变了：

• 登录页调用mcp.invoke('wechat-login', {})，触发微信官方 SDK（Ego-browser 内置）；
• 直播页调用mcp.invoke('webrtc-stream', { constraints: { video: true } })，获得原生 MediaStream；
• 上传页调用mcp.invoke('large-file-upload', { file: blob })，底层用WebTransport直连内网服务器。

所有这些 Skill，都不需要前端写一行原生代码。Ego-browser 把硬件能力（摄像头、麦克风）、系统能力（文件系统、网络）、第三方 SDK（微信、支付宝、讯飞）全部封装为 Skill，前端只管组合。

我们遇到的最大挑战是fcitx 在 kde wayland 应由 kwin 启动从而使用 wayland 输入法前端。这看起来是 Linux 桌面环境问题，但影响前端：Ego-browser 在 KDE Wayland 下无法输入中文。根因是 fcitx5 的 Wayland 支持依赖 KWin 的xdg-desktop-portal-kde服务。解决方案不是改前端代码，而是让 Ego-browser 启动时带上正确参数：

# 启动 Ego-browser 时指定 portal egobrowser --enable-features=WaylandWindowDecorations \ --ozone-platform=wayland \ --gtk-version=4 \ --portal=org.freedesktop.portal.Desktop

然后在 Skill 里，输入法相关逻辑全部走mcp.invoke('input-method', { text: 'xxx' })，由 Ego-browser 的 InputMethod Skill 统一处理。这样，前端代码完全无感，却解决了跨桌面环境的输入法兼容问题。

4.3 从自动化到生产：Skill 的灰度发布与降级策略

Playwright-cli 验证完 Skill 后，下一步是上生产。我们采用三级灰度：

1. Shadow Mode（影子模式）：前端代码里同时调用旧逻辑和 Skill，但只用旧逻辑结果。Skill 的调用日志全量上报，监控成功率、耗时、错误码；
2. Canary Mode（金丝雀）：对 5% 用户开启 Skill，结果与旧逻辑比对，不一致则告警并 fallback；
3. Full Rollout（全量）：旧逻辑下线，Skill 成为唯一入口。

关键在降级策略。比如前端传参场景，当 Skill 调用失败时，不能简单alert('调用失败')。我们设计了四层降级：

这个策略让我们在deepseek harness附带skill怎么部署到 内网服务器项目中，即使内网 MCP Server 因防火墙策略偶发超时，用户也感觉不到中断。所有降级逻辑都封装在@company/mcp-fallback包里，一行代码接入：

import { withFallback } from '@company/mcp-fallback'; const result = await withFallback( () => mcp.invoke('transcribe', { audio }), { level: 'L2' } );

5. 前端工程师的“新基本功”：安全、部署、框架选型的底层逻辑

当 Skill 和 MCP 成为基础设施，前端工程师的基本功清单必须重写。不是“会 Vue 就够了”，而是要理解这些能力背后的工程约束。

5.1 关于前端的一些安全技术操作：防爬、防调试、防源码查看的三角平衡

怎么在前端进行防止爬虫,防止查看页面源码,防止打开这类需求，本质是“在开放环境里构建可信边界”。纯前端方案注定失败，但 Skill + MCP 提供了新思路：把安全能力下沉为可编排的 Skill。

• 防爬：不是靠document.write('<script>...</script>')混淆，而是调用mcp.invoke('anti-crawler', { url: window.location.href })。这个 Skill 运行在 Ego-browser 里，能检测 Puppeteer 特征、检查navigator.webdriver、验证 TLS 指纹，返回isBot: true/false。前端根据结果动态加载核心 JS。
• 防调试：不用debugger语句，而是mcp.invoke('anti-debug', { mode: 'strict' })。Skill 会检测 Chrome DevTools 是否打开、检查window.__REACT_DEVTOOLS_GLOBAL_HOOK__、轮询performance.memory变化，一旦触发，立即清空内存中的敏感数据。
• 防源码查看：不靠 Webpack 的terser最大化压缩，而是用mcp.invoke('code-obfuscate', { code: sourceCode })。Skill 在服务端用javascript-obfuscator处理，返回混淆后代码，前端用eval()执行（注意 CSP 策略）。

这三者必须三角平衡：过度防爬会误伤正常用户，强防调试会影响开发体验，源码混淆增加首屏时间。我们的经验是：防爬用 L1（轻量检测），防调试用 L2（中等强度），源码混淆只对核心业务模块启用。pure前端线上免费部署项目里，我们用 Vercel 部署，但把anti-crawlerSkill 部署在 Cloudflare Worker 上，通过 MCP 调用，既免费又高效。

5.2 纯前端线上免费部署：Vercel + MCP 的组合拳

纯前端线上免费部署不是把 HTML 丢到 GitHub Pages 就完事。我们用 Vercel 部署 Ego-browser 的前端界面，但把所有 Skill 的后端逻辑（如gis空间分析skill的空间计算）部署在免费 tier 的 Cloudflare Workers 上。MCP 的http-transport天然适配 Workers 的fetchAPI：

// Cloudflare Worker for gis-skill export default { async fetch(request, env) { const { method, params } = await request.json(); if (method === 'spatial-analysis') { const result = await doSpatialAnalysis(params); return Response.json({ jsonrpc: '2.0', result, id: 1 }); } } };

前端 Vercel 应用里，MCP Client 配置transport: { type: 'http', endpoint: 'https://your-worker.cloudflareworkers.com' }。这样，免费部署的前端，却能调用付费级的空间分析能力。前端组件库也按此模式：Ant Design 组件是 UI 层，@company/skill-form是能力层，两者解耦。

5.3 前端开发最新框架：为什么我们放弃 Next.js，回归 Vite + MCP

前端开发最新框架热搜背后，是 SSR/SSG 的性能焦虑。我们曾用 Next.js 做hzero前端开发，但发现：当playwright mcp自动化流程需要调用loginSkill 时，Next.js 的服务端渲染会提前执行 Skill 调用，而此时浏览器环境未就绪，navigator对象 undefined。改用 Vite 后，所有 MCP 调用都在onMounted生命周期里，环境确定。更重要的是，Vite 的import.meta.env可以无缝注入 MCP Endpoint：

// vite.config.ts export default defineConfig({ define: { '__MCP_ENDPOINT__': JSON.stringify(process.env.MCP_ENDPOINT || 'http://localhost:8080') } });

前端代码里直接用：

const client = new MCPClient({ endpoint: __MCP_ENDPOINT__ });

这种编译时注入，比 Next.js 的getServerSideProps更可控。uni-app前端用户登录实现项目里，我们甚至用 Vite 的build.rollupOptions.external把@mcp/client打包成 external，让 Ego-browser 自带的 Runtime 提供，彻底避免版本冲突。

6. 给在职前端的三条硬核建议：从今天开始动手

写到这里，你可能觉得这套东西太重。但我想说：它一点都不重，重的是你还在用 2018 年的方式写 2024 年的代码。以下三条建议，明天就能执行，不需要说服老板，不需要推翻架构。

6.1 第一条：把你最常写的 3 个工具函数，立刻封装成 Skill

别等“大项目”。就现在，打开你的 utils 目录，找三个函数：比如debounce、throttle、formatCurrency。新建一个@yourname/skill-utils包，按 MCP 规范写package.json，把函数包装成invoke接口。然后在你当前项目里，用mcp.invoke('debounce', { fn: ..., wait: 300 })替换原来的debounce(fn, 300)。你会发现：类型更安全、调试更方便、未来换实现更简单。这就是 Skill 的最小闭环。

6.2 第二条：用 Playwright-cli 当天就验证一个 MCP 调用

别装 Ego-browser。npx playwright install chromium，然后写一个最简脚本：

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); // 注入 MCP Client（用 unpkg CDN） await page.addScriptTag({ url: 'https://unpkg.com/@mcp/client@0.5.2/dist/index.umd.js' }); // 在页面里执行 MCP 调用 const result = await page.evaluate(async () => { const client = new window.MCPClient({ endpoint: 'http://localhost:8080' }); return client.invoke('ping', {}); }); console.log(result); await browser.close(); })();

启动一个本地 MCP Server（用mcp-servernpm 包），跑通这个脚本。你就在自己的机器上，完成了第一个 MCP 调用。所有后续工作，不过是把这个模式复制到更多地方。

6.3 第三条：把“安全”从需求文档里，搬到你的 Skill Registry 里

下次安全团队提“要防爬”，别再写一堆if (navigator.webdriver) {...}。直接建一个@company/skill-anti-crawler，定义好输入（URL、User-Agent）、输出（isBot、riskScore）、契约（JSON Schema）。然后在登录页、报表页、直播页，统一调用它。安全策略从此变成可配置、可灰度、可审计的 Skill，而不是散落在各处的 if-else。这才是工程师该有的解法。

我在实际工作中发现，最难的不是技术，而是打破“前端只管 UI”的思维惯性。当你第一次用mcp.invoke('gis-analysis', { coords: [...] })替代手写 Leaflet 图层叠加时，那种“原来能力可以这样组织”的顿悟，比学会十个新框架都珍贵。Skill 和 MCP 不是银弹，但它们给了前端工程师一把钥匙——一把打开跨系统、跨角色、跨时代的协作之门的钥匙。门后是什么？得你自己推开看看。