Figma Design to Code

# Figma Design to Code

Use this before implementing a Figma design with the Figma MCP server. Treat the screenshot as the visual target and MCP design context as the source of truth.

## Context rules
- Include `figma-design-to-code` in `skillNames` when calling `get_design_context` (prefix `resource:` if loaded as an MCP resource).
- Always request a screenshot with the initial context call. If none returns, call `get_screenshot` before editing.
- If context is sparse, map child node IDs from the screenshot and fetch those nodes in a parallel batch of high-fidelity `get_design_context` calls.
- Implement only from high-fidelity responses. Never drop the screenshot into the codebase as an image asset stand-in for layout.

## Implementation rules
- Adapt MCP-returned code to the project's stack and conventions.
- Translate absolute positioning into native layout unless fixed positioning is required.
- Before writing markup, search the repo for matching components, tokens, and assets; reuse them.
- Apply Code Connect mappings directly; do not rebuild a connected component from scratch unless it cannot express the design.
- Make interactive regions actually interactive (forms, buttons, navigation), not static prototypes.

## Output
Produce code that visually matches the screenshot, list reused design-system pieces, and note any unresolved nodes still needing context.

Adapted from @figma's approach: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code