New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Figma MCP

by Mystic-Stars in Mystic-Stars/Axolotl

Use the Figma MCP server to translate a Figma design into a Vue page or component layout.

Custom licenceAuto-check passedFrontend & Design

Install Figma MCP

skills CLI
$ npx skills add Mystic-Stars/Axolotl --skill figma-mcp -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Mystic-Stars/Axolotl figma-mcp --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Mystic-Stars/Axolotl.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/figma-mcp .claude/skills/figma-mcp && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
figma-mcp
GitHub stars
517
Token cost
~388 tokens
SKILL.md length
167 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
Custom licence

At a glance

Use the Figma MCP server to translate a Figma design into a Vue page or component layout.

  • Works in 7 steps: Parse the Figma URL from $ARGUMENTS —… → Read the standards above for the… → Call get_design_context with the… → …
  • The user provides a Figma URL
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Asks to implement a design

What it does

Figma MCP is an agent skill from Mystic-Stars/Axolotl. Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma.

Its SKILL.md is about 390 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Figma and Vue.js.

When your agent uses it

  • The user provides a Figma URL
  • Asks to implement a design
  • Wants to draft a page layout from Figma

Example prompts

  • “/figma-mcp”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Parse the Figma URL from $ARGUMENTS — extract the fileKey and nodeId. Convert - to : in the node ID.
  2. Read the standards above for the available tools, adaptation rules, and color usage.
  3. Call get_design_context with the extracted nodeId and fileKey, using clientLanguages: "typescript,html,css" and clientFrameworks: "vue"…
  4. Adapt the output to the Modrinth codebase
  5. Use get_screenshot if you need a closer visual reference of specific nodes.
  6. Use get_variable_defs to verify which design tokens are applied to ambiguous elements.
  7. Build the component as a Vue SFC using Tailwind classes and the project's existing component library.

What it can do on your machine

Read from SKILL.md and the folder at commit aa07e9f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma MCP loads about 388 tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 167 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~53
When it runs · the whole SKILL.md, loaded when a task matches
~388

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 167 words (~388 tokens).

“Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md Also read @packages/ui/AGENTS.md for color token mapping and component conventions.”

— opening of SKILL.md by Mystic-Stars, Custom licence
name
figma-mcp
argument-hint
<figma-url>

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/figma-mcp of Mystic-Stars/Axolotl.

Open the folder on GitHubat commit aa07e9f

Compare with similar skills

Figma MCP next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma MCP compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Figma MCP this skillMystic-Stars/Axolotl517—~388Automated safety check: PassCustom licence
Figma Buildawdr74100/figwright1k—~2.1kAutomated safety check: PassMIT
Figma Codegenawdr74100/figwright1k—~4.3kAutomated safety check: PassMIT
Igniteui Wc Integrate With FrameworkIgniteUI/igniteui-webcomponents170—~1.4kAutomated safety check: PassMIT
Figma Content Operatorlintendo/Axhub-Skills130—~630Automated safety check: PassMIT
Figma To StaticLeoYeAI/openclaw-master-skills2.2k—~7.1kAutomated safety check: PassMIT

