html2wp 首页html2wp.dev
查看价格

html2wp / 博客 / Claude Design 转 WordPress

Claude Design 转 WordPress：如何把设计转换成主题

在所有生成式设计中，把 Claude Design 转换为 WordPress 是最短的路线。如果 Claude 以 HTML 形式给了你设计，那它正是转换器想要的输入：不用构建，不用额外的浏览器步骤，也没有框架。唯一要检查的是，一个 artifact 是否足够撑起你的网站。转换仍在你自己的电脑上运行，所以需要 Docker、Node 和 Python。清单见下文，很短。

Claude Design 转 WordPress 指南中的 Claude Design 标志发布于 · 更新于 · 比 Lovable 路线更短，没有构建步骤
首先你手上到底有什么

Claude Design 给了你什么输出？

Claude 会生成两种输出，每种走不同的路线。开始之前先确认你手上是哪一种，因为它决定了转换需要多长时间。

Claude 给了你什么它是什么路线
Claude Design：HTML artifactHTML artifact 一个自包含的 .html 文件：代码、样式和脚本都在里面。 就是本文。它已经是静态 HTML，正是转换器需要的输入。
Claude Design：React artifactReact artifact 一个组件。页面只有在 JavaScript 运行后才会出现，外层的 HTML 只是一个供应用挂载的空元素。 Lovable 分步指南：同类输入，同样多出一步。

如果不确定，打开文件，看看 <body> 里面。如果能看到你的标题和段落，那就是 HTML artifact，你来对地方了。如果 body 里只有一个空的 <div> 和一个 script 标签，那就是另一种。

为什么 HTML 更简单

React 项目必须先构建，再在真实浏览器中打开，才有可转换的内容。HTML artifact 省掉了这一步。代码已经完整写在文件里，后面的每一步都从中读取。

从 Claude Design 导出到文件夹，包括图片

输入始终是你磁盘上的一个文件夹。线上网站的地址不是受支持的输入，这是有意为之。已发布页面的副本只保留渲染结果，会丢失源文件所掌握的信息。

所以，从 Claude 导出设计（下载 artifact），新建一个文件夹，把文件以 index.html 的名称保存进去。如果设计链接了不在文件内部的图片，把它们放在旁边，放在代码所期望的相对位置。

终端
mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

一个页面，还是多个？

一个 artifact 就是一个页面，单页网站可以顺利转换，它会成为主题的首页。如果你想要带“关于”和“联系”页面的网站，也请 Claude 生成这些页面，并把每个页面分别保存为同一文件夹中的 .html 文件。文件名很重要：分析步骤会读取文件名，并根据名称理解 blog.html 或 about.html 这样的文件。

如果不超过 5 个文件，整个转换都在免费版范围内。

把 Claude Design 转换为 WordPress 对电脑的要求

较短的路线同样在你的电脑上运行，要求并不会减少。浏览器和临时 WordPress 是用来检查结果的，而不是用来生成结果的：

  • Node 20 或更高版本，以及安装了 Playwright 和 Pillow 包的 Python 3。
  • Docker，并带有 docker compose 命令。它在你的电脑上启动一个临时 WordPress，转换器先把主题安装到那里，然后才交给你。
  • php-cli，因为每个 PHP 文件在放进 ZIP 之前都要经过语法检查。
  • jq、curl、bash 和 tar。目标 WordPress 必须是 6.6 或更高版本。

第一步会检查所有这些。它会区分哪些可以在你自己的文件夹里自行安装，哪些需要你来决定。除非你要求，否则它不会替你安装 Docker。

Docker 不是可选项，也最让人意外

在浏览器里运行的转换器不需要它，因为它跳过了这一步。这里，生成的主题会放进一个真实的 WordPress，转换器先在那里测试，然后才交给你。容器正是为此而用。如果 Docker 没有运行，转换会在第一步就停下并立即告诉你，而不是等到最后。

转换从 artifact 到主题

运行 Claude Design 到 WordPress 的转换

Claude Code

claude
/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp
终端，只需一次
python3 -m playwright install chromium

Codex

终端
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

然后，在任意位置输入：

claude
/html2wp:html2wp

convert ./my-site

文件夹路径就是全部指令。你不用写配置文件，也不用选择构建命令。在 Codex 中，输入 convert ./my-site with html2wp。如果你不想用终端，可以在 html2wp 桌面应用中打开同一个文件夹（这是一篇带截图的指南）。

Flash 大约需要 30 分钟，Full 大约一小时，具体取决于页面数量和电脑速度。单页 artifact 耗时较短，但无论输入多小，检查都会完整运行。

它替你决定什么，又会问你什么

在生成任何东西之前，它会先测量你的文件。它列出页面，判断代码中哪些部分是共用的、哪些是独有的。它还会找出设计令牌（design tokens）、任何像博客的内容，以及哪些页面是独立的。然后，它写下计划，并按计划进行转换。

