Figma URL 一键生成 WordPress 主题：Claude Code 新技能解析

从设计稿到代码的自动化尝试

前端开发中，将 Figma 设计稿还原为可用的 WordPress 主题往往需要大量重复劳动。开发者 saidMounaim 构建了 figma-wp-blueprint，一套基于 Claude Code 的 skills 工具集，尝试用 AI 自动化这条链路。

核心思路很直接：粘贴一个 Figma URL，工具自动提取设计 token（颜色、字体、间距、断点），然后将每个区块构建为 ACF Flexible Content 布局——包含字段定义、PHP 模板和 scoped CSS。最终产出是一个经典 PHP 主题，使用纯 CSS 和原生 JS，不依赖页面构建器、jQuery 或构建步骤。

工作流拆解：它到底做了什么

设计信息提取

从 Figma URL 出发，工具首先解析出设计系统中的基础变量：颜色值、字体族、间距节奏和响应式断点。这些 token 是后续所有生成逻辑的输入。

设计 token（Design Tokens） 指的是设计系统中最小的、可复用的视觉决策单元，例如颜色变量、字号阶梯、间距基数（常为 4px 或 8px 的倍数）、圆角半径和断点阈值。它们是设计与代码之间的「共享词汇」。在 Figma 中，这些值通常存储在 本地样式（Local Styles） 或 变量（Variables） 中；如果设计师全程用样式而非硬编码色值，工具就能通过 Figma REST API 稳定读取语义名称（如 primary-500）而非散落的十六进制值。这也是文章末尾强调「设计 token 越统一，生成结果越可靠」的原因——token 体系是自动化管线能否对齐设计意图的前提。

ACF Flexible Content 布局生成

每个页面区块被转化为一个 ACF Flexible Content layout。这意味着生成的内容不是静态 HTML，而是可复用的、基于字段的 WordPress 模板结构。字段、PHP 模板和 scoped CSS 三者同步产出，保持样式作用域隔离。

ACF（Advanced Custom Fields） 是 WordPress 生态中使用最广泛的自定义字段插件，允许开发者为页面、文章或自定义文章类型添加结构化字段（文本、图片、颜色选择器等）。Flexible Content 是它的一个高级字段类型，本质上是「布局的容器」：开发者预先定义多个 layout（如 Hero、CTA、图文卡片），每个 layout 内含一组字段；编辑者在后台可以任意增删、排序这些区块。它相比固定字段模板的优势在于内容结构灵活而不失控——字段仍由代码定义，渲染仍走 PHP 模板。因此工具把每个页面区块映射为一个 layout，既保证了设计还原的可控性，又让非技术编辑能在后台调整内容顺序和组合。

像素级校验

工具内置 /pixel-check 命令，在每个断点将生成结果与 Figma 设计稿进行对比测量。这是保证还原精度的关键机制，也让开发者能快速定位偏差。

scoped CSS（作用域样式） 在这里指让每段 CSS 只作用于对应区块，避免全局样式相互污染。常见实现方式有两种：一是把类名限定在区块根节点的命名空间下（如 .hero__title），二是利用 CSS Modules 或近年浏览器原生支持的 @scope 规则。在 WordPress 主题语境中，工具会为每个 ACF layout 单独生成一段以该 layout 名称为前缀的 CSS，从而让区块在任意页面组合时都能保持视觉独立。这与「无构建步骤」并不矛盾——作用域靠命名约定而非打包工具实现，主题无需 Node 工具链即可直接部署。

分支化、逐步推进的 Git 流程

它一次只处理一个功能，每个功能在独立的 Git 分支上进行，提交前需要开发者手动批准。这降低了 AI 批量修改代码带来的风险，保留了人工审核节点。

设计取舍：为什么不做构建步骤

选择经典 PHP 主题、纯 CSS 和 vanilla JS 是有意为之。WordPress 生态中，页面构建器（如 Elementor、Divi）虽然降低了上手门槛，但往往带来性能开销和代码锁定。无构建步骤意味着主题可以直接部署，无需 Node 工具链，对传统 WordPress 开发者更友好。

ACF Flexible Content 本身是成熟方案，结合 scoped CSS 可以控制样式污染。对于需要长期维护的企业站点，这种结构比一次性导出的静态页面更实用。

对 AI 辅助开发的意义

这个工具的价值不在于“全自动”，而在于把 AI 放在设计还原这个具体、可验证的环节。/pixel-check 提供了客观的验收标准，Git 分支和人工审批则保留了控制权。

对前端团队而言，这类 Claude Code skills 代表了一种趋势：将 AI 能力封装为工作流中的具体命令，而非泛化的聊天助手。设计还原是 Web 开发中反馈明确、重复度高的任务，适合被这类工具优化。

目前项目已开源于 GitHub，并在 Vercel 上提供演示。实际效果取决于 Figma 文件的规范性——设计 token 越统一，生成结果越可靠。