AI + MCP + Skills：重构前端开发流的新范式

1. 为什么我们需要新的开发模式？

1.1 传统开发流程的痛点

痛点一：信息损耗严重

• 设计稿：#3F51B5（精确的品牌色）
• 开发实现：#3f52b6（手动取色产生的微小偏差）
• 结果：品牌色不一致，需要返工修复

痛点二：重复劳动密集

样式实现（50%） + 组件结构搭建（30%） + 业务逻辑（20%）

业务逻辑（70%） + 架构设计（20%） + 样式调整（10%）

痛点三：迭代成本高昂

1. 设计师调整颜色方案（30分钟）
2. 通知开发者（5分钟）
3. 开发者定位所有相关代码（1小时）
4. 逐个文件手动修改（2-3小时）
5. 测试验证（30分钟）

痛点四：项目架构与技术栈难以复用

1.2 AI + MCP + Skills：重构开发流

1. AI Agent（作为智能决策中枢）
2. MCP（Model Context Protocol，连接 AI 与外部工具/数据源的标准协议）
3. Skills（通过精心设计的提示词让 AI 掌握特定领域的专业能力，并可通过自定义脚本扩展 Agent 的能力）

2. 架构蓝图（Architecture）

graph TB
    subgraph "设计层 Design Layer"
        Figma[Figma 设计稿<br/>颜色/字体/组件]
    end

    subgraph "协议层 Protocol Layer"
        MCP[MCP Server<br/>Figma Connector]
    end

    subgraph "智能层 Intelligence Layer"
        Agent[AI Agent<br/>Claude/OpenAI]
        Skills[Skills System<br/>Web Designer Skill]
    end

    subgraph "代码层 Code Layer"
        Theme[设计系统配置<br/>theme/tokens/variables]
        Components[组件代码<br/>任意框架/库]
        FileSystem[本地文件系统]
    end

    Figma -->|Figma API| MCP
    MCP -->|结构化数据| Agent
    Skills -->|技术栈规范| Agent
    Agent -->|生成代码| Theme
    Agent -->|生成代码| Components
    Theme --> FileSystem
    Components --> FileSystem

2.1 核心组件说明

Brain：AI Agent（Claude/OpenAI）

• 角色：智能决策中枢
• 能力：理解设计语义、生成符合规范的代码、处理复杂的上下文关联
• 优势：比简单的代码生成工具更懂"为什么要这样设计"

Protocol：MCP（Model Context Protocol）

• 角色：连接 AI 与外部世界的标准接口
• 功能：提供统一的工具调用协议，使 AI 能够访问 Figma API、文件系统等外部资源
• 优势：标准化、可扩展、与 AI 模型无缝集成

World：Figma & Local File System

• 设计源：Figma（存储设计稿和 Design Token）
• 代码产物：本地文件系统（存储生成的代码）

Tech Stack：灵活适配任何技术栈

• Next.js + Tailwind CSS
• Create React App + Styled Components
• Vite + Emotion
• Remix + CSS Modules

• Nuxt.js + UnoCSS
• Vue 3 + Element Plus
• Vite + Vuetify

• Angular + Angular Material
• Svelte + SvelteKit
• Solid.js + Solid UI

• 纯 HTML + CSS Variables
• Web Components + Shadow DOM

关于 AI 编辑器的选择：本文使用 OpenCode 作为示例，因为它原生支持 MCP 协议且配置简单。但同样的方案可以应用于其他支持 MCP 的工具，如 Cursor、Windsurf 等。

3. 关键步骤一：打造 MCP Figma Connector（连接器）

3.1 MCP Server 工作原理

"不要让 AI 猜测外部世界的状态，而是给它提供结构化的、可验证的数据接口。"

3.2 为什么要自定义 Figma MCP Server？

3.2.1 官方 MCP Server 的局限性

// 官方 MCP 返回的原始数据
{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [
      {
        "id": "1:2",
        "name": "Page 1",
        "children": [
          // 可能有几百个节点，每个节点包含完整的属性...
          // 导致 JSON 大小达到几 MB
        ]
      }
    ],
    // 还有大量的元数据、版本信息、插件数据...
  }
}

• Token 消耗巨大（一次请求可能消耗 50K+ tokens）
• AI 响应变慢（需要处理海量无关数据）
• 成本增加（API 调用和 AI token 费用）

// 我们需要的（语义化）
{
  "colors": {
    "primary": "#3F51B5",
    "secondary": "#F50057"
  },
  "typography": {
    "h1": { fontSize: "2.5rem", fontWeight: 700 }
  }
}

