Figma Generate Design
figma/mcp-server-guideTurn your app code or description into a complete Figma screen. This skill builds pages, modals, drawers, sidebars, and other multi-section views by reusing your design system components and tokens. You do not need to draw boxes with hex colors. The skill finds existing components, variables, and styles from your Figma library and assembles them section by section. The result matches your codebase and saves you hours of manual design work.
Anyone who builds or updates UI screens in Figma can benefit. Whether you are a developer pushing new pages to a design file or a designer creating consistent layouts from a codebase, this skill handles the repetitive work. It works best when your Figma file has a published design system with components and style tokens.
Add Figma Generate Design skill to your workflow
Global
mkdir -p ~/.claude/skills/figma-generate-designProject
mkdir -p .claude/skills/figma-generate-designSource 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