STEP 01
设计师选中节点，触发插件
在 Figma 中运行 FigBridge 插件，选中需要转换的设计区域（Frame/Component/Group），点击「提取设计」。
// 插件入口 - code.ts
figma.currentPage.selection[0];
// 遍历节点树
function traverseNode(node): DesignNode {
return {
nodeId: node.id,
type: node.type,
name: node.name,
styles: extractStyles(node),
layout: extractLayout(node),
children: node.children?.map(traverseNode)
}
}
STEP 02
插件将结构化数据 POST 到服务器
节点树经过精简和格式化后，通过 Figma UI 的 fetch API 发送到 FigBridge Server。只保留布局和样式关键信息，剔除冗余元数据，减少 80% 数据量。
// 发送到服务器 - ui.html
const response = await fetch('https://figbridge.server/api/v1/snapshots', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
figmaFileKey: fileKey,
rootNode: traversedTree,
meta: { pageName, selectedFrames }
})
});
// 响应包含 skillUrl
const { skillUrl } = await response.json();
STEP 03
服务器存储并生成 Skill 端点
服务器接收数据后：① 持久化到 PostgreSQL ② 缓存热点数据到 Redis ③ 将原始图片资源存到 S3 ④ 生成唯一 Skill ID 和可访问 URL，返回给插件。
// 服务器处理 - snapshot.service.ts
async function createSnapshot(dto: CreateSnapshotDto) {
// 1. 存储节点树
const snapshot = await prisma.snapshot.create({
data: { figmaFileKey, rootNode, meta }
});
// 2. 自动创建 Skill 端点
const skill = await prisma.skillEndpoint.create({
data: {
snapshotId: snapshot.id,
endpointUrl: `/api/v1/skills/${generateId()}/context`,
framework: 'vue3'
}
});
return { skillUrl: skill.endpointUrl };
}
STEP 04
Claude Code 通过 Skill 拉取设计上下文
开发者在 Claude Code 中配置 FigBridge Skill 地址。AI 自动请求 Skill 端点，获取精简后的设计数据（布局结构 + 样式映射 + 组件语义），作为代码生成的上下文。
// Skill 上下文接口 - skill.controller.ts
@Get(':id/context')
async getContext(@Param('id') skillId: string) {
const skill = await getSkillWithSnapshot(skillId);
// 精简上下文：只返回 AI 需要的信息
return {
framework: skill.framework,
componentTree: simplifyForAI(skill.snapshot.rootNode),
styleTokens: extractTokens(skill.snapshot.rootNode),
layoutHints: inferLayout(skill.snapshot.rootNode)
};
}
STEP 05
AI 生成 Vue / React 组件代码
Claude Code 基于设计上下文，自动推理组件拆分策略、样式实现方式（Tailwind / CSS Modules），生成可直接使用的组件代码。支持增量更新 — 设计变更后重新推送即可刷新 Skill 上下文。
// AI 生成的 Vue3 组件示例
<template>
<div class="flex flex-col gap-4 p-6 rounded-2xl
bg-white shadow-lg">
<h2 class="text-xl font-bold text-gray-900">
{{ title }}
</h2>
<p class="text-sm text-gray-500">{{ desc }}</p>
</div>
</template>
<script setup lang="ts">
defineProps<{ title: string; desc: string }>()
</script>