Figma Design To Code Bridge

Use this skill after figma-context-reader when the goal is implementation. The output is not "code by screenshot"; it is a mapping from design intent, tokens, and components to the existing codebase.

Modes

• handoff-plan: create a build/refactor plan from a Figma frame.
• component-map: map Figma components/variants to existing code components.
• code-connect: prepare or review Figma Code Connect work.
• gap-report: identify where the design and code system diverge.
• implementation-route: hand off to webapp-ui-skill or marketing-site-skill.

Workflow