Tools

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.

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.

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.

Figma's official CLI that links Figma design-system components to real components in your code, so Dev Mode and the Figma MCP show production snippets instead of generated examples. Needs Node.js 18+, a Figma Organization or Enterprise plan, a full Design or Dev Mode seat and an access token.

Lets coding agents read your codebase, extract a design system, then generate UI mockups, slide decks, posters and other marketing visuals on Superdesign's infinite canvas and iterate in branches. Needs @superdesign/cli and a Superdesign account; free to start.

Official Sleek skill: lets agents design mobile app screens in Sleek, manage projects and take preview screenshots, then pull the design HTML and implement it in React Native or SwiftUI. Needs a Sleek account and API key; free accounts get one trial run, ongoing use needs a paid Pro plan.

Renders a screen reader spec for a component directly in Figma: focus order plus per-state VoiceOver (iOS), TalkBack (Android) and ARIA (Web) property tables and announcements. Part of uSpec; reads the component .md spec from create-component-md and needs a Figma MCP and a configured template key.

Zeplin's official MCP: hands screen and component specs, assets, design tokens and designer annotations to the agent so developers can implement designs more accurately during handoff. Needs a Zeplin account, a personal access token and Node.js 20+.