A generative AI pipeline for converting Figma UI design to WordPress
Sandesh Neupane · Theseus (Ammattikorkeakoulujen) · 2026
Building a website from a Figma design has not changed much over the years. A designer creates the layout, and then a developer translates every section into working code by hand. For an agency that does this for many client projects, the process is slow and repetitive. Each project requires the same steps: reading the design,writing template files, registering content fields, applying fonts and colors, and deploying the result. None of these steps can be skipped, and they begin again with every new client. A prototype pipeline was built that takes a Figma design URL as input and produces a deployed Sage WordPress theme with ACF Gutenberg blocks as output, without any manual coding steps between the design file and the published site. The work was commissioned by Ahooy Creative Oy, a Finnish marketing agency based in Kuopio that builds all its client WordPress sites using the Sage starter theme and ACF Gutenberg blocks. The pipeline was developed in Python. Design data was fetched from Figma using the REST API. Sections were detected in two stages. Explicit label matching was applied first, followed by keyword scoring as a fallback. WordPress themes were generated using the Sage starter theme with ACF Gutenberg blocks. Best-practice guidance was provided by a RAG system built with Deep Seek V3 and Chroma DB, which retrieved hints from Sage and ACF documentation during generation. The site was then published automatically through WordPress REST API. The pipeline completed both test runs without errors. Fourteen section types were supported. Colours and fonts were taken from the Figma file and applied to the deployed site. Complex layouts, animations, and multipage navigation fell outside the scope of the prototype and are discussed as directions for future work.