Huolala Figma to Code MCP

Skill by ara.so — Design Skills collection.

Huolala Figma MCP is an MCP service that automatically converts Figma designs into high-fidelity UI code. It uses an intermediate DSL representation, processes designs through a pipeline (system bar removal, red dot detection, icon recognition, layout calculation), and outputs a ZIP package containing HTML, sliced images, fonts, and other assets ready for LLM conversion to target platforms (React, Vue, Swift, Kotlin, React Native, etc.).

What It Does

The service:

• Fetches Figma designs via API and converts to intermediate DSL
• Runs an 8-step processing pipeline: DSL tree building, system bar removal, VLM recognition (optional), red dot processing, icon recognition, layer cleaning, layout calculation, asset packaging
• Exports ZIP with index.html, sliced images, fonts, dsl.json, design screenshot
• Supports high-fidelity conversion: distributed alignment, center alignment, linear/overlapping layout, list detection, automatic text sizing
• Exposes MCP tools for AI clients (Cursor, Cline, etc.)

Core workflow: Figma API → DSL → Pipeline (rules engine + optional VLM) → ZIP package

Installation