// 官方 API 返回的（原始结构）
{
  "styles": {
    "123:456": {
      "name": "Color Styles/Primary/Main",
      "styleType": "FILL",
      "node_id": "789:012"
    }
  },
  "nodes": {
    "789:012": {
      "fills": [{
        "type": "SOLID",
        "color": { "r": 0.247, "g": 0.318, "b": 0.710 }
      }]
    }
  }
}

• 有的团队使用 Primary/Main，有的使用 primary-main
• 有的项目需要生成 CSS Variables，有的需要 Theme Object
• 有的设计稿包含大量无关的实验性设计，需要过滤

3.2.2 自定义封装的价值

1. 数据精简：只提取必要的设计 Token，减少 82% 的 Token 消耗
2. 语义化转换：将 Figma 的底层结构转换为项目所需的设计系统格式
3. 智能过滤：根据命名规范自动过滤无关节点
4. 缓存优化：对不常变更的设计 Token 进行缓存
5. 团队定制：根据团队的设计系统规范进行适配

3.3 代码实战：构建自定义 Figma MCP Server

3.3.1 定义自定义 Tool：get_design_tokens

// mcp-server-design-tokens/src/tools/getDesignTokens.ts

import { z } from 'zod';
import { Tool } from '@modelcontextprotocol/sdk/types.js';

// 定义输入参数的 Schema
export const getDesignTokensSchema = z.object({
  fileKey: z.string().describe('Figma 文件的唯一标识符'),
  nodeId: z.string().optional().describe('可选：指定节点 ID 以获取局部样式'),
  filter: z
    .object({
      includeColors: z.boolean().default(true),
      includeTypography: z.boolean().default(true),
      includeSpacing: z.boolean().default(true),
      namePattern: z
        .string()
        .optional()
        .describe('只提取匹配此正则的样式，如 "^(Primary|Secondary)"'),
    })
    .optional(),
});

// 定义 Tool 元数据
export const getDesignTokensTool: Tool = {
  name: 'get_design_tokens',
  description: `
    从 Figma 文件中提取优化后的 Design Tokens（颜色、字体、间距等）。
    相比官方 API，此工具会：
    1. 自动进行语义化转换（RGBA → Hex，节点名 → camelCase）
    2. 过滤无关数据，减少 80%+ 的数据量
    3. 按照设计系统规范组织数据结构
  `,
  inputSchema: {
    type: 'object',
    properties: {
      fileKey: {
        type: 'string',
        description: 'Figma 文件 URL 中的 file key',
      },
      nodeId: {
        type: 'string',
        description: '可选：特定节点的 ID',
      },
      filter: {
        type: 'object',
        description: '过滤选项',
        properties: {
          includeColors: { type: 'boolean', default: true },
          includeTypography: { type: 'boolean', default: true },
          includeSpacing: { type: 'boolean', default: true },
          namePattern: { type: 'string', description: '样式名称过滤正则' },
        },
      },
    },
    required: ['fileKey'],
  },
};

// Tool 的实现逻辑
export async function executeDesignTokensTool(args: z.infer<typeof getDesignTokensSchema>) {
  const { fileKey, nodeId, filter } = args;

  // 1. 调用 Figma API（可以使用官方 MCP 作为基础）
  const rawData = await fetchFigmaData(fileKey);

  // 2. 提取并转换设计 Token
  const tokens: DesignTokens = {
    colors: filter?.includeColors ? extractColors(rawData, filter?.namePattern) : {},
    typography: filter?.includeTypography ? extractTypography(rawData, filter?.namePattern) : {},
    spacing: filter?.includeSpacing ? extractSpacing(rawData) : {},
  };

  // 3. 返回优化后的数据
  return {
    tokens,
    metadata: {
      fileKey,
      extractedAt: new Date().toISOString(),
      tokensCount: Object.keys(tokens.colors).length + Object.keys(tokens.typography).length,
    },
  };
}

3.3.2 核心优化：语义化提取与数据精简

// 提取颜色样式（优化版）
function extractColors(figmaData: any, namePattern?: string): Record<string, string> {
  const colors: Record<string, string> = {};
  const regex = namePattern ? new RegExp(namePattern) : null;

  for (const [styleId, style] of Object.entries(figmaData.meta.styles)) {
    // 1. 过滤：只处理颜色样式，且符合命名规范
    if (style.styleType !== 'FILL') continue;
    if (regex && !regex.test(style.name)) continue;

    // 2. 查找对应的节点
    const node = findNodeById(figmaData.document, style.node_id);
    if (!node?.fills?.[0]) continue;

    // 3. 转换：RGBA → Hex（语义化）
    const fill = node.fills[0];
    const hexColor = rgbaToHex(fill.color);

    // 4. 命名转换：Primary/Main → primaryMain（适配代码规范）
    const key = normalizeStyleName(style.name);
    colors[key] = hexColor;
  }

  return colors;
}