生成式设计经常遇到两种情况：

  • 每个设计变体都会保留。如果你的页面不共用同一个页头，它不会挑出一个然后把其余的抹平。它会为每个变体创建一个模板部件，并把每个页面连接到它实际使用的那个。来自不同 Claude 对话的 artifact，差异往往比你记得的更大。
  • 文字中的花括号会保留下来。中间步骤使用类似 JSX 的格式。如果不处理，你文字中的 JSON 或 CSS 示例会破坏构建，或在页面上显示为 &lbrace;。转换器会处理它们，所以花括号在页面上仍然是花括号。

重复的内容组，例如卡片、客户评价或常见问题，会保存为集合，而不是硬编码的标记。因此，之后你真的可以编辑它们，而不只是看起来能编辑。

不能跳过的检查

转换器会把每个页面和它的原版并排放进一张图里，你要从上到下逐一看完每一张。

有一次转换中，页面靠下的位置缺了一个区块，而像素比对只显示 0.4% 的差异，于是通过了检查。数值检查天生看不到三类缺陷。第一类是看起来完美、却什么都不做的控件。第二类是从模板来源的那一个页面硬编码进来的值。第三类是只有在滚动、点击或提交表单后才会出现的问题。

还要检查内容能不能编辑。一个页面可以做到像素级一致，却没有人能在 wp-admin 中编辑它的常见问题或功能网格。这种情况确实发生过，发现它的是这次人工检查，而不是任何自动检查。

之后与主题长期相处

Claude Design 转换为 WordPress 后如何编辑：主题、Visual Edit 还是页面构建器

你的文件夹里会多出两个文件：主题 ZIP，以及旁边的 CONVERSION-REPORT.md。报告列出转换涵盖了什么、检查发现了什么、还有哪些未解决。主题的安装方式和任何 WordPress 主题一样（外观 → 主题 → 添加新主题 → 上传主题）。

主题是独立的。页面、博客、表单、菜单、SEO 和重定向都是它自己的代码。它不需要插件就能运行，也从不连接我们的服务器。博客文章在区块编辑器里写，页面文字仍保留在 HTML 中。想不写代码编辑页面，有两个选择：Visual Edit 和页面构建器。

方式你得到什么你付出什么
只用主题 你的代码，原封不动，上面不装任何东西。没有需要续费的东西，也不会因为别人的更新而出问题。 没有插件时，页面文字要在 HTML 里修改。如果客户想自己改，可以用 Visual Edit（Lite 免费）。
Visual Edit，我们的插件 在页面上点击标题，输入新内容，然后保存。文字、图片、链接、表单和菜单都在原处编辑，代码保持不变。Lite 免费，不需要许可证密钥。 多装一个插件。Lite 保留 10 步历史记录，没有 AI 聊天。Pro 两者都有，每年 €59。
Elementor
或其他页面构建器		 对已经在用它的人来说是熟悉的工作环境，客户也能不靠你自己重做页面。 代码被重建为构建器小部件。它不再是 Claude 做的那个设计。之后，网站离开 Elementor 就无法显示，你还要继承它的结构、CSS 和更新。

当设计只是一个起点时，页面构建器是不错的选择。当设计本身就是你要交付的东西时，它就是个坏选择。如果你转换的目的是让生成的设计在 WordPress 中保留下来，把它重建成小部件就违背了初衷。但如果下个季度会有别人重做布局，那么他们对 Elementor 的熟悉，可能比忠实还原设计更有价值。

如果选择 Visual Edit：Lite 还是 Pro

 Lite（免费）Pro
点击即编辑内容✓✓
表单、菜单、SEO 字段✓✓
通过 AI 聊天编辑–✓，使用你自己的 API 密钥
主题导出–✓
Turnstile 表单保护–✓
AI 图片编辑和图片生成动画–✓
编辑历史10 步300 步

AI 聊天使用你自己的 API 密钥。我们不向你出售 token，费用由你与服务商结算。

Claude Design 转 WordPress 的价格和拒绝的情况

对所有人免费，无需密钥，无需注册：3 次转换，每次 5 个页面，另有共 5 次重新运行。两项次数都按 IP 地址计算，所以只有一个地址的办公室只有一份额度。免费版用于试用工具、个人网站和非商业用途。

Pro 许可证取消页数限制，转换和重新运行都不限次数。它还解锁把商店转换为 WooCommerce 的步骤。这一步从不免费：对于带商店的网站，应用会直接拒绝免费转换，而不是只做一半。你可以在价格页面按月或按年购买 Pro，测试期间首次付款享 30% 折扣。

有一点要注意：这是测试版。检查能发现大部分差异，但不是全部。因此，把每个页面和原版对照查看是流程的一部分，而不是可有可无的润色。也因此，你应该先免费转换一个自己的项目，然后再决定是否信任它。

整个流程的分步指南见 html2wp 应用文档。如果你的 artifact 是 React，Lovable 转 WordPress 指南介绍了那条路线。