Code Connect Components
figma/mcp-server-guideThis skill connects Figma design components to your actual code components. It uses Figma's Code Connect feature to find matching parts in your codebase. Figma designs and code implementations stay in sync automatically.
Developers and designers save time by mapping each design piece to the right code file. No more manual checking or mismatched styles. Everything stays consistent between what you see in Figma and what runs in your app.
Just provide a Figma URL with a node ID. The skill scans the design, suggests unmapped components, and helps you link them to your code. Simple and fast for teams using Organization or Enterprise plans.
Add Code Connect Components skill to your workflow
Global
mkdir -p ~/.claude/skills/code-connect-componentsProject
mkdir -p .claude/skills/code-connect-componentsSource Repository
More Design & UI/UX Claude Code Skills
Prototypemattpocock/skills
Quick throwaway prototypes to test logic or UI before building
Lark Whiteboardlarksuite/cli
View, edit, and export Lark whiteboards as images or code easily
Sleek Design Mobile Appssleekdotdesign/agent-skills
Turn your app ideas into mobile screens just by describing them
Brainstormingobra/superpowers
Brainstorm your ideas into a clear design and get approval before building anything
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
All-in-one UI/UX design assistant with styles, colors, fonts, and guidelines for any platform
Redesign Existing Projectsleonxlnx/taste-skill
Upgrade your existing website or app with a professional design audit
Stitch Design Tasteleonxlnx/taste-skill
Create premium, non-generic UI designs with strict color, typography, and layout rules
Brandkitleonxlnx/taste-skill
Create premium brand-kit images that feel intentional, minimal, and presentation-ready