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

说明与用途

使用 Claude Code 自动将 Figma 设计转换为干净的 WordPress 主题，提取设计令牌，生成 ACF 布局，执行像素级视觉回归，并通过 Git 分支管理更改。

问题

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

结果

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.

工作流

• 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

证据

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

来源

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

来源