Similar skills

  • Figma Build

    awdr74100/figwright

    Build a Figma design from code or a description — the reverse of figma-codegen.

    1k GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Figma Codegen

    awdr74100/figwright

    Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.

    1k GitHub stars~4.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Igniteui Wc Integrate With Framework

    IgniteUI/igniteui-webcomponents

    Install and integrate Ignite UI Web Components packages into React, Angular, Vue 3, LitElement, or vanilla JS/HTML apps, detecting the framework and applying framework-specific setup (package…

    170 GitHub stars~1.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma Content Operator

    lintendo/Axhub-Skills

    用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务，也用于将 HTML/React/Vue 等网页复制到 Figma，尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时，也应与 axhub-commentary 组合。

    130 GitHub stars~630 tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Figma To Static

    LeoYeAI/openclaw-master-skills

    Convert Figma design files to pixel-level mobile-first static HTML/CSS pages.

    2.2k GitHub stars~7.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Cm Frontend Engineer

    kingxiaozhe/cm-workflow

    前端工程师 Skill，执行前端开发任务，自动适配项目技术栈（React/Vue/Svelte/Next.js 等），支持 Figma/Stitch 设计稿还原

    104 GitHub stars~829 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from Mystic-Stars/Axolotl

  • Oil Frontend

    Mystic-Stars/Axolotl

    用于实现、修改、重构或评审产品前端。当前任务涉及页面、组件、交互、表单、状态、数据流、Hook、类型、CSS、前端代码组织或共享实现时自动触发。触发后先阅读 SKILL.md 判断相关范围，只读取与当前任务直接相关的参考文件；如果改动与产品前端无关则停止使用。纯构建、部署、依赖升级、安全、后端任务，以及只解释前端概念而不处理项目实现的请求，不触发。

    517 GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Cross Platform Pages

    Mystic-Stars/Axolotl

    Convert a page to the cross-platform page system so it works in both the website and the desktop app.

    517 GitHub stars~489 tokensUpdated today
    Auto-check passed

  • API Module

    Mystic-Stars/Axolotl

    Add a new API endpoint module to packages/api-client from an OpenAPI schema.

    517 GitHub stars~327 tokensUpdated today
    Auto-check passed

  • I18n Pass

    Mystic-Stars/Axolotl

    Perform an i18n localization pass on changed files or a pull request, converting hard-coded English strings to the @modrinth/ui i18n system.

    517 GitHub stars~435 tokensUpdated today
    Auto-check passed

  • Tanstack Query

    Mystic-Stars/Axolotl

    Convert a page or component from useAsyncData/manual ref patterns to TanStack Query for server state management.

    517 GitHub stars~421 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Figma MCP

What does Figma MCP do?

Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Figma MCP is an agent skill from Mystic-Stars/Axolotl. Use the Figma MCP server to translate a Figma design into a Vue page or component layout.

When should I use Figma MCP?

Figma MCP fits situations like: the user provides a Figma URL; asks to implement a design; wants to draft a page layout from Figma.

How do I install Figma MCP in Claude Code?

Run `npx skills add Mystic-Stars/Axolotl --skill figma-mcp -a claude-code`. Or copy the skill folder (.agents/skills/figma-mcp in Mystic-Stars/Axolotl) into .claude/skills/figma-mcp in your project. Claude Code loads it when a task matches its description.

How do I install Figma MCP in Codex?

Run `npx skills add Mystic-Stars/Axolotl --skill figma-mcp -a codex`. Or copy the skill folder (.agents/skills/figma-mcp in Mystic-Stars/Axolotl) into .agents/skills/figma-mcp in your project. Codex loads it when a task matches its description.

Can I use Figma MCP in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Mystic-Stars/Axolotl --skill figma-mcp -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-mcp, .gemini/skills/figma-mcp, .github/skills/figma-mcp and .opencode/skills/figma-mcp in your project.

What does Figma MCP need to run?

SKILL.md names no scripts, command-line tools or credentials: Figma MCP is instructions for the agent only.

Does Figma MCP access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Figma MCP safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma MCP use?

Figma MCP has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Figma MCP use?

About 388 tokens (SKILL.md is roughly 1.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma MCP?

Skills that share tags, products or a category with Figma MCP: Figma Build (awdr74100/figwright, 1k stars), Figma Codegen (awdr74100/figwright, 1k stars), Igniteui Wc Integrate With Framework (IgniteUI/igniteui-webcomponents, 170 stars) and Figma Content Operator (lintendo/Axhub-Skills, 130 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma MCP?

Mystic-Stars (a GitHub user) maintains it in Mystic-Stars/Axolotl, which has 517 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 11, 2026.

Source: Mystic-Stars/Axolotl on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.