mk:figma

What This Skill Does

mk:figma is a read-first Figma gateway. It analyzes Figma designs and translates them into code across three default modes — Analyze (extract design context for intake/review), Implement (Figma-to-code for 1–3 screens), and Tokens (extract design tokens as CSS custom properties or Tailwind config). It integrates with Figma MCP when available and falls back to PNG export + multimodal analysis otherwise.

Advanced Figma operations — Code Connect, canvas writes (use_figma), and design-system/library patterns — are gated references loaded only on explicit user intent plus confirmed prerequisites, never by default. A Capability Router in SKILL.md maps any Figma intent to the right mode or gated reference in a single lookup.

When to Use

Triggers:

• "implement this design", "figma link", "design tokens", "design system"
• Figma URL present in a ticket (auto-detected by mk:intake)
• UI implementation from Figma spec (invoked by mk:cook or mk:frontend-design)

Anti-triggers:

• Generating novel UI from a text prompt — use mk:stitch
• General UI design systems / design review — use mk:ui-design-system

Advanced Figma work is not a separate skill — it is routed to gated references inside mk:figma:

• Mapping Figma components to code (Code Connect / .figma.js) — gated behind confirmed Org/Enterprise plan + Dev/Full seat
• Creating or updating screens IN Figma (canvas writes) — gated behind an explicit mutation request
• Design-system rules or full library builds — advisory reference; library execution stays out of scope

Core Capabilities

• 3 default modes — Analyze (design context report), Implement (Figma-to-code workflow), Tokens (CSS/Tailwind token extraction)
• Capability Router — maps every Figma intent to a mode or a gated reference; no dead ends, no routing to phantom external skills
• URL parsing and validation — extracts file key and node ID; validates link shape; accepts /proto/ for recognition only and asks for the /design/ URL before extraction
• Design context extraction — component tree, layout mode, spacing, text/color/effect styles via get_design_context, with a get_metadata fallback when context is truncated or oversized
• Screenshot capture — visual ground truth for parity comparison via get_screenshot
• Design system matching — auto-detects Tailwind, MUI, shadcn/ui, or custom CSS-variable systems
• Token extraction — color (0–1 to CSS hex), typography, spacing, shadows, border-radius, with Variables-vs-Color-Styles normalization and Enterprise permission caveats
• Per-mode pre-flight checklist — Core checks run for every mode; Implement and Canvas-write add their own blocks (no blanket 18-item gate on read-only analysis)
• Untrusted-data security — node/text/plugin/variable names are treated as DATA; the canvas-write gate is justified by the Rule of Two (untrusted input + state change ⇒ opt-in)
• PNG fallback — when Figma MCP is unavailable, asks the user to export frames as PNG and uses mk:multimodal

Advanced Workflows (gated)

Loaded only on explicit user intent plus confirmed prerequisites:

Arguments

No flags. Mode is determined by the invoking skill:

• mk:intake or mk:review triggers Analyze mode
• mk:cook or mk:frontend-design triggers Implement mode
• mk:ui-design-system triggers Tokens mode

Workflow (Implement Mode)

1. Parse Figma URL — extract file key and node ID from a /design/ or /file/ URL. /proto/ → stop and ask for the /design/ URL. Invalid → stop.
2. Get design context — get_design_context: component tree, layout, spacing, text styles, colors. Oversized/truncated → fall back to get_metadata + targeted child fetches.
3. Get screenshot — visual reference for post-implementation comparison.
4. Download assets — icons as SVG, photos as WebP/PNG.
5. Identify design system — match Figma tokens to the existing project system (Tailwind, MUI, shadcn, custom).
6. Translate to code — structure first, then layout, spacing, typography, colors, effects, interactions (advisory — only designed states), responsive.
7. Validate visual parity — compare to the Figma screenshot; verify accessibility, interaction states, component reuse, and asset scale; fix deltas.

Usage

# Analyze (via mk:intake -- auto-detects Figma URLs in tickets)
/mk:intake  # then paste ticket with Figma link

# Implement
/mk:cook "build the login page from this Figma: https://www.figma.com/design/ABC123/..."

Example Prompt

Implement this design: https://www.figma.com/design/XYZ789/Dashboard?node-id=2304%3A512
Use our existing Tailwind config and shadcn/ui components.

Common Use Cases

• Extracting design context from a Figma link in a Jira ticket during intake
• Implementing a new UI screen from a Figma design (1–3 screens)
• Generating CSS custom properties from a Figma design system file
• Validating that an implementation matches the Figma spec during code review
• Extracting spacing/typography/color tokens to bootstrap a new design system

Pro Tips

• Figma prototype links (/proto/) are not parseable. Ask for the /design/ URL from the editor, not the shareable prototype link.
• Node IDs change when designers restructure frames. Always re-extract the node ID from the current URL before any MCP call — never cache IDs across sessions.
• Colors are 0–1 scale, not 0–255. Figma returns { r: 0.2, g: 0.4, b: 1.0 }. Multiply by 255 for CSS: rgb(51, 102, 255).
• Variables and Color Styles export different formats. Variables are { r, g, b, a } floats; color styles are rgba() strings. Normalize to one format before writing token files.
• Screenshots at 1x are blurry on Retina displays. Always request scale: 2 for assets intended for screen display.
• Batch more than ~20 nodes and you hit rate limits. Fetch in batches of ≤15 nodes with exponential backoff.
• Advanced workflows are gated. Code Connect and canvas writes load only after their prerequisites are confirmed — the skill asks first rather than guessing.

Canonical source: .claude/skills/figma/SKILL.md