Builds an animation from scratch the way a design engineer would: it chooses the curve, duration and properties, keeps motion off the main thread where it matters, and explains the choice.
Animate (Emil Kowalski)
25 runs/mo
Design
Figma (official plugin)
Figma's official plugin for Claude Code bundles the Figma MCP server with skills for implementing designs from a file (figma-power), extracting design context (figquery), mapping UI recordings to storyboards and turning a PRD into a FigJam plan.
- Free community skill
- Installs from source, runs locally in your agent
- Figma
- figma/mcp-server-guide
skillgild install figmaWorks with
License: not stated by the project · Created by Figma · The project lists support for Claude Code, Cursor, VS Code, Gemini CLI
What you get
- Figma's official plugin for Claude Code bundles the Figma MCP server with skills for implementing designs from a file (figma-power), extracting design context (figquery), mapping UI recordings to storyboards and turning a PRD into a FigJam plan.
- Design-to-code with the real components, variables and Code Connect links.
Requirements
- Figma account; MCP auth
Install the Figma (official plugin) skill
A community skill: it installs from its own repository and your agent runs the project's instructions locally with your own model. SkillGild lists it and credits the author; nothing runs on SkillGild.
With the SkillGild CLI (needs git). It clones figma/mcp-server-guide and copies the skill folder into the right place for your agent; use
--agent codex,cursororgemini-clifor other clients.Terminal skillgild install figma --agent claude-codeClaude Code plugin marketplace.
Terminal claude plugin install figma@claude-plugins-officialManual copy.
Terminal Add the remote MCP server https://mcp.figma.com/mcp to your client, then use the skills from the guide repoOr copy the folder yourself from figma/mcp-server-guide into
~/.claude/skills/figma/for Claude Code,~/.agents/skills/for Codex,~/.cursor/skills/for Cursor or~/.gemini/skills/for Gemini CLI, then start a new session.
Try asking
Requests that trigger this skill once it is installed in your agent.
Implement the Checkout frame from this Figma link
Extract the tokens used on the pricing page design
Build the component exactly as designed, using Code Connect
Questions
How do I install the Figma (official plugin) skill in Claude Code?
Run skillgild install figma --agent claude-code: the SkillGild CLI clones figma/mcp-server-guide and copies the skill folder into ~/.claude/skills/figma. You can also use the project's own commands shown above, or copy the folder yourself. Use --agent codex, cursor or gemini-cli for other clients.
Is Figma (official plugin) free and open source?
The figma/mcp-server-guide repository does not include a license file at the time of listing, so treat it as all rights reserved by the author until one is added. SkillGild lists and links it; it does not host or redistribute the files.
Which agents does Figma (official plugin) work with?
The project lists Claude Code, Cursor, VS Code, Gemini CLI. It is a plain Agent Skills folder (SKILL.md plus supporting files), so any client that reads that format can load it.
Does Figma (official plugin) run on SkillGild?
No. Figma (official plugin) is a community skill: your agent runs its instructions locally with your own model, and SkillGild lists, credits and installs it. Hosted SkillGild skills are marked differently and run through the SkillGild MCP server.
What does Figma (official plugin) need to work?
Figma account; MCP auth. Everything else is the usual: a coding agent that loads skills and the folder installed where that agent looks for it.
Related guides
Setup steps and worked examples for this kind of skill.
- Best MCP servers for Claude CodeThe MCP servers worth adding to Claude Code for GitHub, browsers, documentation, databases, design and project tools, with the claude mcp add command for each and the skills that put them to work.
- Claude Code plugins: install, build and publishWhat a Claude Code plugin is, how it differs from a skill, the /plugin commands, what goes in plugin.json and marketplace.json, how to test with --plugin-dir, and how to publish your own marketplace.
- How to install Claude Code skills (and skills for Codex, Cursor and Gemini CLI)Install a Claude Code skill from GitHub, a plugin or SkillGild in one command. Folder paths, personal vs project skills, verifying it loaded, troubleshooting, and the same steps for Codex, Cursor and Gemini CLI.
- How to create a Claude skillCreate a Claude skill from scratch: write SKILL.md with a name and description, add scripts and references, test it in Claude Code, make it work in Codex and Cursor, and share it on GitHub, as a plugin or on SkillGild.
More in Design
- FreeDesign
- FreeDesign
Translates Apple's interface and motion principles into web code: spring curves, gesture physics, translucent materials and typography, as explained in Apple's WWDC design sessions.
Apple Design (Emil Kowalski)
25 runs/mo - FreeDesign
Anthropic's canvas-design skill guides Claude to produce finished visual artefacts (posters, covers, social graphics) by composing on an HTML canvas with deliberate typography, grid and colour decisions rather than defaulting to a template.
Canvas Design
25 runs/mo - FreeDesign
Emil Kowalski's design-engineering philosophy as a skill: animation decisions (curves, durations, which properties to animate and which not to), component polish and the invisible details that make software feel right.
Emil Kowalski: design engineering
25 runs/mo - FreeDesign
Anthropic's official frontend-design skill, shipped as a plugin in the claude-plugins-official marketplace and as a skill in anthropics/skills.
Frontend Design (Anthropic)
25 runs/mo - FreeDesign
A design language for AI harnesses: 24 commands (craft, audit, polish, harden, animate, colorize, typeset, layout, distill, bolder, quieter and more), 60 deterministic detector rules and a live in-browser mode.
Impeccable
25 runs/mo - FreeDesign
Professional logo and brand-mark design from brief to production files: concepts, clean geometric SVG, optical refinement, tests at 16 px and in one colour, presentation boards and brand guidelines.
Logo Design
25 runs/mo - ProDesign
Included with SkillGild Pro. Checks the colors in your charts, slides or interface against WCAG contrast ratios with SkillGild's palette validator, and suggests passing alternatives. More premium skills will be added as they launch.
Pro Preview
Included with Pro - FreeDesign
Anti-slop frontend skill for landing pages, portfolios and redesigns. Reads the brief, picks the right design direction and ships interfaces that do not look templated.
Taste Skill
25 runs/mo - FreeDesign
The anti-slop frontend skill: a set of SKILL.md files that push an agent toward stronger layout, typography, spacing and motion so generated interfaces stop looking generic.
Taste Skill (design-taste-frontend)
25 runs/mo