Figma to Weaverse is a specialized workflow skill that converts Figma designs, frames, and design systems into maintainable Shopify Hydrogen storefront pages powered by Weaverse. Utilizing Figma MCP tools, it accurately extracts structured design tokens (colors, typography, spacing), auto-layout hierarchies, and asset exports directly into a standardized content manifest and temporary React/Tailwind preview route. After a required user approval step, it maps components against existing Weaverse section schemas or generates clean new sections, feeding directly into the Weaverse project JSON pipeline for seamless headless e-commerce development.
主要功能
01Smart section decomposition and matching against existing Weaverse section schemas
02Structured design extraction using Figma MCP for precise tokens, auto-layout, and real asset downloads
03Seamless integration with Weaverse project JSON generators and headless Shopify Hydrogen architectures
04Generates intermediate React and Tailwind preview routes for client or developer approval before code splitting
05Explicit token mapping from Figma variables directly into Weaverse theme configuration
0687 GitHub stars
使用场景
01Converting multi-frame Figma e-commerce user flows into production-ready headless CMS pages
02Translating approved Figma storefront mockups into modular Shopify Hydrogen sections
03Extracting Figma design systems and design tokens into Weaverse theme configurations