TemPad Dev: Figma to UI implementation

This skill requires TemPad Dev MCP. If tempad-dev:* tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.

TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.

Evidence rules

Priority order:

1. tempad-dev:get_code (authoritative: explicit values, layout intent, warnings, assets, tokens, codegen, lang)
2. tempad-dev:get_structure (hierarchy, overlap, bounds clarification)

Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.

Do not output data-hint-* attributes.

Workflow