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 路線更短，沒有建置步驟
首先你手上到底有什麼

轉到 WordPress 之前：Claude Design 給了你什麼輸出？

Claude 會產生兩種輸出，每種走不同的路線。開始之前先確認你手上是哪一種，因為它決定了轉換需要多長時間。

Claude 給了你什麼它是什麼路線
Claude Design：HTML artifactHTML artifact 一個獨立完整的 .html 檔案：程式碼、樣式和指令碼都在裡面。 就是本文。它已經是靜態 HTML，正是轉換器需要的輸入。
Claude Design：React artifactReact artifact 一個元件。頁面只有在 JavaScript 執行後才會出現，外層的 HTML 只是一個供 App 掛載的空元素。 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 中編輯它的常見問題或功能網格。這種情況確實發生過，發現它的是這次人工檢查，而不是任何自動檢查。

之後與佈景主題長期相處

轉成 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 位址計算，所以只有一個 IP 的辦公室只有一份額度。免費版用於試用工具、個人網站和非商業用途。

Pro 授權取消頁數限制，轉換和重新執行都不限次數。它還解鎖把商店轉換為 WooCommerce 的步驟。這一步從不免費：對於帶商店的網站，App 會直接拒絕免費轉換，而不是只做一半。你可以在價格頁面按月或按年購買 Pro，測試期間首次付款享 30% 折扣。

有一點要注意：這是測試版。檢查能發現大部分差異，但不是全部。因此，把每個頁面和原版對照檢視是流程的一部分，而不是可有可無的潤色。也因此，你應該先免費轉換一個自己的專案，然後再決定是否信任它。

整個流程的逐步指南見 html2wp App 文件。如果你的 artifact 是 React，Lovable 轉 WordPress 指南介紹了那條路線。