// RGBA 转 Hex（保留透明度）
function rgbaToHex(color: { r: number; g: number; b: number; a: number }): string {
  const r = Math.round(color.r * 255);
  const g = Math.round(color.g * 255);
  const b = Math.round(color.b * 255);
  const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;

  // 如果有透明度，添加 alpha 通道
  if (color.a < 1) {
    const a = Math.round(color.a * 255);
    return `${hex}${a.toString(16).padStart(2, '0')}`;
  }

  return hex;
}

// 样式名称规范化（Figma → 代码）
function normalizeStyleName(name: string): string {
  // "Primary/Main" → "primaryMain"
  // "Text/Secondary" → "textSecondary"
  return name
    .split('/')
    .map((part, index) => {
      const cleaned = part.trim();
      return index === 0
        ? cleaned.toLowerCase()
        : cleaned.charAt(0).toUpperCase() + cleaned.slice(1).toLowerCase();
    })
    .join('');
}

// 提取字体样式（优化版）
function extractTypography(figmaData: any, namePattern?: string): Record<string, any> {
  const typography: Record<string, any> = {};
  const regex = namePattern ? new RegExp(namePattern) : null;

  for (const [styleId, style] of Object.entries(figmaData.meta.styles)) {
    if (style.styleType !== 'TEXT') continue;
    if (regex && !regex.test(style.name)) continue;

    const node = findNodeById(figmaData.document, style.node_id);
    if (!node?.style) continue;

    const key = normalizeStyleName(style.name);

    // 只提取关键属性，忽略无关的元数据
    typography[key] = {
      fontFamily: node.style.fontFamily,
      fontSize: `${node.style.fontSize}px`,
      fontWeight: node.style.fontWeight,
      lineHeight: node.style.lineHeightPx
        ? `${node.style.lineHeightPx}px`
        : node.style.lineHeightPercent
          ? `${node.style.lineHeightPercent}%`
          : 'normal',
      letterSpacing: node.style.letterSpacing || 0,
    };
  }

  return typography;
}

3.3.3 效果对比：官方 API vs 自定义封装

// 官方 Figma MCP 返回的数据（精简展示）
{
  "document": {
    "id": "0:0",
    "name": "Design System",
    "type": "DOCUMENT",
    "children": [...], // 完整的节点树
  },
  "styles": {
    "123:456": {
      "key": "abc123",
      "name": "Primary/Main",
      "styleType": "FILL",
      "node_id": "789:012",
      "remote": false,
      "description": "",
      // ... 更多元数据
    },
    // ... 可能有几百个样式
  },
  "components": {...},
  "componentSets": {...},
  "schemaVersion": 0,
  "lastModified": "2026-01-20T10:30:00Z",
  // ... 大量其他元数据
}
// 数据大小：~2.5MB，约 625K tokens

// 自定义 MCP 返回的数据（优化后）
{
  "tokens": {
    "colors": {
      "primaryMain": "#3F51B5",
      "primaryLight": "#757DE8",
      "primaryDark": "#002984",
      "secondaryMain": "#F50057"
    },
    "typography": {
      "h1": {
        "fontFamily": "Inter",
        "fontSize": "40px",
        "fontWeight": 700,
        "lineHeight": "48px",
        "letterSpacing": 0
      },
      "h2": {
        "fontFamily": "Inter",
        "fontSize": "32px",
        "fontWeight": 700,
        "lineHeight": "40px",
        "letterSpacing": 0
      }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px"
    }
  },
  "metadata": {
    "fileKey": "abc123",
    "extractedAt": "2026-01-22T15:30:00Z",
    "tokensCount": 12
  }
}
// 数据大小：~2KB，约 500 tokens
// Token 节省：99.2%！

3.4 遇到的坑：节点嵌套过深导致上下文溢出

Frame "Login Page"
  └─ Group "Container"
      └─ Frame "Content"
          └─ AutoLayout "Form"
              └─ Component "Input Field" (Instance)
                  └─ Frame "Base"
                      └─ Text "Label"
                      └─ Rectangle "Background"
                      └─ Text "Placeholder"
                          └─ ... (还有更深的层级)

