🎯

code-connect-components

🎯Skill

from figma/mcp-server-guide

What it does

Connect Figma design components to their code implementations using Figma's Code Connect feature, analyzing design structure, scanning codebase for matching components, and establishing design-code mappings.

📦

Same repository

figma/mcp-server-guide(3 items)

code-connect-components

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add figma/mcp-server-guide --skill code-connect-components

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add figma/mcp-server-guide --skill code-connect-components

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/code-connect-components/SKILL.md

SKILL.md

676Installs

215

Last UpdatedDec 16, 2025

View on GitHub Back to Skills

More from this repository2

🎯

implement-design🎯Skill

Guide for the official Figma MCP server that brings Figma design context to AI agents, enabling code generation from selected frames and design data extraction.

🎯

create-design-system-rules🎯Skill

Generates custom design system rules tailored to your project for Figma-to-code workflows, creating project-level instructions that encode component patterns, naming conventions, and architectural decisions for Claude Code, Codex, and Cursor.