378 Claude Code skills tagged Figma. Browse all third-party tool or service-related skills in the open ClaudSkills registry — free to install, one-click via the desktop app.
Showing top 200 of 378 skills, ranked by quality score.
Generate prototype React components + Storybook stories from Figma URLs. 6-phase pipeline: figma_to_react → UntitledUI matching → prototype synthesis → verify → storybook integrati
product
Configure Code Connect dans un projet pour mapper les composants Figma vers le code existant. Utiliser pour initialiser l'intégration Figma dans un projet, quand l'utilisateur dit
general
Visual design exploration in Paper Desktop. Generate multiple variants as artboards on the Paper canvas, compare them side-by-side, collect feedback, iterate. Use when the user ask
tools
Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping,
product
Kubernetes-native configuration management with Kustomize. Use for environment-specific configs, resource patching (strategic merge, JSON6902), ConfigMap/Secret generation, overlay
engineering
Сквозной дизайн-воркфлоу: Figma → код → data classification (dynamic/static) → i18n → токены → FSD → shadcn/ui → ReactBits → full validation в браузере. Используй для: /rldyour-des
general
Visually verify a component's frontend rendering on local AEM — screenshots the component in wcmmode=disabled, compares against Figma reference or requirements using multimodal vis
general
Maquina de design UI/UX. 67 estilos, 96 paletas, 57 font pairings, 13 stacks. Design system, componentes, landing pages, dashboards. Integra com shadcn, Figma, v0.
product
Generate design graph nodes (UserJourney, Flow, Page, Component) from any input: Jira ticket, plain-text description, scenario references, or Figma wireframes. Builds requirement c
product
Compare Figma design system components against the Breeze design graph component registry. First builds existingcomponents.json by iteratively fetching all Component nodes from MCP
science
Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", o — from Le
product
Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", o — from al
product
Génère des couvertures professionnelles pour ebooks et produits digitaux. Produit un brief créatif complet, une couverture HTML/CSS standalone, des prompts pour IA image (Midjourne
general
Storybook の story が指す Figma node-id が広すぎる/古い場合に、対象コンポーネントに対応する正しい子 node-id を解決して story の Figma URL を更新する。「Figma と story の紐付け直して」「figma の node 絞り込んで」「story の design URL 古い」と言われた時に使用
engineering
Figma URL 또는 node ID가 주어지면 디자인을 분석하고 구현 계획서를 작성한다. 참조할 기존 코드 없이 처음부터 구현할 때 사용. 참조 코드가 있으면 figma-reference-plan을 사용.
general
Snapshot a Figma frame's metadata, tokens, design-context, and screenshot to local files under `.ai-docs/figma/<slug>/` so downstream agents (design-builder, design-grader, spec au
engineering
Compare running app screens against Figma designs — captures screenshots from both sources and produces a structured gap report
general
Convert visual input (screenshots, Figma exports, URLs, inspiration images) into working pages or components. Three modes: 1:1 faithful copy, inspiration-based using project theme
general
End-to-end Figma-to-code pipeline. Runs plan-design then build-design in one command with no user interaction. Use when invoking "/full-build".
general
Add an HGI icon, a raw SVG, or a Figma icon to the inline UI-icon set so it renders as mask-image via `.nds-icon.nds-hgi-{name}`. Use when components or chrome need a new icon that
general
Extract design assets and metadata from Figma using the Figma REST API.
general
Convert an image (screenshot, mockup, Figma export) into an HTML page styled with Tailwind CSS. Use this skill whenever the user says "image-to-code …", asks to turn a design image
general
This skill should be used for external artifact ingestion: JIRA/Figma/Google Docs to SPEC.md + DESIGN.md via MCP connectors, plus cross-repo spec fetch with version pinning
general
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, co — from ja
security
Adversarial cooperation loop for creating complete design library from Figma with CSS, assets, HTML mockups, and documentation. 對抗式協作循環，從 Figma 生成完整設計庫：CSS、資產、HTML、文檔。 Use when: ex
general
AI 原生 UI 设计与代码一体化工作流（claude-design / figma / v0 / lovable）。auto-loaded by frontend-agent；由 /import-design 命令显式触发。
general
Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integ
engineering
Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trig
general
Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator
tools
Generate React/Vue/HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automa
engineering
Install the Anima SDK and configure authentication for Figma-to-code generation. Use when setting up design-to-code automation, configuring Figma token access, or initializing the
general
Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server
general
Production readiness checklist for Anima design-to-code pipelines. Use when deploying automated design-to-code services, preparing CI/CD Figma-to-code automation, or validating out
general
Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team
engineering
Secure Anima and Figma tokens for design-to-code pipelines. Use when protecting API credentials, restricting Figma access scope, or hardening CI/CD design automation pipelines. Tri
security
Upgrade @animaapp/anima-sdk versions and handle API changes. Use when upgrading SDK versions, migrating from the Figma plugin workflow to SDK-based automation, or adapting to new A
tools
Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma file
general
Figmaやデザイン指示をclapboardのUI実装差分へ変換する。Use when a design direction, screenshot, Figma note, or visual feedback must be decomposed into scoped UI changes using existing Next.js, Tailwin
general
Маршрутизирует browser tasks между Webwright, Playwright CLI и Chrome DevTools MCP. Используй для: проверь в браузере, браузер, UI, визуально, скриншот, Figma, фото, консоль, сеть,
general
Run the full design-to-code roundtrip — analyze a Figma design, surface gotchas, write designer answers back into the file via the Figma Plugin API (use_figma), re-analyze to confi
general
Export assets and read Figma file metadata using the figma CLI (silships). Use for file export, styles, and components. Does NOT fully replace the Figma MCP — keep MCP for design t
tools
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this comp
general
Sync React components to Figma designs. Use when: 'sync component to Figma', 'generate Figma from code', 'create design system in Figma', 'export React to Figma'. Parses React/TSX
general
The Figma MCP server brings Figma design context directly into your AI workflow.
general
Complete design library extraction workflow with validation and dependency checking. 完整設計庫提取工作流：含驗證與依賴檢查。 Use when: extracting full design library, running all phases in order, ext
general
Use this when building a net-new React component for the design system. Works with full specs (Figma + Design Rules) or Shadcn-first when specs aren't ready yet. Triggers on: "Buil
general
Extract single Figma component with CSS, assets, documentation, and HTML mockup. 單組件全量提取：CSS、資產、文檔、HTML。 Use when: extracting one component fully, generating component docs, export
general
背景画像＋コピーから広告クリエイティブのカンプ（静止画 PNG）を量産する。HTML/CSS でベクター品質の文字組みを作り agent-browser で PNG 書き出し（$0・Figma 不要）。ブランド（色/書体/ロゴ）は対象プロダクトの docs/product.md から読む。X(Twitter) 等の広告カンプ作成で使う。「広告カンプ作って」「
ads
Extract ALL assets from Figma including vectors, fills, backgrounds, and icons that don't have export settings. 全量提取 Figma 資產：向量、填充、背景、無導出設置圖標。 Use when: exporting all icons and im
general
NVS/Preferences configuration storage for the pool-controller — ConfigManager API, key naming, NVS vs LittleFS trade-offs, OTA-safe persistence, and migration. 🇩🇪 Deutsche Trigger:
general
Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.
general
Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis. Use when convertin — from fa
general
Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis. Use when convertin — from ma
science
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "cu — from va
product
Deploy applications to Kubernetes with production-ready manifests. Supports Deployments, Services, Ingress, HPA, ConfigMaps, Secrets, StatefulSets, and NetworkPolicies. Includes he
engineering
Build a connected multi-page Figma flow (onboarding, checkout, KYC, etc.) into production-ready frontend code: per-page components, a shared layout, routing, optional shared state,
general
Use during a frontend slice's spec step when the convergence target is judged perceptually by a human (UI aesthetics/UX) — routes the perceptual problem to an external AI design to
general
Despliega aplicaciones en clústeres de Kubernetes usando manifiestos kubectl para Deployments, Services, ConfigMaps, Secrets y recursos Ingress. Implementa verificaciones de salud,
engineering
Automatically extract technical requirements from design references when user mentions Figma, uploads images, or says "implement this design". Analyzes colors, typography, spacing,
product
Turn a visual mockup (HTML/PNG/Figma/spec) into a machine-readable design contract plus co-located mockup and #Preview/capture gates, so an executing agent cannot drift from the de
general
Extract design tokens (color / typography / spacing) from imported source code, screenshots, or Figma exports into the canonical token bag token-map consumes.
general
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 hando
product
Эксперт по design handoff. Используй для спецификаций дизайна, Figma annotations и developer handoff.
product
Creates accurate frontend implementations from visual references while maintaining design consistency. Use when user provides Figma URLs, screenshots, design images, or requests UI
general
Creates production-ready design files, prototypes, and specifications for development teams. Translates validated concepts into detailed, implementable designs with comprehensive s
product
Extract comprehensive JSON design specifications from visual sources including Figma exports, UI mockups, screenshots, or live website captures. Produces W3C DTCG-compliant output
general
Context-aware routing to the Anytype iOS design system including icons, typography, colors, and spacing. Use when working with Figma-to-code translation, design assets, or UI compo
product
Organizar, padronizar, auditar e evoluir design systems e templates no Figma com foco em componentes, nomenclatura, foundations, estrutura de arquivos e consistencia visual. Use qu
product
Detect and track design token drift between Figma design systems and code implementations - report-only skill that identifies inconsistencies and creates wrangler issues for resolu
product
Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling,
growth
Converts Figma/design specifications into production-ready UI components with accurate spacing, typography, color tokens, responsive rules, and interaction states (hover, focus, di
general
Create Drupal paragraph types from Figma designs or screenshots using the design-specialist agent. Auto-activates when user provides a design reference and asks to create a Drupal
general
Create WordPress block patterns from Figma designs or screenshots using the design-specialist agent. Auto-activates when user provides a Figma URL or design mockup and asks to crea
general
Apply 2026's top graphic design trends to any creative brief. Based on Kittl × Savee's 2026 Design Trends Report (10 trends + 2 honorable mentions), backed by Adobe, Figma, and Pin
general
Support designers without code — explain sync in plain language, Figma vs rule fixes, draft proposed-rules entries. Use with designer-partner or when users avoid source files.
general
Création de design systems cohérents avec tokens, composants et guidelines. Se déclenche avec "design system", "composants UI", "tokens", "style guide", "atomic design" — from prod
product
Conseille sur la création de wireframes et mockups pour apps et sites. Se déclenche avec "wireframe", "maquette", "mockup", "prototype", "Figma", "UI layout", "comment st — from pr
product
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 listi
general
Documents all UI state variations (default, empty, error, loading, success) from Figma designs. Use when defining complete UI specifications before implementation.
general
Generate professional Product Requirement Documents (PRD) from multiple sources — Figma designs, briefs, user research, existing code. Includes risk analysis, RICE prioritization,
product
Downloads images, icons, and SVGs from Figma designs. Use when extracting visual assets from Figma for implementation.
general
Use when configuring/validating the drunk-lib ConfigMap partial — answers questions, generates values.yaml snippets, validates a section. Triggers on: configmap, cm, env config.
general
Drupal SDC Figma-to-code pixel-parity workflow using direct Figma MCP tools, with screenshot-gated validation and node-specific capture dimensions.
engineering
PRD를 입력하면 디자인 시스템 컴포넌트 인스턴스 기반으로 Figma 화면 3개 안을 자동 생성하는 스킬. 비 디자이너가 빈 Figma 파일에서 바로 사용 가능.
product
Design system intelligence. Search AntD, Material-UI, Figma, Bootstrap, Tailwind specs. Generate compliant CSS code. Audit for violations. Components, colors, typography, spacing,
general
Use when working with entity types, entity storage, entity queries, field definitions, field type plugins, config entities, config import/export, or files in packages/entity/, pack
general
Automate user-installed Electron desktop apps (Slack, Discord, VS Code, Notion, Figma, Spotify, etc.) via CDP using this repo's Libretto CLI. Use when the task is to control a loca
engineering
\"Comprehensive asset extraction from Figma - finds ALL images, icons, and vectors including those without export settings. 全量提取 Figma 資產：含無導出設置的圖標與矢量。 Use when: exporting figma ic
general
\"Interactively extract components from Figma with SCSS/CSS using Go templates. 交互式提取 Figma 組件，以 Go 模板生成 SCSS/CSS。 Use when: extracting specific figma components, generating compon
general
\"Extract complete design library from Figma with CSS, assets, HTML mockups, and documentation using adversarial quality verification. 對抗式全量提取設計庫：CSS、資產、HTML、文檔。 Use when: extracti
general
\"Interactively extract page mockups from Figma with SCSS/CSS layouts. 交互式提取 Figma 頁面模型及 SCSS/CSS 佈局。 Use when: extracting full page layouts, generating page HTML mockups, exportin
general
Extracts and documents design tokens (colors, typography, spacing, shadows, etc.) from Figma designs. Updates the "デザイントークン" section in screen spec.md. — from farmanlab/ai_agent_or
general
Extracts and documents design tokens (colors, typography, spacing, shadows, etc.) from Figma designs. Updates the "デザイントークン" section in screen spec.md. — from majiayu000/claude-ski
science
Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md. — from farmanlab/ai_agen
general
Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md. — from science/research-
science
Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md. — from science/research-
science
Pickup 1 task từ backlog đúng quy trình — chọn task hợp lý (priority, blocker, assignee), đọc HẾT spec/ERD/API doc/Figma trỏ tới trong description, set `meta_status="IN_PROGRESS"`
general
Full feature development workflow — fill in feature name, Figma link, and Postman link, then follow all phases from audit to verify.
product
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Fig
general
Deep debugging for Figma API issues: network analysis, response inspection, and support escalation. Use when standard troubleshooting fails, diagnosing intermittent failures, or pr
engineering
Run the advisory Figma visual-alignment review (Layer 2 of the Surprisal Party E2E tests): for an epic, compare each live Playwright app screenshot against its Figma Design UI fram
general
Figma URL을 분석하여 디자인 구조, 토큰, 컴포넌트를 추출하고 DesignSystem 매핑을 수행합니다
general
Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-
general
Design and prototype interfaces in Figma - create, edit, and manage design files, components, and collaborate on design projects
product
Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for
product
Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user
product
Direct Figma API interactions for design asset management. Fetch files and components, extract design tokens, export images, manage comments, and access version history.
general
Choose between Figma integration architectures: CLI script, webhook service, or plugin. Use when deciding how to integrate with Figma, comparing REST API vs Plugin API, or planning
engineering
Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and
general
Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contras
product
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
general
Find which Figma version introduced a specific change — a component property or a child node — via a binary search over version history (~log2(N) API calls instead of N). Answers '
general
Cria templates profissionais e editáveis no Figma para artes de canecas personalizadas em sublimação (tamanho padrão 20,5x9,6cm). Use esta skill quando precisar: - Criar templates
tools
Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detec
product
Automate Figma design token sync and asset export in CI/CD pipelines. Use when setting up GitHub Actions for Figma, automating icon exports, or validating design token changes in p
engineering
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, desi — from iz
content
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "li
general
Read, post, reply to, and delete comments on a Figma file via the REST API — including pinning a comment to a specific node and threading replies. Use when the user wants to work w
general
Diagnose and fix common Figma REST API and Plugin API errors. Use when encountering HTTP errors, plugin sandbox crashes, or unexpected API responses from Figma. Trigger with phrase
general
Audit a Figma component library for consistency, coverage gaps, and naming issues. Use when asked to audit components, review a design system, check component consistency, identify
general
Add, edit, and delete Figma component properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) on a COMPONENT or COMPONENT_SET, and instantiate a component then set its instance properti
general
List all components in Figma file with variants, usage statistics, and categorization. 列出 Figma 文件所有組件：含變體、使用統計、自動分類。 Use when: taking component inventory, finding component IDs, c
science
Extract design tokens, colors, typography, and spacing from Figma files via REST API. Use when building a design-to-code pipeline, syncing design tokens, or extracting styles from
general
Export images, icons, and assets from Figma files via the REST API. Use when building an asset pipeline, exporting icons as SVG/PNG, or rendering frames to images for documentation
general
Optimize Figma API usage to minimize costs and stay within plan limits. Use when analyzing request volumes, reducing unnecessary API calls, or choosing the right Figma plan for you
general
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "cu — from el
product
Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution vi
content
Extract production-ready CSS from Figma nodes in multiple styling formats. 從 Figma 節點提取多種格式的生產就緒 CSS。 Use when: extracting CSS from components, generating Tailwind classes, getting
general
Handle Figma API data correctly: comments, versions, user data, and privacy compliance. Use when working with Figma comments API, version history, or ensuring GDPR compliance for F
general
Collect Figma API diagnostic evidence for support tickets and troubleshooting. Use when encountering persistent issues, preparing support tickets, or collecting diagnostic informat
engineering
Extract a single Figma component (or any node) as a full recursive tree to N levels deep — every child's layout, fills/strokes/effects, typography, resolved bound variables (token
product
Deploy Figma-powered applications to Vercel, Cloud Run, and Fly.io. Use when deploying webhook receivers, design token APIs, or Figma-connected web apps to production platforms. Tr
engineering
Extract design specifications from Figma designs using MCP server. Triggers on Figma URLs, design context extraction, or design-to-code workflows. Formerly also known as "figma-ext
general
Write a structured design brief for a Figma design task from a product requirement or feature request. Use when asked to write a design brief, create a design spec for Figma, turn
product
Runs a PM-perspective design critique focused on product outcomes and user goals, not aesthetics. Use when asked for a PM design critique, a product review of a Figma design, or fe
product
Complete Figma design extraction for pixel-perfect implementation. Extracts design tokens, component specs, layouts, and responsive behavior systematically.
general
Parse Figma design files into structured screen hierarchies. Use when working with Figma API, extracting text/labels from design nodes, traversing node trees, detecting cover frame
general
Run a pre-handoff QA checklist on any Figma design before it goes to engineering. Use when asked to QA a Figma design, do a pre-handoff check, review a design before engineering, o
product
Figmaデザインをノード情報を活用してレビューし、該当箇所に個別コメントを投稿する。Use when (1) ユーザーがFigmaデザインのレビューを依頼した時 (2) 実装者目線、エンジニア視点でのフィードバックが必要な時 (3) デザインに対してFigma上にコメントを残したい時。padding/margin、色のコントラスト、グリッド整合性などベーシ
general
Figma 디자인 시스템을 분석하여 .claude/rules/design-system/ 규칙 파일을 생성합니다. 디자인 토큰, 공통 컴포넌트, 레이아웃 패턴, 타이포그래피, 간격 체계 등 자체 디자인 시스템 구성에 필요한 모든 정보를 추출하고 규칙화합니다. Figma 디자인 규칙 추출, 디자인 시스템 문서화, design
product
Figma file URL을 입력받아 디자인 토큰·메타·스크린샷을 Figma MCP로 fetch하고 CLAUDE-DESIGN-PROMPTS.md + ANALYSIS-REPORT.md를 갱신하여 claude.ai/design 결과물 정합도를 향상시킨다. 트리거 — 사용자가 Figma URL과 함께 "디자인 토큰 추출", "
general
One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visu
product
Extracts design tokens from Figma files using the Figma REST API v1 and transforms them into platform-specific formats via Style Dictionary. Supports CSS custom properties, Tailwin
engineering
Extracts design tokens from Figma files using the Figma REST API and style-dictionary. Generates CSS custom properties, Tailwind configs, and Swift/Kotlin theme files from Figma co
engineering
Extracts design tokens from Figma files and generates production-ready CSS, SCSS, JSON, TypeScript, and W3C DTCG format files using the Figma MCP server
engineering
Generate Figma mockups from wrangler specifications with hierarchical file structure and approval tracking
general
Analyzes Figma designs and generates implementation-ready PRDs with detailed visual specifications. Use when user provides Figma link or uploads design screenshots. Requires Figma
product
Extract design data from Figma files using REST API scripts. Includes frame extraction, metadata retrieval, screenshots, design token extraction, annotations, and FigJam content fo
general
Extract components from Figma, convert designs to React components, sync design tokens, and generate code from designs. Bridge the gap between design and code with automated workfl
general
Compare Figma file versions or exports to track design changes. 比較 Figma 文件版本或導出，追蹤設計變更。 Use when: tracking design changes over time, comparing two file versions, auditing style or
general
Download images by imageRef ID or render Figma nodes as images. 按 imageRef ID 下載圖像，或將 Figma 節點渲染為圖像。 Use when: downloading image fills, rendering frames as PNG, creating documentat
general
Configure Figma Enterprise features: OAuth 2.0, team management, and access control. Use when implementing OAuth flows, managing team/project access via API, or building Enterprise
general
Figma design expert for components, auto-layout, design systems, and developer handoff
general
Explore Figma designs by decoding the binary Kiwi wire protocol — full scenegraph access, SVG extraction, CSS properties, no REST API rate limits. Use when the user asks to inspect
general
Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.
general
Export images and icons from specific Figma nodes in multiple formats and scales. 從指定 Figma 節點導出圖像與圖標，支持多格式與多倍率。 Use when: exporting icons as SVG, exporting UI elements at multiple
general
Exports assets from Figma files using the Figma REST API v1. Extracts component sets, design tokens (colors, typography, spacing), and renders frames as SVG/PNG. Generates CSS cust
general
Export Figma design tokens to CSS, JSON, or Tailwind format for integration into development workflows. 導出 Figma 設計令牌為 CSS、JSON 或 Tailwind 格式。 Use when: exporting design tokens, ge
general
Extract design specifications and tokens from Figma files via MCP. Use when pulling design from Figma, extracting colors/typography, or converting Figma to spec. Triggers on keywor
general
Generate a human-readable markdown changelog between two Figma file versions — pages added/removed/renamed plus per-component changes, enriched with author handles and timestamps,
general
Generate complete Markdown documentation for a Figma component — anatomy/layer tree, design tokens (colors, spacing, typography), states/variants matrix, accessibility notes, conte
product
Make your first Figma REST API call to fetch a file and inspect its node tree. Use when starting a new Figma integration, testing API connectivity, or learning the Figma document s
engineering
Use when working with Figma and UI icons are needed — triggers on icon names, icon libraries (Tabler, Lucide, Material Design, Phosphor, Heroicons), or requests to add/insert icons
general
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). Tr
content
Pixel-perfect implementation of Figma designs. When Claude needs to translate Figma designs into code with precise attention to autolayout, variables, and styles.
general
Translate a Figma screen or component into an implementation plan covering structure, states, constraints, and component boundaries.
general
Push design tokens from code INTO Figma as variables — DTCG / tokens.json / a token object → Figma variable collections, modes, and values. Use when the user wants to sync tokens c
general
Respond to Figma API outages, auth failures, and rate limit incidents. Use when Figma integration is down, experiencing errors, or running post-incident reviews for Figma-related f
general
Get help documentation, tool information, and status from figma-query MCP server. 從 figma-query MCP 服務器獲取幫助文檔、工具信息與狀態。 Use when: first-time discovery of figma-query tools, checking
engineering
Set up Figma REST API authentication with personal access tokens or OAuth 2.0. Use when connecting to the Figma API, generating tokens, configuring scopes, or setting up OAuth flow
general
Guidelines for integrating Figma designs with development workflows using MCP servers and best practices
general
Avoid the most common Figma API integration mistakes and anti-patterns. Use when reviewing Figma code, onboarding new developers, or auditing an existing Figma integration. Trigger
general
Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list
general
Lint a Figma node tree for WCAG 2.2 accessibility AND design-system quality — contrast, target size, focus indicators, color-only signaling, hardcoded colors, missing text styles,
product
Load test Figma API integrations and plan for scale. Use when benchmarking API throughput, testing rate limit behavior, or planning capacity for high-volume Figma integrations. Tri
engineering
Set up a local development workflow for Figma plugin and REST API projects. Use when building Figma plugins, creating design-to-code pipelines, or developing against the Figma API
general
Use when working with Figma and brand or product logos are needed — triggers on brand names (React, Next.js, Vercel, Stripe, GitHub), company logos, or requests to add/insert logos
general
Create, update, rename, delete, and organize Figma variables, collections, and modes — including fast batch create/update, setting scopes, code syntax, and adding theme modes. Use
tools
Discipline rules для Figma MCP на Pro-плані ($20: 10 calls/min, 200 calls/day). Prefer get_design_context, scope by nodeId, anti-runaway guard, no-retry on 429, behavioral session
product
CLI for downloading complete Figma design context and metadata to local files. Always use this CLI instead of calling Figma MCP tools (`get_design_context`, `get_metadata`) directl
general
Pull frames/components via Figma MCP, normalize messy or non-autolayout designs, and generate faithful HTML/CSS (or Shopify Liquid) layouts with inferred spacing and responsiveness
general
Standardize Figma-to-code workflow using Figma MCP - always get_design_context first, then screenshot, use project tokens not hardcoded values, validate 1:1 parity
general
Migrate design systems between Figma files, or from other tools to Figma via API. Use when migrating design tokens between files, syncing variables across libraries, or building au
general
Configure Figma API access across dev, staging, and production environments. Use when setting up per-environment tokens, managing multiple Figma files, or isolating development fro
general
Get full details for specific Figma node by ID with selective field projection. 按 ID 取節點詳情，支持字段投影。 Use when: inspecting specific node, getting CSS properties for node, retrieving l
general
Set up monitoring, metrics, and alerting for Figma API integrations. Use when implementing observability for Figma operations, tracking API health, or configuring alerts for rate l
general
Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapp
product
Optimize Figma REST API performance with caching, partial fetches, and connection reuse. Use when experiencing slow API responses, reducing bandwidth for large files, or optimizing
engineering
Enforce security policies and coding standards for Figma API integrations. Use when setting up linting rules for Figma tokens, preventing accidental credential leaks, or enforcing
security
Production readiness checklist for Figma REST API integrations. Use when deploying Figma integrations to production, preparing for launch, or auditing an existing integration for p
general
Plan prototype interactions and flows for user testing in Figma. Use when asked to plan a Figma prototype, set up prototype interactions, define what to prototype for a user test,
product
Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate
product
Figma MCP를 활용하여 디자인 시안을 인스타겟 프론트엔드 컨벤션(styled-components, Next.js Pages Router)에 맞게 UI 퍼블리싱
general
Execute powerful JSON DSL queries against Figma files with filtering, projection, and pagination. 對 Figma 文件執行 JSON DSL 查詢：過濾、投影、分頁。 Use when: finding nodes by type or property, fi
general
Handle Figma REST API rate limits with exponential backoff and request queuing. Use when encountering 429 errors, implementing retry logic, or optimizing API request throughput for
engineering
Evaluate Figma components before code generation (Auto Layout, names, variables, text styles, variants). Use when starting figma-sync or explaining BLOCKED vs READY.
general
Reference architecture for production Figma API integrations. Use when designing a new Figma integration, planning project structure, or establishing patterns for design-to-code pi
engineering
Build resilient Figma integrations with circuit breakers, fallbacks, and graceful degradation. Use when implementing fault tolerance, handling Figma outages gracefully, or building
general
Extract and catalog Figma design resources into structured Markdown documentation. Outputs to specs/design/figma/ directory with categorized resource lists and Figma links.
general
Exports design assets from Figma files using the GET /v1/files/:key and /v1/images/:key endpoints. Supports SVG, PNG, and PDF export with scale and format parameters.
engineering
SKILL.md files, not affiliated with, endorsed by, or sponsored by Anthropic.