MANDATORY prerequisite — you MUST invoke this skill BEFORE calling the getdesigncontext Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
EnglishMANDATORY prerequisite — load this skill BEFORE every generatediagram tool call. NEVER call generatediagram directly without loading this skill first.
EnglishThis skill helps agents use Figma's usefigma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the usefigma tool.
EnglishThis skill helps agents use Figma's usefigma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the usefigma tool.
EnglishUse when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a storyboard from my video", "deconstruct this interaction in Figma", "annotate the UI states in my recording", or "pull the key moments from this video into Figma". Also trigger when the user references a video file (.mp4, .mov, .webm, .avi) together with Figma, design review, interaction analysis, prototypes, or UI states. The skill extracts key visual moments from a video, infers interaction triggers, and builds an annotated Figma Design storyboard using native Figma annotations and uploaded screenshot assets.
English
AGENT SKILLS ATLASIncludes Figma Design to Code, Figma Generate Diagram, Figma Swiftui, and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Figma Design to Code
MANDATORY prerequisite — you MUST invoke this skill BEFORE calling the getdesigncontext Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
Figma Generate Diagram
MANDATORY prerequisite — load this skill BEFORE every generatediagram tool call. NEVER call generatediagram directly without loading this skill first. Trigger whene
Figma Swiftui
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design →
Figma Use Figjam
This skill helps agents use Figma's usefigma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the usefigma tool.
Figma Use Slides
This skill helps agents use Figma's usefigma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the usefigma tool.
Video Interaction Mapper
Use when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a storyboard from my video", "deconstruct this interaction in Figma", "annotate the UI states in my recording", or "pull the key moments from this video into Figma". Also trigger when the user references a video file (.mp4, .mov, .webm, .avi) together with Figma, design review, interaction analysis, prototypes, or UI states. The skill extracts key visual moments from a video, infers interaction triggers, and builds an annotated Figma Design storyboard using native Figma annotations and uploaded screenshot assets.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Figma Design to Code skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- License details are not provided in these listings. Check the author’s terms before using the skills.