From a Figma URL to a custom WordPress theme with Claude Code

Description and use

Automated conversion of a Figma design into a clean WordPress theme using Claude Code, extracting design tokens, generating ACF layouts, performing pixel‑accurate visual regression, and managing changes via Git branches.

Problem

Converting a Figma design into a functional WordPress theme manually is time‑consuming and error‑prone.

Outcome

A fully automated pipeline that turns a Figma design into a clean, vanilla‑JS WordPress theme with pixel‑accurate visual regression and Git branch isolation.

Workflow

• Paste Figma URL into Claude Code skill
• Claude extracts colors, fonts, spacing, breakpoints
• Claude generates ACF Flexible Content layouts with fields, PHP template, and scoped CSS
• Claude runs /pixel-check against Figma at every breakpoint
• Claude creates a new Git branch for the feature
• Claude prompts for approval before committing changes

Evidence

Paste a Figma URL and it: extracts colors, fonts, spacing, and breakpoints; builds each section as an ACF Flexible Content layout (fields, PHP template, scoped CSS); measures the result against Figma at every breakpoint with /pixel-check; works one feature at a time, on its own Git branch, and asks for your approval before committing

Source

The result is a classic PHP theme with pure CSS and vanilla JS: no page builder, no jQuery, no build step.

Source