All workflows

eng-designhandoff

Custom rules for Figma to code implementation

A rules file that forces the agent to fetch context and a screenshot before coding and to reuse your design system tokens and components.

FigmaCursorClaude Code

Steps

  1. Run get_design_context for the exact node
  2. Fall back to get_metadata if output is too large
  3. Run get_screenshot for a visual reference
  4. Translate React plus Tailwind output into project conventions
  5. Validate 1:1 against Figma

Prompt

Run get_design_context first to fetch the structured representation for the exact node(s). Run get_screenshot for a visual reference. Only after you have both, download any assets needed and start implementation. Translate the output into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible. Validate against Figma for 1:1 look and behavior before marking complete.

Source

Figma. Added 2026-10-15.