Skip to main content
affpapa.org
RU EN
skill CX Codex official · OpenAI

figma-code-connect-components · openai — Claude Code skill: how to install

Maps published Figma design components to codebase implementations using Figma Code Connect. It inspects component properties and pairs them with repository files.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/skills --skill figma-code-connect-components -a claude-code
Open on GitHub

What figma-code-connect-components does

The skill coordinates Code Connect integration between design files and local source code. It calls get_code_connect_suggestions to detect unmapped elements in the target Figma node, collecting component names, variants, and thumbnails while skipping items already linked.

Next, the agent scans directories like src/components/ to match component structures and prop signatures in TypeScript or JavaScript. After the user reviews and confirms the suggested matches, the skill executes send_code_connect_mappings in a single batch.

When using figma-desktop MCP, the active canvas selection is read directly without passing URLs. For web links, the node-id query parameter is mandatory. The workflow requires a Figma Organization or Enterprise plan and published team library components.

What it helps with

  • detect unmapped design components within a Figma node
  • match Figma variant properties to code component props
  • register Code Connect mappings in batches via MCP
  • locate matching UI files across the project codebase

Example prompts for the agent

  • Connect this selected Figma component to our code using Code Connect
  • Map unlinked components from the Figma URL to our repository UI elements
  • Find matching codebase components for the selected Figma node and establish Code Connect links

How to install figma-code-connect-components

1Skills CLI (Vercel)

npx skills add openai/skills --skill figma-code-connect-components -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/figma-code-connect-components/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about figma-code-connect-components

How to install figma-code-connect-components in Claude Code?

Run npx skills add openai/skills --skill figma-code-connect-components -a claude-code in your terminal.

What does figma-code-connect-components do?

It discovers unlinked Figma components, locates corresponding code files in your project, and registers Code Connect mappings.

Which Figma plans support this skill?

Figma Code Connect requires an Organization or Enterprise subscription. Components must also be published to a team library to be mapped.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set25

The whole set →
winui-app This skill helps create, configure, and review WinUI 3 apps built with C# and the Windows App SDK. Use it for new projects or XAML issues. CX Codex +1 3,200installs notion-meeting-intelligence Pulls meeting context from Notion, drafts agendas and pre-reads, then adds Codex research. Use it when a meeting needs clear decisions, owners, and follow-up. CX Codex +1 3,100installs figma-generate-design Turns an app page or multi-section layout into a Figma screen built from your published design system, not hand-drawn boxes. CX Codex +1 2,900installs figma-create-design-system-rules Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository. CX Codex +1 2,900installs define-goal Shapes vague requests into concrete, measurable goals with explicit pass criteria before an agent starts working. CX Codex +1 2,800installs figma-generate-library A skill to sync your Figma design system with your codebase. Build or update variables, components, themes, and documentation in the right order—phases matter, and skipping steps breaks the system. CX Codex +1 2,700installs migrate-to-codex Moves instruction files, skills, subagents and MCP config from Claude into Codex project and global files. CX Codex +1 2,600installs plugin-creator Scaffolds a Codex plugin with its manifest, optional folders, and marketplace entry. Useful when you need a local plugin ready for editing or testing. CX Codex +1 2,500installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor