AI-driven Figma plugin that follows design specs. MCP bridge between IDE and Figma.
Skill Claude CodeCodex
Generate documentation for Figma components — properties, variants, usage guidance, and structural health audit. Use when: document/describe/catalog + components/variants/library, or when auditing component quality for design system maintenance.
Skill Claude CodeCodex
Design patterns for empty, loading, and error states. Use when: empty state/loading/skeleton/error/no data + design/screen/component, or when ensuring data-driven views handle all states.
Skill Claude CodeCodex
No-library mode design rules: intentional design thinking, color, typography, iconography. Extends ui-ux-fundamentals.
Skill Claude CodeCodex
Library mode design rules: token priority, typography, spacing, elevation, dark mode, conflict resolution. Extends ui-ux-fundamentals.
Skill Claude CodeCodex
Design handoff — annotate designs with specs, export spacing/color/typography info for developers. Use when: handoff/annotate/spec/redline + design/screen/component, or when preparing designs for developer implementation.
Skill Claude CodeCodex
Lint Figma designs for compliance and auto-fix violations. Use when: lint/fix/check compliance/clean up + design/page/screen, or when automated quality fixes are needed. Supports both quick one-step lint and granular multi-step workflows.
Skill Claude CodeCodex
Review existing Figma designs against design quality rules. Outputs structured violation report with actionable fixes. Use when: review/audit/check/critique/analyze/inspect/diagnose + design/screen/page/component, analyze issues/problems with components, or after UI creation to verify quality.
Skill Claude CodeCodex
Audit design system health — token coverage, component consistency, unused variables, naming compliance, codeSyntax/scope coverage. Use when: audit/health check/coverage + design system/library/tokens, check/fix/repair + codeSyntax/code syntax/scope/description + variables, batch update/fix + variables, or when…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server…
Skill Claude CodeCodex
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 usefigma. Handles plan resolution via whoami if needed. Usage — /figcraft-create-new-file [editorType] [fileName] (e.g. /figcraft-create-new-file figjam My Whiteboard).
Skill Claude CodeCodex
Create screens in Figma by REUSING an existing design system's components, variables, and styles. REQUIRES a published library or local components. Triggers: 'create a screen', 'build a landing page using the design system', 'push page to Figma', 'create designs from code', 'update the Figma screen'. Extends…
Skill Claude CodeCodex
Build or update the design system itself in Figma — variables/tokens, component libraries, theming (light/dark modes), foundations documentation. Use when creating the system, not just using it. Triggers: 'build component library', 'create design tokens', 'set up theming', 'reconcile code and Figma'. Uses FigCraft…
Skill Claude CodeCodex
Import HTML or a web page into Figma using FigCraft's native importhtml converter. Use when: html to figma, import html, import webpage, capture static page, convert HTML into editable Figma layers. For pixel-perfect live web capture, use official Figma MCP generatefigmadesign as a visual reference when available.
Skill Claude CodeCodex
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", "code from Figma", or asks to build application code matching Figma specs. NOT for reviewing/analyzing…
Skill Claude CodeCodex
MANDATORY prerequisite — you MUST invoke this skill BEFORE every usefigma tool call. NEVER call usefigma directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in…
Skill Claude CodeCodex
Create UI in Figma using FigCraft declarative tools (createframe, createtext, createcomponent). Use when: create/design/build/make + Figma/UI/screen/page/component/button/variant WITHOUT an existing design system. IMPORTANT: Use createframe for screens, createcomponent for reusable components. Never use usefigma for…
Skill Claude CodeCodex
Icon rules: ordering in auto-layout (children array order = visual order), tool chain (iconsearch -> iconcreate with index), sizing, spacing, style consistency. Use when: icon/icons + create/place/add/order/position/wrong/layout, or when icons appear in wrong position.
Skill Claude CodeCodex
Assist design system version migration — token mapping, component swapping, variable renaming. Use when: migrate/upgrade/update + design system/tokens/components/version, or when transitioning between design system versions.
Skill Claude CodeCodex
Multi-brand token management — set up brand themes, switch between brands, verify cross-brand consistency. Use when: multi-brand/theme/white-label + tokens/variables/design system, or when managing multiple brand variants in one Figma file.
Skill Claude CodeCodex
Multi-screen flow architecture — wrapper hierarchy, stage containers, step pills, build order. Use when: multi-screen/flow/onboarding/checkout + design/create/build, or when creating 3+ screens in a single task.
Skill Claude CodeCodex
Android platform design rules — screen dimensions, Material Design 3, Roboto typography, navigation patterns. Use when: Android/Material + design/screen/app, or when creating Android-specific Figma designs.
Skill Claude CodeCodex
Platform-specific design rules for iOS apps in Figma. Covers screen dimensions, safe areas, system UI, typography, navigation patterns, and HIG conventions. Extends ui-ux-fundamentals with iOS-specific constraints.
Skill Claude CodeCodex
Analyze prototype interactions and generate flow documentation. Use when: analyze/inspect/review + prototype/flow/interactions/navigation, or when checking for dead ends, missing navigation, or generating flow diagrams.