Clovis500c

Figma Bridge — AI skill for Claude Code

AI community

Local MCP bridge that lets any AI agent (Claude, Codex, Antigravity, Cursor…) design in the Figma desktop app, with no rate limits.

How to install Figma Bridge

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Clovis500c/figma-bridge and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Figma Bridge does

Local MCP bridge that lets any AI agent (Claude, Codex, Antigravity, Cursor…) design in the Figma desktop app, with no rate limits.

Alternatives in AI

Open Pencil — AI-native design editor 8k ★
Cursor Talk To Figma MCP — TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code, Codex) and Figma, allowing Agentic AI to c 7k ★
Token Monitor — Local-first desktop widget for tracking token usage, costs, and limits across 32+ AI coding tools—including Cl 1.8k ★

README

Figma Bridge

[![CI](https://github.com/Clovis500c/figma-bridge/actions/workflows/ci.yml/badge.svg)](https://github.com/Clovis500c/figma-bridge/actions/workflows/ci.yml)

**Let any AI agent design in the Figma desktop app, with no rate limits.**

Figma Bridge is a local [MCP](https://modelcontextprotocol.io) server plus a Figma plugin. Your agent gets full read and write access to the open file through the Plugin API, not the web API: no tokens, no quotas. (A token is only needed for the optional comments and version history tools.)

Works with **Claude Code**, **Claude Desktop**, **Codex**, **Antigravity**, **Gemini CLI**, **Cursor**, **Windsurf** and any other MCP client.

Figma Bridge plugin

Features

Build whole layouts in one call from a JSON spec: auto-layout and grid, rich text, icons, images, component sets with variants and properties, prototype links.
Import any website or HTML as editable auto-layout frames, one per viewport (details).
Round-trip the design system: write variables with Light/Dark modes and styles from JSON, W3C tokens or Tailwind; export them to DTCG, CSS, Tailwind v3/v4, SCSS or TypeScript (details).
Score and fix design system health: token coverage, contrast, text styles, detached instances, duplicates, naming, with safe automatic fixes.
Read existing designs compactly, search every page, and reuse the file's design system.
Check its own work with screenshots, a design audit, and a pixel diff against a mockup.
Hand off to your codebase: export a frame into your project with its own components, tokens and stack (React, Next, Vue, Svelte, React Native; Tailwind