Figma URL to WordPress Theme in One Click: Inside the New Claude Code Skill

Automating the Journey from Design File to Code

In front-end development, turning a Figma design into a working WordPress theme usually involves a lot of repetitive work. Developer saidMounaim built figma-wp-blueprint, a Claude Code-based skills toolkit that attempts to automate this pipeline with AI.

The core idea is straightforward: paste a Figma URL, and the tool automatically extracts design tokens (colors, fonts, spacing, breakpoints), then builds each section as an ACF Flexible Content layout—complete with field definitions, PHP templates, and scoped CSS. The end result is a classic PHP theme using plain CSS and vanilla JS, with no dependency on page builders, jQuery, or a build step.

Breaking Down the Workflow: What It Actually Does

Extracting Design Information

Starting from a Figma URL, the tool first parses out the foundational variables of the design system: color values, font families, spacing rhythm, and responsive breakpoints. These tokens are the input for all subsequent generation logic.

Design Tokens refer to the smallest reusable units of visual decision-making in a design system, such as color variables, type scales, spacing bases (often multiples of 4px or 8px), corner radii, and breakpoint thresholds. They are the "shared vocabulary" between design and code. In Figma, these values are typically stored in Local Styles or Variables; if designers consistently use styles rather than hard-coded color values, the tool can reliably read semantic names (like primary-500) rather than scattered hex values via the Figma REST API. This is also why the article emphasizes at the end that "the more unified the design tokens, the more reliable the generated output"—a token system is the prerequisite for whether an automated pipeline can align with design intent.

Generating ACF Flexible Content Layouts

Each page section is converted into an ACF Flexible Content layout. This means the output isn't static HTML, but reusable, field-based WordPress template structures. Fields, PHP templates, and scoped CSS are produced in sync, keeping style scopes isolated.

ACF (Advanced Custom Fields) is the most widely used custom field plugin in the WordPress ecosystem, allowing developers to add structured fields (text, images, color pickers, etc.) to pages, posts, or custom post types. Flexible Content is one of its advanced field types—essentially a "container of layouts": developers pre-define multiple layouts (like Hero, CTA, image-text cards), each containing a set of fields; editors can then freely add, remove, and reorder these blocks in the admin. Its advantage over fixed field templates is that the content structure stays flexible without getting out of control—fields are still defined by code, and rendering still goes through PHP templates. That's why the tool maps each page section to a layout, ensuring both controllability of design fidelity and letting non-technical editors adjust content order and combination in the admin.

Pixel-Level Verification

The tool includes a built-in /pixel-check command that measures the generated output against the Figma design at each breakpoint. This is the key mechanism for ensuring fidelity, and it lets developers quickly pinpoint deviations.

Scoped CSS here means making each piece of CSS apply only to its corresponding section, preventing global styles from polluting one another. There are two common implementation approaches: one is to limit class names under the namespace of the section's root node (like .hero__title), and the other is to leverage CSS Modules or the @scope rule natively supported by browsers in recent years. In the WordPress theme context, the tool generates a separate CSS block for each ACF layout, prefixed with that layout's name, so sections maintain visual independence regardless of how they're combined on any page. This doesn't contradict "no build step"—scoping is achieved through naming conventions rather than bundling tools, so the theme can be deployed directly without a Node toolchain.

Branched, Incremental Git Workflow

It handles one feature at a time, with each feature on its own Git branch, requiring manual developer approval before committing. This reduces the risk of AI making bulk code changes and preserves human review checkpoints.

Design Trade-offs: Why No Build Step

Choosing a classic PHP theme, plain CSS, and vanilla JS is intentional. In the WordPress ecosystem, page builders (like Elementor and Divi) lower the barrier to entry, but often bring performance overhead and code lock-in. No build step means the theme can be deployed directly without a Node toolchain, making it friendlier to traditional WordPress developers.

ACF Flexible Content is itself a mature solution, and combined with scoped CSS it can control style pollution. For enterprise sites that need long-term maintenance, this structure is more practical than a one-off static page export.

What It Means for AI-Assisted Development

The value of this tool isn't in being "fully automatic," but in placing AI at the specific, verifiable stage of design reproduction. The /pixel-check command provides an objective acceptance standard, while Git branches and manual approval preserve control.

For front-end teams, this kind of Claude Code skill represents a trend: packaging AI capabilities as concrete commands within a workflow, rather than a generalized chat assistant. Design reproduction is a task in web development with clear feedback and high repetition, making it well-suited to optimization by tools like this.

The project is currently open-sourced on GitHub, with a demo available on Vercel. Actual results depend on how well-organized the Figma file is—the more unified the design tokens, the more reliable the generated output.

One-line Summary

figma-wp-blueprint uses Claude Code skills to automatically turn Figma designs into build-step-free WordPress themes.

Paragraph Summary

figma-wp-blueprint is a Claude Code skills toolkit built by developer saidMounaim, aimed at automating the highly repetitive pipeline from Figma design to WordPress theme. After pasting a Figma URL, the tool extracts design tokens such as colors, fonts, spacing, and breakpoints, then builds each page section into an ACF Flexible Content layout, producing field definitions, PHP templates, and scoped CSS in sync. It includes a built-in /pixel-check command for pixel-level comparison against the design at each breakpoint; the workflow uses separate Git branches per feature, with manual approval required before committing, preserving review checkpoints. The output is intentionally a classic PHP theme with plain CSS and vanilla JS, free of page builders, jQuery, or build steps. The tool is currently open-sourced on GitHub with a demo on Vercel, and actual results depend on how standardized the Figma file is.