Figma Generate Diagram
figma/mcp-server-guideYou can turn your ideas into clear diagrams for FigJam just by describing them. The tool uses Mermaid syntax to create editable flowcharts, sequence diagrams, ERDs, state diagrams, and Gantt charts. It handles system architecture, decision trees, and process flows.
But not every diagram type works. Pie charts, mindmaps, and class diagrams are not supported. The tool also cannot change fonts or move shapes after creation. For those edits, you should open the diagram in Figma.
Always load this skill before using the diagram generator. Skipping it causes errors and poor results. Follow the step-by-step guidance to pick the right type and avoid common mistakes like emojis or special characters in labels.
Add Figma Generate Diagram skill to your workflow
Global
mkdir -p ~/.claude/skills/figma-generate-diagramProject
mkdir -p .claude/skills/figma-generate-diagramSource 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