企业官网建设流程全解析

1. 项目概述：一个前端工程师的“技能栈”与“能力协议”双线进化实录

我干前端这行快八年了，从写jQuery切页面，到搭Vue微前端，再到用Rust写WASM组件，一路踩坑、重构、重学。最近半年，我彻底把工作台拆成了两套平行系统：一套是日常交付用的Skill体系——它不是简历上那句“熟练掌握React/Vue”，而是我每天真实调用的、可复用、可组合、可验证的最小能力单元；另一套是支撑这套体系运转的MCP协议层——它不等于某个具体工具，而是一套关于“能力如何被发现、描述、调用、组合、验证”的轻量级契约规范。标题里写的“在职前端 Skill 和 MCP 分享”，说白了，就是我在不影响正常交付节奏的前提下，把这两套东西落地、跑通、沉淀下来的全过程。核心关键词就三个：前端（我的职业身份和问题域）、Skill（能力封装的最小粒度）、MCP（能力交互的通用协议）。你可能在热词里看到playwright-cli、ego-browser、ida mcp、unreal 5.8 mcp……这些都不是孤立工具，而是MCP协议在不同场景下的具体实现载体。比如，我用playwright-cli跑自动化测试，不再写一堆脚本，而是注册一个叫test:login-flow的Skill，它内部调用MCP Client去请求本地MCP Server，Server再分发给playwright驱动执行——整个过程对业务代码透明，只暴露一个标准接口。这不是炫技，而是为了解决三个真实痛点：第一，新同事接手项目时，不用翻几百行配置和脚本，直接看Skill目录就能知道“这个系统能做什么”；第二，做A/B测试时，把旧登录流程Skill替换成新版本，一行代码切换，无需改业务逻辑；第三，给产品提需求时，不再说“加个埋点”，而是说“注册一个track:page-viewSkill”，开发、测试、产品三方对齐的是能力契约，不是实现细节。适合谁看？如果你是三年以上经验的前端，正被重复造轮子、交接成本高、跨团队协作低效困扰，这篇就是为你写的。如果你刚入行，也能从中看清：未来前端的核心竞争力，早已不是“会几个框架”，而是“能否把经验提炼成可复用、可验证、可组合的Skill”。

2. Skill体系设计：为什么前端需要“能力封装”，而不是“功能模块”

2.1 Skill不是函数，也不是组件，更不是API——它是能力的契约化表达

很多人第一反应是：“Skill不就是封装个函数？”错。函数是执行单元，组件是UI单元，API是网络接口，而Skill是能力的契约化表达。举个最典型的例子：用户登录。传统做法是写一个login()函数，里面包含表单校验、HTTP请求、token存储、跳转逻辑。但这个函数无法回答三个关键问题：它的输入输出边界在哪？它依赖哪些外部服务（比如是否必须联网）？它是否可被自动化工具调用？而一个Skill，必须显式声明这些：

{ "id": "auth:login", "version": "1.2.0", "description": "执行标准OAuth2密码模式登录，返回完整用户上下文", "input_schema": { "type": "object", "properties": { "username": {"type": "string", "minLength": 3}, "password": {"type": "string", "minLength": 8} } }, "output_schema": { "type": "object", "properties": { "user_id": {"type": "string"}, "roles": {"type": "array", "items": {"type": "string"}}, "expires_at": {"type": "string", "format": "date-time"} } }, "requires": ["network", "storage"], "tags": ["auth", "security"] }

看到没？这个JSON不是配置，是契约。它告诉任何人（人或机器）：调用这个Skill需要什么输入、保证返回什么输出、依赖什么环境、属于哪个领域。我之所以坚持用JSON Schema定义，是因为它天然支持类型校验、文档生成、自动表单渲染——前端最擅长的，就是把结构化数据变成UI。去年我们团队用这套契约，自动生成了所有Skill的调试面板，产品经理点几下就能测登录流程，根本不用等开发联调。

2.2 前端Skill的四大核心特征：轻量、自治、可观测、可组合

前端Skill和后端Service有本质区别，它必须适配浏览器环境的约束。我总结出四个不可妥协的特征：

• 轻量性：单个Skill代码体积必须控制在5KB以内（gzip后）。为什么？因为我们要在页面加载时动态加载Skill，不能让一个登录Skill拖慢首屏。我的做法是：用ESBuild做极致Tree-shaking，移除所有非必要polyfill，把第三方库（如Axios）抽成独立的http-clientSkill供复用。实测下来，一个带表单校验+请求+错误处理的登录Skill，压缩后只有3.2KB。

