What problem does it solve? Translating Figma designs into Shopify theme code is error-prone because each theme architecture (Horizon/Theme Blocks, Dawn/OS 2.0, Legacy) uses different block systems, rendering patterns, and nesting limits, and developers often rebuild components that already exist in the theme. ## Core Features & Use Cases - Theme Architecture Detection: Runs a mandatory 5-step detection flow (checking /blocks/ directory, content_for 'blocks' usage, theme identity, nested block support) to classify the theme before writing any code. - Figma-to-Block Mapping: Maps design elements (heroes, cards, testimonials, CTAs) to existing Horizon blocks and sections using a reuse-first decision tree, with a complete inventory of blocks, sections, and snippets. - Scoped CSS Override Pattern: Applies design differences via custom classes and {% style %} tags scoped to section or block IDs, never modifying original theme CSS files. - Use Case: Given a Figma hero banner design, detect the theme is Horizon, map it to the hero section with text and button blocks, and add scoped CSS overrides for custom fonts, colors, and responsive spacing. ## Quick Start Analyze this Figma hero section design and implement it in my Shopify theme using existing blocks with scoped CSS overrides.
