Back to the lab

design-context-bridge

Live

So AI can 'see' your designs without relying on images. It passes clean Figma data (layers, spacing, tokens) straight to your AI agents through MCP.

design-context-bridge

$

Why I built this

MCP (Model Context Protocol) is the protocol that lets AI agents call external tools instead of interpreting screenshots. When I saw that no one had connected Figma to agents in a way that exposed the real tokens — not the pixels — I built it.

What it does

  • Any MCP-compatible agent — Cursor, Claude, Windsurf, VS Code, OpenCode.
  • The agent accesses the real Figma data.
  • The agent receives structured data — tokens, layers, spacing — and uses it to generate code that respects the design system from the first prompt.

How it works

  1. 01

    The MCP server connects to the Figma file via API and exposes its structure — nodes, styles, variables — as tools any compatible agent can call.

  2. 02

    When an AI agent (Cursor, Claude) needs design context, it calls those tools instead of asking for a screenshot.

  3. 03

    The agent receives structured data — tokens, layers, spacing — and uses it to generate code that respects the design system from the first prompt.

What it exposes

Selection readingget_current_selection · get_selected_colors · get_selected_texts
File navigationget_all_pages · get_frame_by_name · get_node_info
Design system extractionextract_design_system · get_variables
Asset extractionfind_assets · export_image
Structure analysisanalyze_structure · get_component_variants

Usage modes

Plugin ModeSends the Figma selection in real time from the desktop plugin.
You must install the plugin in the Figma desktop app to use it. Available on GitHub.
REST API ModeReads any Figma URL using a personal access token.
Depends on the Figma API and the usage limits of your account.

Build & Tooling

TypeScriptMCPClaude CodeNode ≥ 18MIT LicenseCursorWindsurfVS CodeOpenCode

Links

GitHubnpm

Independent — not affiliated with Figma, Inc.