MCP CheckClaude skills for Figma
50 of 109 public skills on GitHub that mention Figma: skills named for it first, then by stars, at most 3 from one repository. Each links to its folder; copy it into ~/.claude/skills/ to use it.
figma extract
Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.
nexu-io/open-design★ 105kApache-2.0Folder:
figma-extractunderstand figma
Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.
Egonex-AI/Understand-Anything★ 89kMITFolder:
understand-figmafigma design to code
Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a…
Devin-AXIS/iPolloWork★ 7.3kLicence: see repoFolder:
figma-design-to-codefigma code connect
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
Devin-AXIS/iPolloWork★ 7.3kLicence: see repoFolder:
figma-code-connectfigma generate design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma',…
Devin-AXIS/iPolloWork★ 7.3kLicence: see repoFolder:
figma-generate-designfigma implement design
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement…
foryourhealth111-pixel/Vibe-Skills★ 3.8kApache-2.0Folder:
figma-implement-designfigma automation
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
davepoon/buildwithclaude★ 3.7kMITFolder:
figma-automationfigma integration
Keep Figma and code in sync. Map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components…
plugin87/ux-ui-agent-skills★ 3.1kMITFolder:
figma-integrationfigma
Look up your Figma user, read file metadata, and post comments on files. Trigger phrases: figma, figma file, design file.
Anil-matcha/awesome-muse-connectors★ 1.4kMITFolder:
figmafigma roundtrip
Keeps a video motion-graphics kit and its editable Figma boards in sync - the creator designs and tweaks in Figma, Claude ports the changes into the Remotion components and brand tokens, and mirrors code changes back. Use when the creator says they changed…
appariciojunior/video-editor-skills★ 337Licence: see repoFolder:
figma-roundtripfigma to react
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
majiayu000/spellbook★ 288MITFolder:
figma-to-reactfigma to code
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
majiayu000/spellbook★ 288MITFolder:
figma-to-codefigma to psd master
Figma 转 Photoshop (PSD) (Figma → Photoshop (PSD) 设计稿转换 (从业者视角) — 把 Figma 设计文件高保真转换为 Photoshop 分层 PSD, 核心是对齐两个工具的概念/渲染差异, 让产出的设计稿视觉一致. 覆盖: (a) 概念映射 — Figma frame / auto-layout / component / variant / constraint / vector-network / boolean / effect…
swaylq/master-skill★ 174MITFolder:
outputfigma to generateblocks
Convert Figma designs to GenerateBlocks V2 format for WordPress
wpgaurav/generateblocks-skills★ 141No licence statedFolder:
figma-to-generateblocksfigma ops
Router and composition workflows for Figma via the official Figma MCP: which Figma skill/tool for which job, capture-to-canvas (screenshots or shotcraft crops into a Figma file), moodboard and reference-board composition (grid, plus, loose-plus…
0xDarkMatter/claude-mods★ 78MITFolder:
figma-opsfigma to divi
Use when the user says 'figma to divi', 'build this figma design in divi', or hands over a Figma frame to rebuild in WordPress on a Divi site. Maps the Figma node tree to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes,…
respira-press/agent-skills-wordpress★ 49MITFolder:
figma-to-divifigma to gutenberg
Use when the user says 'figma to gutenberg', 'figma to blocks', or hands over a Figma frame to rebuild on a WordPress site that uses the block editor. Maps the Figma node tree to core Gutenberg blocks, registers the frame's palette in Global Styles, and…
respira-press/agent-skills-wordpress★ 49MITFolder:
figma-to-gutenbergfigma to bricks
Use when the user says 'figma to bricks', 'build this figma design in bricks', or hands over a Figma frame to rebuild on a Bricks Builder site. Maps the Figma node tree to native Bricks elements with BEM global classes, imports the frame's palette into the…
respira-press/agent-skills-wordpress★ 49MITFolder:
figma-to-bricksfigma mcp
Convert Figma designs into production-ready code using MCP server tools. Use this skill when users provide Figma URLs, request design-to-code conversion, ask to implement Figma mockups, or need to extract design tokens and system values from Figma files.…
tdimino/claude-code-minoan★ 41MITFolder:
figma-mcpfigma copy rewriter
Rewrite UI copy directly on Figma files to be simpler, jargon-free, and terminologically consistent. Trigger when: user says "rewrite copy", "simplify copy", "fix the text", "copy audit", "UX copy review", "clean up the wording", shares a Figma URL and…
qa-aman/claude-skills★ 23MITFolder:
figma-copy-rewriterfigma matcher
Enforces pixel-perfect implementation of Figma designs by exhaustively extracting every visual property from Figma, spinning up Chrome DevTools to measure the current implementation, building a full comparison checklist, and fixing all discrepancies in a…
Flagrare/agent-skills★ 12No licence statedFolder:
figma-matcherfigma2dsl
figma 节点树 → 高保真界面还原 + 可交互 harness。两条产物:全保真 .ui.json(渲染真源,逐节点真样式不折叠)+ DSL .md(语义抽象,喂 aigd/KB)。要把 figma 设计帧导成"可还原/可点/可跑"的客户端、或导成结构化 DSL 时用。文法权威在 references/界面DSL规范-figma2dsl扩展.md;本 skill 只编排、不复制文法。可移植、项目无关。
ProdaZhang/figkit★ 11MITFolder:
figma2dslfigma2godot
把 figma2html 管线捕获的中间表示(IR:.ui.json 像素快照 + flow.json 交互声明)编译成 Godot 4 文本场景(.tscn)与 GDScript 运行时 flow 绑定器。输入 = figma2html capture 的产物;本 skill 是 Godot 4 编译后端,不含 capture。要在 Godot 工程里还原 figma 界面像素与交互(底屏+弹窗/守卫/列表/勾选)时使用。
ProdaZhang/figkit★ 11MITFolder:
figma2godotfigma2cocos
把 figma2html 管线产的 IR(.ui.json 像素快照 + flow.json 交互声明)落到 Cocos Creator 3.x —— TS 运行时解释器(组件加载 ui.json 动态建节点树 + flow 绑定器)+ python 离线校验器(引用完整性 + 资产清单)。要在 Cocos 工程里还原 figma 界面与交互(底屏+弹窗/守卫/列表/勾选)时使用;capture 本身归 figma2html。
ProdaZhang/figkit★ 11MITFolder:
figma2cocosfigma ui ux consistency
Use when auditing visual consistency, creating a design system, reconciling Figma with code, or building a component library from existing screens. Sequences the Figma plugin skills in 5 phases: Audit, Foundations, Library, Implement, Governance, with…
Tekkiiiii/the-agency★ 7No licence statedFolder:
figma-ui-ux-consistencyfigma design compare
Use when checking whether a built website, web app or mobile app screen matches its Figma design, doing design QA or a pixel-perfect review, comparing implementation with a Figma frame or link, or fixing "doesn't look like the design" feedback.
WST2002/claude-code-skills★ 3MITFolder:
figma-design-comparedesign extract
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
nexu-io/open-design★ 105kApache-2.0Folder:
design-extracttoken map
Map an extracted Figma / source-code token bag onto the active OD design system, producing a deterministic mapping the generate stage can consume.
nexu-io/open-design★ 105kApache-2.0Folder:
token-mapk8s manifest generator
Create production-ready Kubernetes manifests for Deployments, Services, ConfigMaps, and Secrets following best practices and security standards. Use when generating Kubernetes YAML manifests, creating K8s resources, or implementing production-grade…
wshobson/agents★ 42kMITFolder:
k8s-manifest-generatorfrontend forge fe operations
Operate FrontendExtension (FE) resources in frontend-forge: create, update, rebuild, inspect package artifacts, download packages, publish, unpublish, delete, and debug package/publish controller behavior. Use this skill whenever the user mentions FE…
kubesphere/kubesphere★ 17kLicence: see repoFolder:
frontend-forge-fe-operationsqa test planner
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
softaworks/agent-toolkit★ 2.6kMITFolder:
qa-test-plannerdesign handoff brief
Transform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD into design…
mohitagw15856/pm-claude-skills★ 1.5kMITFolder:
design-handoff-briefux audit walkthrough
Minimalist UX/Interaction Audit Expert that deconstructs complex interactions through cognitive load and operational efficiency lenses. Use this skill when you need to perform a UX walkthrough audit on a Figma prototype or web interface, evaluating…
AIPexStudio/AIPex★ 1.3kMITFolder:
ux-audit-walkthroughelectron
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a…
fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder:
electrondistribution channels
When the user wants to plan product distribution via marketplaces, app stores, or third-party platforms. Also use when the user mentions "distribution channels," "marketplace listing," "app store listing," "Figma plugin," "Chrome extension marketplace,"…
kostja94/marketing-skills★ 1.1kMITFolder:
distribution-channelsintegration orchestrator
Generate a phased delivery orchestration plan for creative-direction-driven work: which skills run when, what locks at which gate, how handoffs occur, and how the cadence implements in the team's tools (Jira, Linear, Notion, Figma, GitHub) with AI agents…
rampstackco/claude-skills★ 1kMITFolder:
integration-orchestrator45 design tool brief global
Use when a designer needs hands-on production direction inside a tool — Canva, Figma, or Adobe Express: which template to start from, the operating order, element-by-element mapping, grid and spacing, brand kit colors and fonts, export checklist, and the…
minhnv0807/ai-business-skills★ 638MITFolder:
45-design-tool-brief-global45 brief canva
Dung khi designer se lam TREN CANVA hoac Figma va can direction thao tac cu the — chon template base, thu tu thao tac, map tung element vao vi tri, luoi va khoang cach, mau va font lay tu brand kit, checklist export, viec nen va khong nen lam. Kich hoat…
minhnv0807/ai-business-skills★ 638MITFolder:
45-brief-canvadesign to code
Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.
vibeeval/vibecosystem★ 541MITFolder:
design-to-code403 frameworks quarkus validation
Use when you need to design, review, or improve validation in Quarkus applications — including Bean Validation on JAX-RS resources, @Valid on parameters and CDI beans, constraint groups, @ConfigMapping validation, custom constraints, nested DTO validation,…
jabrena/plinth★ 456Apache-2.0Folder:
403-frameworks-quarkus-validationdesign tokens sync
Audit and sync design tokens between the source of truth (tokens.json, Figma variables export) and the code that should consume them (Tailwind config, CSS custom properties, theme files). Finds drift -- hardcoded values, orphan tokens, out-of-date copies…
OneWave-AI/claude-skills★ 398MITFolder:
design-tokens-syncfigcraft
Headless UI/interface design with FigCraft (Figma-style frames, shapes, text, components), provisioned on demand by pi-craft - build screens from a JSON-lines script, export frames or layers as png, jpg, svg or pdf at 1x-3x. Use for "design a mobile login…
BlackBeltTechnology/pi-agent-dashboard★ 337MITFolder:
figcraftdiscover brand
This skill orchestrates autonomous discovery of brand materials across enterprise platforms (Notion, Confluence, Google Drive, Box, SharePoint, Figma, Gong, Granola, Slack). It should be used when the user asks to "discover brand materials", "find brand…
w95/awesome-claude-corporate-skills★ 288MITFolder:
discover-brandtool.02 multi mcp coordination.3ca611485ca5aa65
Orchestrates design-to-development handoff across Figma, Google Drive,
AI45Lab/OpenART★ 260AGPL-3.0Folder:
tool.02_multi_mcp_coordination.3ca611485ca5aa65design and templates
The reusable on-brand template-SYSTEM skill -- build a brand kit + a small set of reusable templates so a non-designer can produce consistent on-brand graphics fast across formats. Use when someone wants templates, a brand kit, a consistent visual system,…
social-media-skills/skills★ 213MITFolder:
design-and-templatesclone website
Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.
dembrandt/dembrandt-skills★ 175MITFolder:
clone-websitematerial design 3 ui
Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive…
skydashnet/material-design-3-ui-skill★ 158MITFolder:
material-design-3-ui-skillanydesign
Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of…
Infrasity-Labs/dev-gtm-claude-skills★ 150MITFolder:
anydesignultimate design system master
Create comprehensive design systems, brand identities, and UI component libraries. Use when the user says "create design system", "build brand identity", "design UI components", "generate design tokens", "create figma specs", "review my design", "analyze…
fabricioctelles/skills★ 123Apache-2.0Folder:
ultimate-design-system-masterscreenshot to code expert
Expert guide for converting UI screenshots, mockups, Figma frames, and whiteboard sketches into production-ready frontend code using vision-capable frontier models (Gemini 4 Pro, Claude 5.5, GPT Astra 6) — multi-pass visual extraction, component…
roedyrustam/vibes-plug★ 116MITFolder:
screenshot-to-code-expert
Claude skills for Figma: common questions
Is there a Claude skill for Figma?
There are 109 of them, spread over 60 repositories on GitHub. Named for it and most starred: figma extract (nexu-io/open-design, ★ 105k), understand figma (Egonex-AI/Understand-Anything, ★ 89k) and figma design to code (Devin-AXIS/iPolloWork, ★ 7.3k). Stars rate the repository a skill sits in, not the skill.
How do I install a Claude skill for Figma?
For Figma, take the figma-extract folder from nexu-io/open-design (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. In the Claude apps, zip that folder and upload it as a custom skill in settings.
Are all these Figma skills in English?
No: 4 of those listed, such as figma to psd master and figma2dsl, are written mainly in Chinese, Japanese, Korean or Russian rather than English, though the Figma task is the same. Claude can follow them either way, but read them before you install.
Should I use a skill or an MCP server for Figma?
A skill teaches Claude a way of working; an MCP server gives it new tools, like access to Figma itself. We list 39 MCP servers for Figma if you need the connection.
What should I check before installing a Figma skill?
A Figma skill is instructions Claude follows, and it can bundle scripts Claude runs, so read SKILL.md and every script first: for figma extract, that is everything in the figma-extract folder. 2 of the 50 here, figma ui ux consistency and figma design compare, come from repositories with under 10 stars, so few people have looked at them. Red flags: piping a download into a shell, sending files to a URL, and instructions to hide what it does from you.
Are these Figma skills maintained?
84 of the 109 Figma skills sit in repositories that changed in the 30 days before 31 Oct 2026.
More topics: every “Claude skills for…” page.