feuse-mcp

Instructions

Implementation Reference

• src/services/figma/index.ts:53-96 (handler)

  The main handler (execute function) for the Figma-To-Code tool. Fetches Figma design data as YAML DSL, retrieves PNG preview image, constructs XML prompt with embedded prompt template, DSL, and image content for LLM code generation.
  execute: async ({ fileKey, nodeId, }, { session, }: { session: any }) => { try { const figmaService = this.figmaToolsCore.figmaService const yamlResult = await this.figmaToolsCore.figmaToCode({ fileKey, nodeId: nodeId || '', }) const figmaImg = await figmaService.getImageData(fileKey, nodeId as string) const figmaImgData = await imageContent({ url: figmaImg, }) console.log('figmaImgData', figmaImgData) const prompt: string = ` <xml> <prompt>${figmaToCodePrompt}</prompt> <Figma-DSL>${yamlResult}</Figma-DSL> </xml> ` return { content: [ { type: 'text', text: prompt }, figmaImgData, ], } } catch (error) { const message = error instanceof Error ? error.message : JSON.stringify(error) Logger.error(`Error fetching file ${fileKey}:`, message) return { isError: true, content: [{ type: 'text', text: `Error fetching file: ${message}` }], } } },
• src/services/figma/index.ts:37-97 (registration)

  Registration of the Figma-To-Code tool using server.addTool, including name, description, Zod input schema, and execute handler.
  this.server.addTool({ name: 'Figma-To-Code', description: 'Generate pixel-perfect frontend code from Figma designs. Automatically parses Figma DSL structure and style information, combines with PNG preview images for visual validation, and generates high-quality frontend component code that matches your project tech stack. Supports automatic detection of project configurations (UnoCSS/TailwindCSS/SCSS etc.) and uses existing style variables and design standards.', parameters: z.object({ fileKey: z .string() .describe( 'The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...', ), nodeId: z .string() .optional() .describe( 'The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided', ), }), execute: async ({ fileKey, nodeId, }, { session, }: { session: any }) => { try { const figmaService = this.figmaToolsCore.figmaService const yamlResult = await this.figmaToolsCore.figmaToCode({ fileKey, nodeId: nodeId || '', }) const figmaImg = await figmaService.getImageData(fileKey, nodeId as string) const figmaImgData = await imageContent({ url: figmaImg, }) console.log('figmaImgData', figmaImgData) const prompt: string = ` <xml> <prompt>${figmaToCodePrompt}</prompt> <Figma-DSL>${yamlResult}</Figma-DSL> </xml> ` return { content: [ { type: 'text', text: prompt }, figmaImgData, ], } } catch (error) { const message = error instanceof Error ? error.message : JSON.stringify(error) Logger.error(`Error fetching file ${fileKey}:`, message) return { isError: true, content: [{ type: 'text', text: `Error fetching file: ${message}` }], } } }, })
• src/services/figma/index.ts:40-52 (schema)

  Input schema using Zod: fileKey (string, Figma file key), nodeId (optional string, specific node ID).
  parameters: z.object({ fileKey: z .string() .describe( 'The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...', ), nodeId: z .string() .optional() .describe( 'The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided', ), }),
• src/services/figma/index.ts:214-247 (helper)

  Helper method in FigmaToolsCore that fetches and simplifies Figma file/node to JSON (YAML DSL) for the prompt.
  public async figmaToCode({ fileKey, nodeId, }: { fileKey: string nodeId: string }) { const figmaService = this.figmaService let file: SimplifiedDesign if (nodeId) { file = await figmaService.getNode(fileKey, nodeId) } else { file = await figmaService.getFile(fileKey) } Logger.log(`Successfully fetched file: ${file.name}`) const { nodes, globalVars, ...metadata } = file const result = { metadata, nodes, globalVars, } Logger.log('Generating YAML result from file') const yamlResult = JSON.stringify(result, null, 2) Logger.log('Sending result to client') Logger.log('content', yamlResult) return yamlResult }
• src/services/figma/simplify-node-response.ts:134-183 (helper)

  Core parsing function that transforms raw Figma API response into a simplified, YAML-friendly design structure (SimplifiedDesign) used as DSL in the prompt. Aggregates components, parses nodes recursively, deduplicates styles into globalVars.
  export function parseFigmaResponse(data: GetFileResponse | GetFileNodesResponse): SimplifiedDesign { const aggregatedComponents: Record<string, Component> = {}; const aggregatedComponentSets: Record<string, ComponentSet> = {}; let nodesToParse: Array<FigmaDocumentNode>; if ("nodes" in data) { // GetFileNodesResponse const nodeResponses = Object.values(data.nodes); // Compute once nodeResponses.forEach((nodeResponse) => { if (nodeResponse.components) { Object.assign(aggregatedComponents, nodeResponse.components); } if (nodeResponse.componentSets) { Object.assign(aggregatedComponentSets, nodeResponse.componentSets); } }); nodesToParse = nodeResponses.map((n) => n.document); } else { // GetFileResponse Object.assign(aggregatedComponents, data.components); Object.assign(aggregatedComponentSets, data.componentSets); nodesToParse = data.document.children; } const sanitizedComponents = sanitizeComponents(aggregatedComponents); const sanitizedComponentSets = sanitizeComponentSets(aggregatedComponentSets); const { name, lastModified, thumbnailUrl } = data; let globalVars: GlobalVars = { styles: {}, }; const simplifiedNodes: SimplifiedNode[] = nodesToParse .filter(isVisible) .map((n) => parseNode(globalVars, n)) .filter((child) => child !== null && child !== undefined); const simplifiedDesign: SimplifiedDesign = { name, lastModified, thumbnailUrl: thumbnailUrl || "", nodes: simplifiedNodes, components: sanitizedComponents, componentSets: sanitizedComponentSets, globalVars, }; return removeEmptyKeys(simplifiedDesign); }