What problem does it solve? Translating Figma designs into code by hand is slow and error-prone: spacing, typography, colors, and auto-layout behavior must be manually interpreted for every frame. This Skill reads the design hierarchy via Figma MCP and generates components that match the design while respecting the project's existing conventions. ## Core Features & Use Cases - Figma hierarchy parsing: Accepts a Figma URL or node-id, extracts layout structure, design tokens (colors, typography, spacing, shadows), and component variants. - Convention-aware code generation: Detects the project's framework, styling approach (Tailwind, CSS Modules), and component directory before generating semantic HTML with mapped CSS. - Responsive and accessible output: Maps Figma frame widths to breakpoints, implements hover/focus states, and enforces semantic HTML with alt text and aria-labels. - Use Case: A designer shares a Figma link for a new pricing card component. The Skill reads the node, extracts tokens, detects the project uses Next.js with Tailwind, and generates a typed React component with variant props and a fidelity checklist. ## Quick Start Convert this Figma frame into a component for my project: https://www.figma.com/file/ABC123/MyFile?node-id=1:2
