Vibe Coding for Production
Design

Figma MCP

Use Figma’s official MCP to pull structured design context into Claude Code, Cursor, and other agents, implementation backed by design tokens.

Figma’s Model Context Protocol integration is documented in the open Figma MCP server guide. It gives coding agents structured access to what is in a Figma file, layout (incl. auto layout), typography, colors, components, and Code Connect-aware reuse, so implementation matches the design file instead of “guessing from a PNG.”

Official HTTP endpoint used in the guide:

https://mcp.figma.com/mcp

If Figma’s install paths or URLs change, the repo above and Figma’s own announcements win over this page.

Why use it in a workshop

  • Figma is the spec: the agent can call tools such as get_design_context with a file key and node id to retrieve dev-ready structure (the guide’s examples default to a React + Tailwind-style output that you can retarget to your stack).
  • Less drift: same tool flow as professional design-to-dev handoff; you practice naming frames and using components the model can read.

Claude Code: plugin and HTTP MCP

From the guide README (paraphrased; copy exact lines from the repo when teaching):

Official plugin (MCP + agent skills):

claude plugin install figma@claude-plugins-official

Manual HTTP server registration:

claude mcp add --transport http figma https://mcp.figma.com/mcp

List or inspect servers with claude mcp list, remove if needed with claude mcp remove (see upstream for current subcommands).

Cursor (and compatible hosts)

  • Add-plugin shortcut (from the same guide; UI text may differ by Cursor version): in agent chat, /add-plugin figma.
  • Manual config in MCP settings:
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Merge with existing mcpServers keys. Complete Figma auth in the product when prompted. Figma’s OAuth and file-access rules are defined in Figma and may update independently of this doc.

Design → code workflow (typical)

In Figma, select a frame (or a component set) and copy file URL; extract file key and node id from the link or the Dev Mode / inspect UI as you normally would.
In the agent, ask for an implementation and name the file + node; the model should call get_design_context-style tools with fileKey and nodeId (illustrated in the guide’s implement design steering).
Map the returned structure to your component library; the default output format may be React/Tailwind but the measurements and hierarchy are the valuable part.
Run the app and diff against Figma; iterate with the same node until the critical layout matches.

Example tool shape (from the guide’s LLM text index):

  • get_design_context: fileKey + nodeId → layout, type, color, structure (often with React + Tailwind-oriented text you can translate).

Figma API and MCP auth flows evolve, when something fails, start from Figma’s official repo and in-app error messages, not a cached workshop blurb.

pen.dev MCP

Design inside the IDE on .pen files.

Claude Design

When the source of truth is Anthropic’s canvas, not a Figma file.

MCP hub

Mental model for tools and HTTP transports.

Claude Design

Anthropic’s Claude Design, chat + canvas for prototypes, slides, and handoff to Claude Code. What it is and how to get started.

pen.dev MCP

Use pen.dev in the IDE or desktop app and its local pencil MCP server to read and edit .pen files.

On this page

Why use it in a workshopClaude Code: plugin and HTTP MCPCursor (and compatible hosts)Design → code workflow (typical)