Figma Delivery Loop

Use this skill to turn Figma visual and interaction intent into maintainable repository code. Figma is a reference, not DOM, CSS, or business code to copy. The repository remains the source of truth for architecture, data, behaviour, components, navigation, and platform conventions.

Confirm The Delivery Boundary

Before coding, confirm:

• delivery surface: repository code or a Figma file;
• target platform and supported viewport range;
• exact Figma file, page, node, or current desktop selection;
• affected page, component, or flow in the repository;
• existing components, design tokens, page shell, route and navigation ownership;
• actual fonts, icons, images, and business data sources;
• a runnable application path and a way to inspect the result.

Use the available Figma MCP design-reading tools for this workflow. If the environment provides figma-implement-design, load it; otherwise follow the evidence gate below directly. If Figma cannot be read or the node information is incomplete, state the missing evidence. Do not claim the design has been restored, and do not invent tabs, states, buttons, or business interactions from common product patterns.

Completion criterion: the delivery surface, target platform, Figma node, implementation scope, repository owners, real assets, data sources, and verification path are known; unresolved product behaviour is explicit.