figcraft

Import HTML or a web page into Figma using FigCraft's native import_html 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 generate_figma_design as a visual reference when available.

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.

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.

iOS platform design rules — screen dimensions, safe areas, SF Pro typography, navigation patterns, HIG conventions. Use when: iOS/iPhone/iPad + design/screen/app, or when creating iOS-specific Figma designs.

Create UI in Figma using FigCraft declarative tools (create_frame, create_text, create_component). Use when: create/design/build/make + Figma/UI/screen/page/component/button/variant WITHOUT an existing design system. IMPORTANT: Use create_frame for screens, create_component for reusable components. Never use use_figma for UI creation. Do NOT use when assembling screens from existing design system (use figcraft-generate-design) or building a full design system (use figcraft-generate-library).

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.

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.

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.

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 assessing design system quality before publishing.

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 figma-create-ui with mandatory design system discovery. Do NOT use for no-library creation (use figma-create-ui) or building a new design system (use figcraft-generate-library).

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 declarative tools — no use_figma required. Do NOT use for assembling screens from existing system (use figcraft-generate-design).

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 designs (use design-review instead). For Figma canvas writes via `use_figma`, use `figcraft-use`.

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.

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.

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.

Compare DTCG design token spec against Figma Library variables. Use when: compare/diff/check + tokens/spec/DTCG + Figma/variables/library, or when auditing token drift between code and Figma.

Bulk replace text content in Figma designs — localization, data filling, content updates. Use when: replace/update/translate/localize + text/content/copy, or when filling designs with real data.

Sync DTCG design tokens to Figma variables and styles. Use when: sync/push/import + tokens/DTCG + Figma, or when updating Figma variables from a token spec file.

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.

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 connection.

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 via whoami if needed. Usage — /figcraft-create-new-file [editorType] [fileName] (e.g. /figcraft-create-new-file figjam My Whiteboard)

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` 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 the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

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.

Universal design quality rules: color, typography, spacing, content, iconography, elevation, composition, accessibility. Always applies regardless of library mode.

No-library mode design rules: intentional design thinking, color, typography, iconography. Extends ui-ux-fundamentals.

Library mode design rules: token priority, typography, spacing, elevation, dark mode, conflict resolution. Extends ui-ux-fundamentals.

Icon rules: ordering in auto-layout (children array order = visual order), tool chain (icon_search -> icon_create with index), sizing, spacing, style consistency. Use when: icon/icons + create/place/add/order/position/wrong/layout, or when icons appear in wrong position.

UX writing rules — universal best practices + language-specific rules (Chinese, English). Use when: creating UI text, writing button labels, form copy, error messages, empty states. Load after language is confirmed in designPreflight.

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.

Responsive web design rules — breakpoints, auto-layout strategy, sizing patterns. Use when: responsive/breakpoint/mobile/tablet/desktop + design/layout/screen, or when creating multi-breakpoint web designs.