Figma Designer
charon-fan/agent-playbookDesigners and developers can work better together with this skill. It takes a Figma design link or a screenshot and turns it into a clear plan for building the interface. Every color, font, spacing, and component is listed in detail. This makes it easy for developers to create exactly what was designed. No more guessing or back and forth.
The skill connects to the Figma MCP server to pull all the design data. It then organizes the information into a product requirements document. The document includes layout structures, design tokens, and component specs. Anyone on the team can use this to start coding right away.
This skill saves time and reduces mistakes. It is perfect for teams who want to move from design to code smoothly. You just need a Figma link or to upload a screenshot and mention Figma. The skill does the rest.
Add Figma Designer skill to your workflow
Global
mkdir -p ~/.claude/skills/figma-designerProject
mkdir -p .claude/skills/figma-designerSource 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