figma-wp-blueprint

Claude Code skills for WordPress

Figma frame in.
Custom WordPress theme out.

Paste a Figma URL. Claude Code extracts the design tokens, builds every section as an ACF Flexible Content layout, and measures the result against Figma at each breakpoint before anything is merged.

Get it on GitHub Set up a project

ACF Pro · Custom Post Types · pure CSS · vanilla JS · LocalWP

# Home - 1440node-id=12-34
1440
Header header.php
Hero 64 80
Card
Card
Card
Testimonials layout_testimonials
Footer footer.php

How it works

One Figma section becomes one layout, with the same name everywhere

Every section in the design is built the same way: an ACF field group, a page-builder layout, a PHP template part, scoped CSS, and JavaScript only when the section actually moves. Editors add sections in wp-admin; nothing is hard-coded to a page.

Figma node

Hero

figma.com/design/<file-key>/Site?node-id=12-34

frames
1440 · 768 · 375
padding
64 / 80
fields
eyebrow, heading, text, image, button
layout
hero
  • acf-json/group_section_hero.jsonThe section's fields, saved as local JSON with fixed keys.
  • acf-json/group_page_builder.jsonAdds layout_hero, which clones those fields into the page builder.
  • template-parts/sections/hero.phpMarkup that reads get_sub_field() and escapes every value.
  • assets/css/sections/hero.cssStyles scoped to .hero, built only from Figma tokens.
  • assets/js/sections/hero.js optional
    Vanilla JS, loaded only on pages that use the layout.

Workflow

One feature at a time, behind review gates

Each feature gets a spec, its own Git branch, a measured comparison with Figma, and an archived record in blueprint/history/. You approve the spec, each review, and the final commit.

Set up once per site

  1. /onboard

    Checks the theme folder, Git, PHP, ACF Pro, and your Figma token. Sets the theme name, slug, and prefix.

  2. /figma <url>

    Reads colors, type, spacing, breakpoints, and sections. Proposes a build plan.

  3. /overview

    Turns the approved plan into a numbered feature list.

  4. /wp-theme

    Feature 1: theme skeleton, tokens, header, footer, and the page builder.

Build repeat per feature

  1. /feature

    Writes the spec for the next item, such as "Home page sections" or a post type.

  2. /implement

    Builds it in small reviewed steps using the /section, /acf, and /cpt recipes.

  3. /pixel-check

    Measures the local page against Figma at every breakpoint.

  4. /check optional

    Proves the spec's done-when criteria in the running site.

  5. /audit current optional

    Reviews escaping, sanitizing, nonces, queries, and performance.

  6. /complete

    Archives the spec, then asks before it commits and merges.

Then /feature again for the next item.

Pixel check

Measured against Figma, not eyeballed

/pixel-check renders the local page at each designed width, reads computed styles and boxes, and compares them with the Figma values. It reports the exact difference and the file to fix. It never edits code.

/pixel-check http://your-site.local/ Example report
Breakpoint 1440
ElementPropertyFigmaBrowserDiffFile to fix
.hero__titlefont-size56px52px-4pxassets/css/sections/hero.css
.hero__innerpadding-top64px64px0-
.hero__eyebrowcolor#1D4F91#1D4F910-
1440: fail (1 difference) 768: pass 375: pass

Tolerance: 2px for spacing, size, and position. Font family, weight, color, and radius must match exactly.

House rules

Plain WordPress your team can maintain

  • Classic PHP theme

    Template parts and get_template_part(). Any WordPress developer can read it.

  • Tokens from Figma

    Colors, type, and spacing live in assets/css/variables.css. Section CSS uses only those custom properties.

  • Safe by default

    Output is escaped, input is sanitized, forms use nonces, and queries are reviewed in /audit.

  • Fields in version control

    ACF field groups are saved as JSON in acf-json/ and committed with the code.

page builderCSS frameworkjQuerybuild step
// template-parts/sections/hero.php
$heading = get_sub_field( 'heading' );
$text    = get_sub_field( 'text' );

if ( ! $heading ) {
	return;
}
?>
<section class="hero" data-section="hero">
  <h1 class="hero__title">
    <?php echo esc_html( $heading ); ?>
  </h1>
  <div class="hero__text">
    <?php echo wp_kses_post( $text ); ?>
  </div>
</section>

Skills

Slash commands you type in Claude Code

The skills live in .claude/skills/ inside your theme folder. They are chat commands in Claude Code, not terminal commands.

WordPress

/figma <url>
Extract tokens, breakpoints, fonts, sections, and post type candidates
/wp-theme
Theme foundation: setup, enqueue, ACF, page builder, header, footer
/section
One Figma section as a Flexible Content layout
/acf
Create or change field groups as JSON in acf-json/
/cpt <name>
Custom Post Type with taxonomies, fields, archive, and single templates
/pixel-check
Measure the local page against Figma and report differences

Workflow

/feature, /fix
Spec the next plan item or an unplanned bug
/implement
Build the approved spec on its branch
/check, /audit
Verify behavior; review security and quality
/complete
Archive, commit, and merge with your approval
/status, /brief
Where you are and what comes next
/explore, /debug
Investigate without changing files
/rollback, /doctor
Undo a feature; check workflow health

Setup

Start a project in five steps

  1. Create a site in LocalWP and activate ACF Pro.Turn on WP_DEBUG_LOG so the workflow can read PHP notices.
  2. Create an empty theme folder and copy the workflow files into it. 
    git clone https://github.com/saidMounaim/figma-wp-blueprint.git
cp -r figma-wp-blueprint/{AGENTS.md,CLAUDE.md,.claude,blueprint} \
  "wp-content/themes/your-theme/"
  3. Add your Figma token to .env in the theme folder.FIGMA_TOKEN=figd_... with the scope File content: Read-only. The file is git-ignored.
  4. Open the theme folder in Claude Code and run /onboard.Open the theme folder itself, not the site root.
  5. Run /figma with your design URL.Design, file, proto, and board links all work, with or without ?node-id=.

Requirements

  • LocalWPlocal WordPress 6.5+
  • ACF ProFlexible Content, clone fields
  • Claude CodeCLI or VS Code extension
  • Node.js 18+Figma helper script
  • PHP CLIphp -l syntax checks
  • Gitone branch per feature
  • Figma tokenview access to the file
  • Playwright MCPoptional, for /pixel-check