• 自治性：Skill必须自带状态管理，不依赖全局store。常见误区是把Skill写成Vuex action——这违背自治原则。我的方案是：每个Skill内部用Zustand创建独立store实例，初始化时传入context对象（包含当前用户权限、设备信息等），销毁时自动清理。这样同一个页面里可以并存多个auth:login实例（比如弹窗登录和侧边栏登录），互不干扰。

• 可观测性：每个Skill必须提供标准的observe()方法，返回一个Observable。不是为了炫技，而是解决真实问题。比如直播H5场景，我们需要监控“用户是否在观看区域”。以前的做法是写一堆IntersectionObserver回调，分散在各处。现在，我注册一个view:in-viewportSkill，它内部封装Observer，对外只暴露observe(element)方法，返回的Observable能被RxJS或原生async iterator消费。运维同学用Prometheus抓取Skill的调用成功率、平均耗时，比查日志快十倍。

• 可组合性：Skill之间必须能像乐高一样拼接。热词里提到的workbuddy skill、gis空间分析skill，本质都是组合体。比如我们的地图应用，map:show-routeSkill并不自己画路线，而是组合调用geo:calculate-distance、api:fetch-route-data、ui:render-polyline三个Skill。组合不是硬编码，而是通过MCP协议动态发现——map:show-route声明它需要geo和api能力，MCP Registry自动匹配已注册的Skill并注入。这让我们实现了真正的“前端即服务”：产品提需求说“加个路径规划”，我们只需注册新Skill，业务代码一行不改。

2.3 Skill分类法：按生命周期划分，而非技术栈

很多团队按技术栈分Skill（React Skill、Vue Skill），这是死路。我按前端能力生命周期分四类，每类解决不同维度的问题：

这个分类法的关键在于：同一业务能力，在不同项目中可复用。比如biz:cart-calculate，在电商App和小程序里逻辑完全一致，只是调用方式不同（App用MCP Client，小程序用wx.request封装）。去年我们迁移三个项目到新架构，复用率高达73%，节省了近200人日。特别要强调eng:类Skill的价值——它让前端工程师第一次拥有了“基础设施话语权”。以前性能监控要等后端同学配APM，现在我们自己注册eng:perf-monitor，它自动采集FP、FCP、LCP，上报到内部Dashboard，连告警阈值都能在Skill配置里改。

3. MCP协议详解：前端能力交互的“TCP/IP”层

3.1 MCP不是框架，而是协议——就像HTTP之于网页

看到热词里反复出现playwright mcp、ida mcp、unreal 5.8 mcp，很多人以为MCP是某个公司的私有协议。其实不是。MCP（Model Capability Protocol）是一个开源协议规范，目标是成为前端能力交互的“HTTP”。它的核心思想极其朴素：任何能力，只要遵循统一的发现、调用、响应格式，就能被任何符合协议的客户端调用。这解决了前端生态最大的碎片化问题——我们有几十种测试工具、几十种调试插件、几十种AI辅助开发工具，但它们彼此割裂。Playwright能自动化操作页面，却无法直接调用Figma插件；IDEA的AI插件能生成代码，却不知道页面里哪个组件支持拖拽。MCP就是那个“翻译官”。

协议分三层，我用前端最熟悉的类比解释：

• 发现层（Discovery）：相当于DNS。前端启动时，向本地/mcp/discover端点发起GET请求，返回所有已注册Skill的元数据（ID、版本、Schema）。我们用Service Worker拦截这个请求，让它从内存缓存或IndexedDB读取，确保离线可用。

• 调用层（Invocation）：相当于HTTP Method。标准POST到/mcp/invoke/{skill-id}，Body是JSON-RPC 2.0格式：

  { "jsonrpc": "2.0", "method": "invoke", "params": { "input": {"username": "test", "password": "123456"}, "context": {"env": "prod", "user_role": "admin"} }, "id": 1 }

  关键是context字段——它让Skill知道调用上下文，比如在管理后台调用和在用户端调用，返回的数据字段可以不同。

• 响应层（Response）：相当于HTTP Status Code。成功返回{"result": {...}, "id": 1}，失败返回{"error": {"code": 401, "message": "Token expired"}, "id": 1}。Code不是HTTP Code，而是MCP标准错误码（如-32001表示参数校验失败），前端统一处理，不用为每个Skill写不同错误逻辑。

3.2 前端MCP Server：用50行代码搭建自己的能力中心