function flattenFigmaNodes(node: any, depth: number = 0, maxDepth: number = 3): any {
  // 限制递归深度
  if (depth > maxDepth) {
    return {
      id: node.id,
      name: node.name,
      type: node.type,
      _truncated: true,
    };
  }

  const flattened: any = {
    id: node.id,
    name: node.name,
    type: node.type,
  };

  // 只保留关键属性
  if (node.fills) flattened.fills = node.fills;
  if (node.strokes) flattened.strokes = node.strokes;
  if (node.effects) flattened.effects = node.effects;
  if (node.style) flattened.style = node.style;

  // 递归处理子节点
  if (node.children) {
    flattened.children = node.children.map((child: any) =>
      flattenFigmaNodes(child, depth + 1, maxDepth)
    );
  }

  return flattened;
}

原始 JSON 大小：2.5MB（约 625K tokens）
扁平化后大小：450KB（约 112K tokens）
Token 节省：82%

4. 关键步骤二：定义 "Web Designer" Skill（提示词工程）

4.1 Skill 系统的设计理念

• 你的角色是什么（身份）
• 你应该遵循什么规范（约束）
• 你应该如何思考问题（思维模式）
• 你可以使用什么工具（能力边界）

"精通特定技术栈的前端工程师，能够根据 Figma 设计稿生成符合团队规范的生产级代码"

1. 技术栈定义：明确使用的框架、库、工具
2. 代码风格规范：命名约定、文件组织、注释标准
3. 设计系统映射：Figma Token → 代码变量的转换规则
4. 最佳实践：性能优化、可访问性、响应式设计

4.2 Prompt 策略：模块化的 System Prompt

Skill Prompt 结构：
├── 角色定义模块（固定）
├── 技术栈约束模块（可替换）
├── 设计系统映射模块（可配置）
├── 代码规范模块（可定制）
└── 验证清单模块（动态生成）

# Web Designer Skill

## 角色定义

你是一位专业的前端开发工程师，专精于将 Figma 设计稿转换为高质量的生产级代码。

## 技术栈约束

### 当前项目配置

- **框架**: {{FRAMEWORK}} (例如：Next.js 14+ App Router / Vue 3 / Angular)
- **UI 库**: {{UI_LIBRARY}} (例如：MUI v6 / Ant Design / Tailwind CSS / 纯 CSS)
- **语言**: {{LANGUAGE}} (例如：TypeScript / JavaScript)
- **样式方案**: {{STYLE_APPROACH}} (例如：CSS-in-JS / CSS Modules / Tailwind / Styled Components)

> **重要提示**：上述配置会根据项目的 `.opencode/config.json` 自动填充，确保生成的代码符合项目规范。

核心原则（技术栈无关）

// ✅ 清晰的组件职责
export function LoginForm() {
  return (
    <form className="login-form">
      <input type="email" aria-label="邮箱" />
      <button type="submit">登录</button>
    </form>
  );
}

// ❌ 语义不清、难以维护
export function Comp1() {
  return (
    <div className="c1">
      <input type="text" />
      <div onClick={() => {}}>btn</div>
    </div>
  );
}

Figma Token          →  代码表示
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
颜色样式              →  CSS Variables / Theme Object
  Primary/Main       →  var(--color-primary) / theme.colors.primary
  Text/Secondary     →  var(--color-text-secondary)

字体样式              →  Typography System
  Heading 1          →  .text-h1 / variant="h1"
  Body Regular       →  .text-body / variant="body"

间距系统              →  Spacing Scale
  16px               →  spacing(2) / space-4 / 1rem
  24px               →  spacing(3) / space-6 / 1.5rem

圆角                  →  Border Radius Tokens
  8px                →  border-radius: var(--radius-md)

3. 响应式设计规则

/* 移动优先（Mobile-first） */
.container {
  width: 100%; /* 默认：移动端 */
}

@media (min-width: 768px) {
  .container {
    width: 750px; /* 平板 */
  }
}

@media (min-width: 1024px) {
  .container {
    width: 960px; /* 桌面 */
  }
}

工作流程

Step 1: 提取 Design Token

const designTokens = await mcpClient.callTool('get_figma_styles', {
  fileKey: 'abc123',
});

Step 2: 生成设计系统配置文件

