Coding Analyzer

Converting a Figma design into a functional e-commerce theme on the VNDA platform traditionally took 2-4 weeks of manual front-end development. Each section of a page had to be analyzed in Figma, translated to HTML/CSS, adapted to VNDA's Liquid template system, integrated with dynamic data (products, menus, cart), and tested through multiple iteration rounds.

At scale, this bottleneck meant the team could only ship a handful of new themes per quarter. Clients waited weeks for their store design to go live, and any design revision triggered another round of manual conversion.

Build an automated pipeline that transforms Figma designs into production-ready VNDA e-commerce themes, targeting 90%+ automation of the conversion process. The system needed to handle the full journey: extracting design data from Figma, generating an intermediate representation, rendering Liquid templates via LLM, and validating visual fidelity against the original design.

I designed the pipeline around an Intermediate Representation (IR) — a structured data format that bridges the gap between Figma's design tree and VNDA's template system. This decouples extraction from rendering, making each phase independently testable and improvable.

Phase 1: IR Build — The Figma MCP extractor traverses the design tree and produces ThemeIRSection objects. Each section captures layout structure, content (titles, subtitles, CTAs, items), and navigation data. An auto-classifier assigns section types (header, banner, showcase, product grid, etc.) based on frame names, child structure, and textual content.

Phase 2: GPT Codex Rendering — Each IR section is sent to GPT-5.2 with a structured prompt containing the section type, layout tree, and content. The model generates Liquid templates with Tailwind CSS. A caching layer prevents redundant LLM calls during iteration, and a retry mechanism (max 2) handles invalid outputs.

Phase 3: Multi-Layer Validation — Five validators run in parallel on every generated section:

A LiquidJS dev server with Express and WebSocket provides real-time preview with mock data, so the team can see generated themes immediately and iterate on specific sections.

• 9 home page sections mapped and automated (Header, Banner, Category Badges, Category Cards, Best Sellers, Promotions, Reviews, About, Footer)
• Pipeline architecture that separates extraction, classification, rendering, and validation into independently improvable phases
• Roadmap toward a custom MCP server, multi-page support, and real VNDA theme export