nuxt-ui-figma-handofflisted

# nuxt-ui-figma-handoff Nuxt UI's official Figma kit mirrors the code library almost exactly — same semantic color roles, same radius/spacing scale, same component variants. A designer's tweaks in Figma map to a specific, small edit in one of two files, never a rewrite. The job here is finding that mapping precisely instead of guessing at pixel values or dumping a giant theme object where a three-line diff would do. ## When not to use Figma-to-code work unrelated to Nuxt UI theming — a different component library, or building a screen from scratch — is a plain design-to-code task, not this skill. Same if there's no Nuxt UI project in scope. ## Step 1: Get the Figma link This skill needs a real Figma file or frame URL, not a paraphrased description of what changed — the URL is what resolves the specific node so its actual variables and component variants can be read, rather than inferred secondhand. If the user hasn't given one, ask for it before doing anything else. If the Figma MCP connector isn't authorized in this session, say so plainly and offer the fastest fallback instead of stalling: Nuxt's own recommended handoff tool is **TemPad Dev** (a Chrome extension + official Nuxt UI plugin that inspects a selected component in Figma dev mode and outputs its real Tailwind classes/props). An exported variables JSON or screenshots + a plain-language changelist also work. Still ask for the Figma URL alongside whichever of these the user provides — it's useful context even w