/* styles/tokens.css */
:root {
  /* 颜色系统 */
  --color-primary: #3f51b5;
  --color-primary-light: #757de8;
  --color-primary-dark: #002984;
  --color-secondary: #f50057;

  /* 字体系统 */
  --font-family-base: 'Inter', sans-serif;
  --font-size-h1: 2.5rem;
  --font-weight-bold: 700;

  /* 间距系统 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

// theme/index.ts
export const theme = {
  colors: {
    primary: {
      main: '#3F51B5',
      light: '#757DE8',
      dark: '#002984',
    },
    secondary: {
      main: '#F50057',
    },
  },
  typography: {
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
    },
  },
  spacing: (factor: number) => `${0.5 * factor}rem`,
};

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#3F51B5',
          light: '#757DE8',
          dark: '#002984',
        },
      },
      fontSize: {
        h1: '2.5rem',
      },
    },
  },
};

Step 3: 生成组件代码

Figma Node Type      →  语义化组件
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FRAME                →  Container / Section / Layout
TEXT                 →  Typography / Heading / Paragraph
RECTANGLE (Button)   →  Button / Link
RECTANGLE (Card)     →  Card / Panel
INSTANCE (Component) →  自定义组件引用

• 所有颜色/间距/字体引用设计系统变量，无硬编码
• 组件命名清晰，职责单一
• 支持响应式布局（移动端 + 桌面端）
• 代码包含必要的类型注解（TypeScript 项目）
• 组件可访问性符合 WCAG 标准（ARIA 标签、键盘导航）
• 文件组织符合项目规范（路由、命名、导入顺序）

4.3 上下文注入：如何将 Figma 数据喂给 LLM

// 第一层：全局上下文（始终注入）
const globalContext = {
  projectName: 'MyApp',
  techStack: {
    framework: 'Next.js 14',
    uiLibrary: 'MUI v6', // 或 'Tailwind CSS' / 'Ant Design' 等
    language: 'TypeScript',
    styleApproach: 'sx props', // 或 'CSS Modules' / 'Styled Components'
  },
  designSystem: 'Material Design 3.0',
};

// 第二层：设计 Token（从 Figma 提取）
const designTokens = await mcpClient.callTool('get_figma_styles', { fileKey });

// 第三层：当前任务上下文（动态生成）
const taskContext = {
  task: '生成登录页面',
  figmaNode: {
    id: '123:456',
    name: 'Login Page',
    type: 'FRAME',
    // 只包含与当前任务相关的节点数据
  },
};

// 合并上下文并注入到 Prompt
const fullPrompt = `
${systemPrompt}

## 项目上下文
${JSON.stringify(globalContext, null, 2)}

## Design Tokens
${JSON.stringify(designTokens, null, 2)}

## 当前任务
${JSON.stringify(taskContext, null, 2)}

请根据以上信息，使用 ${globalContext.techStack.framework} + ${globalContext.techStack.uiLibrary} 生成代码。
`;

• AI 能够精确理解设计意图
• 生成的代码自动适配项目技术栈
• 避免 Token 浪费
• 支持多项目、多技术栈场景

4.4 实战案例：不同技术栈的 Skill 配置

案例 1：Next.js + Tailwind CSS

• 框架: Next.js 14+ (App Router)
• 样式方案: Tailwind CSS
• 语言: TypeScript

export function Hero() {
  return (
    <div className="p-8 bg-primary text-white rounded-lg">
      <h1 className="text-h1 font-bold">欢迎</h1>
      <button className="px-4 py-2 bg-secondary hover:bg-secondary-dark">开始使用</button>
    </div>
  );
}

案例 2：Vue 3 + Element Plus

• 框架: Vue 3 (Composition API)
• UI 库: Element Plus
• 语言: TypeScript

<template>
  <el-container class="login-page">
    <el-header>
      <el-text tag="h1">欢迎</el-text>
    </el-header>
    <el-main>
      <el-button type="primary">开始使用</el-button>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
  // 组件逻辑
</script>

案例 3：纯 HTML + CSS Variables

• 语言: HTML5 + CSS3
• 样式方案: CSS Variables
• 无框架: 使用原生 Web Components

<div
  class="hero"
  style="
  padding: var(--spacing-lg);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
"
>
  <h1 class="hero__title">欢迎</h1>
  <button class="button button--primary">开始使用</button>
</div>

案例 2：Vue 3 + Element Plus

• 框架: Vue 3 (Composition API)
• UI 库: Element Plus
• 语言: TypeScript

<template>
  <el-container class="login-page">
    <el-header>
      <el-text tag="h1">欢迎</el-text>
    </el-header>
    <el-main>
      <el-button type="primary">开始使用</el-button>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
  // 组件逻辑
</script>