figma-to-gutenberg

# Figma to Gutenberg Rebuilds a Figma frame as a real, editable block-editor page — no page builder required. Reads the Figma node tree (layers, auto-layout, text, colors, images), maps each node to core Gutenberg blocks, registers the frame's palette in the site's Global Styles so the design system carries over, and writes to a draft so nothing live is touched. Works on any WordPress 6.6+ site, including block themes. ## What This Skill Does **Handles:** - Frames and auto-layout → `core/group` with flex/stack layout (preferred over `core/columns` for row layouts — groups survive later editing and re-reading more faithfully) - Text nodes → `core/heading` (level inferred from font size) or `core/paragraph` - Rectangles/ellipses with image fills → `core/image`; lines → `core/separator`; buttons → `core/buttons` + `core/button` - Repeated patterns by layer name + structure: FAQ stacks → `core/details`, image rows → `core/gallery`, quote-shaped blocks → `core/quote` - Typography (size, weight, line-height, letter-spacing, alignment) via block supports; families noted for the theme - Colors: solid fills and gradients on blocks; **the frame's distinct palette registered as named design tokens in Global Styles** (`respira_create_design_token`) so the page references tokens the whole site can reuse - Spacing from Figma padding/item spacing via block gap and padding supports; per-corner radius and shadows where block supports allow - Image fills downloaded from Figma and sideloaded...