figma-wp-blueprint
A toolset built on Claude Code Skills that accepts a pasted Figma URL and automatically generates a classic PHP WordPress theme, supporting design token extraction, ACF Flexible Content layout generation and pixel-level validation.
Timeline (last 90 days)
Developer saidMounaim built figma-wp-blueprint, a Claude Code-based skills toolset for automatically converting Figma designs into WordPress themes.
The workflow of figma-wp-blueprint is: paste a Figma URL, and the tool automatically extracts design tokens (colors, fonts, spacing, breakpoints), then builds each block as an ACF Flexible Content layout.
The final output generated by figma-wp-blueprint is a classic PHP WordPress theme using plain CSS and native JS, with no dependency on page builders, jQuery, or build steps.
figma-wp-blueprint has a built-in /pixel-check command that measures the generated result against the Figma design at each breakpoint.
The tool handles only one feature at a time, with each feature on a separate Git branch, requiring manual developer approval before committing.
The more consistent the design tokens, the more reliable the output generated by figma-wp-blueprint.
The figma-wp-blueprint project is open-sourced on GitHub and offers a demo on Vercel.
In the context of a WordPress theme, the tool generates a separate piece of CSS prefixed with the layout's name for each ACF layout, thereby keeping blocks visually independent when combined on any page.
All Facts (8)
Developer saidMounaim built figma-wp-blueprint, a Claude Code-based skills toolset for automatically converting Figma designs into WordPress themes.
50%UnverifiedThe workflow of figma-wp-blueprint is: paste a Figma URL, and the tool automatically extracts design tokens (colors, fonts, spacing, breakpoints), then builds each block as an ACF Flexible Content layout.
50%UnverifiedThe final output generated by figma-wp-blueprint is a classic PHP WordPress theme using plain CSS and native JS, with no dependency on page builders, jQuery, or build steps.
50%Unverifiedfigma-wp-blueprint has a built-in /pixel-check command that measures the generated result against the Figma design at each breakpoint.
50%UnverifiedThe tool handles only one feature at a time, with each feature on a separate Git branch, requiring manual developer approval before committing.
50%UnverifiedThe more consistent the design tokens, the more reliable the output generated by figma-wp-blueprint.
50%UnverifiedThe figma-wp-blueprint project is open-sourced on GitHub and offers a demo on Vercel.
50%UnverifiedIn the context of a WordPress theme, the tool generates a separate piece of CSS prefixed with the layout's name for each ACF layout, thereby keeping blocks visually independent when combined on any page.
50%