Figma Code Connect
figma/mcp-server-guideFigma designers and developers can now connect design components directly to code. This skill creates template files that map Figma elements to code snippets. It uses the Code Connect feature inside Figma.
You give it a Figma URL. It finds the parts not yet mapped. Then it fetches the right details to build a .figma.ts file for each component. This saves time and keeps design and code in sync.
Before you start, make sure the Figma MCP server is connected and the components are published to a team library. The skill walks you through every step from URL parsing to file creation.
Add Figma Code Connect skill to your workflow
Global
mkdir -p ~/.claude/skills/figma-code-connectProject
mkdir -p .claude/skills/figma-code-connectSource 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