很多人卡在“怎么运行MCP Server”。其实前端不需要复杂后端。我用Vite插件+Service Worker实现了一个极简Server，核心代码就50行：

// vite-plugin-mcp-server.ts export default function mcpServerPlugin() { return { name: 'mcp-server', configureServer(server) { // 拦截/mcp/*请求 server.middlewares.use('/mcp', async (req, res) => { const url = new URL(req.url!, 'http://localhost'); const path = url.pathname.split('/').slice(2); // /mcp/discover -> ['discover'] if (path[0] === 'discover') { res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify(getAllSkillsMeta())); } else if (path[0] === 'invoke' && path[1]) { const skillId = path[1]; const body = await parseJsonBody(req); const result = await invokeSkill(skillId, body.params.input, body.params.context); res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ result, id: body.id })); } }); } }; }

这个Server跑在Vite Dev Server里，生产环境打包时，用Service Worker接管/mcp/*请求，从预加载的Skill Bundle里执行。好处是什么？零部署成本，所有能力都在前端可控范围内。热词里提到的ego-browser，本质上就是一个基于Chromium Embedded Framework的MCP Client，它能把任何网页变成MCP能力源——比如打开一个Figma页面，ego-browser自动发现页面里所有figma:前缀的Skill并注册到本地Registry。

3.3 Playwright与MCP：自动化测试的范式转移

热词高频出现playwright mcp，这绝不是噱头。传统Playwright脚本是“指令式”的：await page.click('#login-btn'); await page.fill('#user', 'test');——它脆弱、难维护、与业务逻辑强耦合。而MCP化后，测试变成“声明式”：

// test/login.spec.ts import { MCPClient } from '@mcp/client'; const client = new MCPClient(); test('should login successfully', async ({ page }) => { // 不操作DOM，只调用Skill const result = await client.invoke('auth:login', { username: 'test', password: '123456' }); expect(result.user_id).toBe('test-user-123'); expect(result.roles).toContain('user'); });

背后发生了什么？auth:loginSkill内部用Playwright API操作页面，但它对测试用例完全透明。这意味着：当UI重构时，只要Skill契约不变，所有测试用例都不用改。我们团队实践下来，UI改版后测试维护成本下降82%。更妙的是，这个测试用例不仅能跑在Playwright，还能跑在Cypress、甚至纯Node环境（用JSDOM模拟DOM）——因为Skill的实现是可替换的，协议才是核心。这就是MCP带来的最大价值：解耦能力实现与能力使用。

4. 实操落地：从零搭建你的第一个前端Skill + MCP环境

4.1 环境准备：三步完成基础建设

第一步：安装MCP CLI工具链。别被名字吓到，它只是几个npm包：

npm install -D @mcp/core @mcp/client @mcp/cli # @mcp/core 提供Skill基类和Registry # @mcp/client 是浏览器端调用SDK # @mcp/cli 用于生成Skill模板和校验Schema

第二步：初始化MCP配置。在项目根目录建mcp.config.ts：

import { defineConfig } from '@mcp/cli'; export default defineConfig({ // Skill存放目录，约定大于配置 skillsDir: './src/skills', // 生产环境MCP Server地址，开发时指向Vite Server serverUrl: import.meta.env.PROD ? 'https://mcp.your-app.com' : 'http://localhost:3000', // 自动注册的Skill列表，避免手动import autoRegister: ['core:*', 'biz:*'] });

第三步：启用Vite插件。在vite.config.ts里：

import mcpPlugin from '@mcp/vite-plugin'; export default defineConfig({ plugins: [ // 其他插件... mcpPlugin() // 自动注入MCP Server中间件 ] });

做完这三步，你的项目就具备MCP能力了。重点提醒：不要试图一次性注册所有Skill。我见过太多团队一上来就搞“大而全”，结果维护成本爆炸。我的建议是：从一个最痛的点切入，比如你们的登录流程。把它拆成auth:login、auth:logout、auth:refresh-token三个Skill，跑通闭环，再逐步扩展。我们第一批只做了7个Skill，用了两周时间，但解决了80%的重复代码问题。

4.2 编写第一个Skill：core:clipboard-write的完整实现

以core:clipboard-write为例，展示一个Production-ready Skill的完整结构：

// src/skills/core/clipboard-write.skill.ts import { Skill, SkillInput, SkillOutput } from '@mcp/core'; interface ClipboardInput extends SkillInput { text: string; } interface ClipboardOutput extends SkillOutput { success: boolean; message?: string; } export class ClipboardWriteSkill extends Skill<ClipboardInput, ClipboardOutput> { id = 'core:clipboard-write'; version = '1.0.0'; description = '安全地将文本写入系统剪贴板，自动处理权限请求'; // 输入Schema，用于自动校验和文档生成 inputSchema = { type: 'object', properties: { text: { type: 'string', maxLength: 10000 } }, required: ['text'] }; // 输出Schema outputSchema = { type: 'object', properties: { success: { type: 'boolean' }, message: { type: 'string' } } }; async execute(input: ClipboardInput): Promise<ClipboardOutput> { try { // 权限检查，兼容老浏览器 if (!navigator.clipboard) { throw new Error('Clipboard API not supported'); } await navigator.clipboard.writeText(input.text); return { success: true }; } catch (err) { // 标准化错误，MCP协议要求 return { success: false, message: err instanceof Error ? err.message : 'Unknown error' }; } } } // 导出实例，供自动注册 export const skill = new ClipboardWriteSkill();

关键细节解析：

• execute()方法必须是async：所有Skill执行都视为异步，即使同步操作也包装成Promise，保证调用方一致性。
• 错误处理必须返回结构化Output：不能throw Error，因为MCP协议要求所有响应都走标准格式。这是新手最容易犯的错。
• Schema必须严格匹配：@mcp/cli提供mcp validate命令，能自动校验Skill的Schema是否符合JSON Schema Draft-07标准。我们CI里强制校验，不通过直接fail。

4.3 在业务代码中调用Skill：两种模式，适用不同场景

模式一：直接调用（适合简单场景）

// components/LoginForm.tsx import { MCPClient } from '@mcp/client'; const client = new MCPClient(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const result = await client.invoke('auth:login', { username: formData.username, password: formData.password }); if (result.success) { navigate('/dashboard'); } else { setError(result.message || 'Login failed'); } };

模式二：Hook封装（推荐，适合复杂交互）

// hooks/useAuthSkill.ts import { useMCP } from '@mcp/react'; export function useAuthSkill() { const { invoke, loading, error } = useMCP(); const login = async (credentials: { username: string; password: string }) => { return invoke<{ user_id: string; roles: string[] }>('auth:login', credentials); }; const logout = () => invoke('auth:logout'); return { login, logout, loading, error }; } // 组件中使用 function LoginForm() { const { login, loading } = useAuthSkill(); const handleSubmit = async () => { const result = await login({ username, password }); if (result) console.log('User ID:', result.user_id); }; }

为什么推荐Hook？因为它自动处理了loading状态、错误边界、取消请求（AbortSignal），比手写useState+useEffect少写60%代码。更重要的是，useMCP内部会自动订阅MCP Registry变化——如果auth:loginSkill被热更新，Hook会自动使用新版本，业务代码无感知。

4.4 调试与可观测：让Skill不再黑盒

Skill最大的风险是变成“黑盒”。我建立了三层可观测体系：

1. 开发时调试面板：@mcp/devtools包提供Chrome扩展，安装后右键页面任意元素，选择“Debug MCP Skills”，弹出面板显示当前页面所有注册Skill、调用历史、实时Schema文档。支持直接在面板里输入参数调用，比写测试用例快十倍。

2. 运行时日志：每个Skill执行时，自动上报结构化日志到console.mcp命名空间：

   // 控制台里输入 console.mcp // 显示所有MCP相关日志 console.mcp.trace('auth:login') // 只看登录Skill的trace

   日志包含：调用时间、输入参数（脱敏）、执行耗时、返回状态。我们用它快速定位“为什么用户登录慢”——发现90%慢在int:alipay-paySkill的证书校验环节，优化后首屏登录从3.2s降到1.1s。

3. 生产环境监控：@mcp/monitor包自动采集指标：

   • mcp_skill_invocation_total{skill_id, status_code}：调用总量
   • mcp_skill_duration_seconds{skill_id}：P95耗时
   • mcp_skill_error_rate{skill_id}：错误率 这些指标推送到Prometheus，设置告警：rate(mcp_skill_error_rate{skill_id="auth:login"}[5m]) > 0.1，即错误率超10%持续5分钟就告警。

5. 常见问题与避坑指南：那些没人告诉你的实战陷阱

5.1 Skill命名冲突：如何避免“ID地狱”

问题：团队多人开发，有人注册biz:calculate，有人注册calc:price，最后满世界都是calculate前缀，调用时根本不知道哪个是哪个。

解决方案：强制命名空间+版本隔离。我们规定：

• 命名空间必须是domain:verb-noun格式，如payment:process-refund，禁止calc、util等模糊前缀；
• 所有Skill必须带版本号，且版本号写死在ID里：payment:process-refund@1.2.0；
• 使用@mcp/cli register --force命令注册时，自动检查ID唯一性，冲突则报错。

实操心得：我们曾因命名不规范，导致测试环境调用到开发环境的Skill，花了三天排查。现在CI里加了mcp lint步骤，扫描所有Skill文件，不符合命名规范直接fail。

5.2 浏览器兼容性陷阱：MCP不是万能胶

问题：navigator.clipboard在Safari 13.1以下不支持，但Skill契约里没声明浏览器要求，结果iOS用户点击复制直接报错。

解决方案：在Skill元数据里声明browser_support字段：

{ "id": "core:clipboard-write", "browser_support": { "chrome": ">= 66", "firefox": ">= 63", "safari": ">= 13.1", "ios_safari": ">= 13.4" } }

@mcp/client调用时自动检测当前浏览器，不满足则返回{ success: false, code: "UNSUPPORTED_BROWSER" }，业务代码可优雅降级（如显示“请长按复制”提示）。

避坑技巧：不要相信CanIUse的“部分支持”标注。我们实测发现，Safari 14.0虽然标称支持navigator.clipboard，但writeText()在某些WebView里会静默失败。所以我们的browser_support字段，是基于真实设备测试数据，不是查文档。

5.3 技术债积累：如何防止Skill变成新包袱

问题：初期觉得“封装个Skill很简单”，结果一年后Skill数量破百，没人记得biz:order-validate@1.0.0和biz:order-validate@2.0.0的区别，也不敢删旧版本。

解决方案：建立Skill生命周期管理机制：

• 所有Skill必须有deprecated_since字段，标记废弃时间；
• @mcp/cli audit命令扫描所有Skill，报告：
  • 超过90天未被调用的Skill（可归档）；
  • 存在多个版本且新版调用量<旧版10%的Skill（需合并）；
  • Schema变更但未更新文档的Skill（阻断发布）；
• 每季度举行“Skill健康度评审”，由Owner讲解每个Skill的使用场景、替代方案、退役计划。

个人体会：我们第一个季度清理了37个废弃Skill，其中12个是重复实现的登录流程。技术债不是代码量，而是决策熵——当你不知道该用哪个Skill时，系统就已经失控了。

5.4 安全红线：前端Skill的权限边界在哪里

问题：int:alipay-paySkill需要调用支付宝SDK，而SDK要求传入app_id和private_key，这些敏感信息如果硬编码在Skill里，会被打包进前端代码，泄露风险极高。

解决方案：Skill绝不持有密钥，只持有一个“能力令牌”：

• 后端提供/api/mcp/token?skill=alipay-pay接口，返回短期有效的JWT令牌；
• Skill调用时，用这个令牌向支付宝网关发起请求；
• 令牌有效期15分钟，且绑定IP和User-Agent，泄露也无法复用。

提示：永远不要在Skill里写const SECRET = 'xxx'。前端没有秘密，只有策略。我们所有涉及密钥的Skill，都遵循“令牌换能力”原则，后端负责鉴权和令牌签发，前端只负责传递。

5.5 性能瓶颈：Skill调用链路的耗时优化

问题：一个map:show-routeSkill组合调用5个子Skill，每个平均耗时200ms，总耗时1s+，用户感觉卡顿。

解决方案：引入Skill调用编排器（Orchestrator）：

// orchestrator/route-planner.ts export async function planRoute(input: RouteInput) { // 并行调用可独立的Skill const [distance, data] = await Promise.all([ mcp.invoke('geo:calculate-distance', input), mcp.invoke('api:fetch-route-data', input) ]); // 串行调用依赖Skill const polyline = await mcp.invoke('ui:render-polyline', { points: data.points, distance: distance.value }); return { polyline, distance }; }

关键优化点：

• 自动并行化：Orchestrator分析Skill依赖图，自动将无依赖的调用并行化；
• 结果缓存：对geo:calculate-distance这类纯计算Skill，用localStorage缓存结果，TTL 1小时；
• 流式响应：对于大文件处理Skill（如file:compress），返回ReadableStream，前端用response.body.getReader()边下载边处理，避免内存爆掉。

实测数据：map:show-route耗时从1120ms降到380ms，其中并行化贡献62%，缓存贡献28%。