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

Описание и применение

Автоматизированный процесс преобразования дизайна Figma в чистую тему WordPress с помощью Claude Code, включая извлечение токенов, генерацию ACF‑layout, проверку пикселей и Git‑workflow.

Задача

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.

Источник