ツール

Figma's official remote MCP: hands components, variables and layout from your designs to the agent to generate code, and can create and edit designs on the canvas. Needs Figma sign-in; Starter plans and View or Collab seats get only 6 read calls a month.

Helps agents build frontends that don't look templated: picks a design direction first, then tunes layout variance, motion intensity and information density. Also includes redesign audits, minimalist and brutalist styles, and design reference generation.

Simplifies Figma designs into layout and style data for coding agents, so UIs built from the design are more accurate than working from screenshots. Requires a Figma personal access token.

Companion skills for Google Stitch: generate UIs from text or images, extract DESIGN.md from code, and turn designs into React or React Native components. From Google Labs but not an officially supported Google product; set up the Stitch MCP first.

Figma's Codex plugin in OpenAI's official marketplace: implements UI from designs, generates Code Connect mappings, and creates or updates pages, component libraries, FigJam diagrams and slides in Figma. Needs a connected Figma account.

Reads any website's design system in a headless browser and exports DTCG design tokens, Tailwind config, Figma variables and a brand guide in one command, scoring contrast and cross-page consistency. Also an MCP server or Claude Code plugin. Needs Node.js and Chromium or Chrome.

Turns Figma designs into production code in your project, using the design screenshot as the visual target and reusing existing components, design tokens and Code Connect mappings first. Maintained by Figma; needs the Figma MCP server (free plans get only 6 calls a month).

Figma's official plugin: connects the remote Figma MCP server and bundles skills for design-to-code, Code Connect, and generating designs and libraries, letting agents read design context and write to the canvas. Needs a Figma account; Starter plans and View/Collab seats get 6 calls a month.

Figma's official skill collection: implement designs as code, map components with Code Connect, generate design-system libraries from code, and build screens and FigJam diagrams on the canvas. Needs the Figma MCP server; canvas writes are in beta and currently free.

Breaks reference UIs you like (screenshots, images or URLs) into a structured design DNA JSON covering design tokens, overall style and visual effects, then builds new pages from your content in that style. Installing needs Node.js; no API key required.

Free two-way Figma MCP that needs no paid Dev Mode seat: turns designs into code that fits your existing project, or builds pages and components on the canvas from a description, with data staying on your machine. Needs Node.js 20.19+, the Figma desktop app and the companion plugin.

Hands Figma node layout, styles and images to AI coding tools to turn into high-fidelity HTML/CSS, React or Tailwind code, and downloads design images locally. Needs a Figma personal access token; sends basic usage stats; switch to the plugin version if you hit Figma API rate limits.

MasterGo's official MCP: reads design DSL data, SVGs and text from MasterGo files to help agents turn designs into front-end code. Needs a MasterGo personal access token; only works with Team plan or higher and files in team projects.