Từ Claude Design sang WordPress: cách chuyển thiết kế từ Claude thành theme

Claude Design đã đưa cho bạn kết quả gì?

Claude tạo ra hai loại kết quả, và mỗi loại đi một con đường khác nhau. Hãy kiểm tra bạn có loại nào trước khi bắt đầu, vì nó quyết định việc chuyển đổi mất bao lâu.

Claude đưa bạn gì	Nó là gì	Con đường
Artifact HTML	Một file .html khép kín: mã, style và script đều nằm bên trong.	Bài viết này. Nó đã là HTML tĩnh, đúng đầu vào mà công cụ chuyển đổi cần.
Artifact React	Một component. Trang chỉ xuất hiện sau khi JavaScript chạy, và HTML bao quanh là một phần tử trống để ứng dụng gắn vào.	Hướng dẫn Lovable: cùng loại đầu vào, cùng bước bổ sung.

Nếu không chắc, hãy mở file và xem bên trong <body>. Nếu bạn thấy tiêu đề và đoạn văn của mình ở đó, bạn có artifact HTML và đang ở đúng chỗ. Khi body chỉ là một <div> trống và một thẻ script, bạn có loại còn lại.

Xuất từ Claude Design vào một thư mục, kèm hình ảnh

Đầu vào luôn là một thư mục trên ổ đĩa của bạn. Địa chỉ của một site đang chạy không phải đầu vào được hỗ trợ, và đó là có chủ ý. Bản sao của một trang đã xuất bản chỉ giữ kết quả hiển thị và mất những gì file nguồn biết.

Vì vậy hãy xuất thiết kế từ Claude (tải artifact về), tạo một thư mục và lưu file vào đó với tên index.html. Nếu thiết kế liên kết tới hình ảnh không nằm trong file, hãy đặt chúng bên cạnh, đúng các vị trí tương đối mà mã mong đợi.

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

Một trang hay nhiều trang?

Một artifact là một trang, và site một trang chuyển đổi không gặp vấn đề gì. Nó trở thành trang chủ của theme. Nếu bạn muốn site có trang Giới thiệu và Liên hệ, hãy nhờ Claude làm cả những trang đó và lưu mỗi trang thành một file .html riêng trong cùng thư mục. Tên file quan trọng: bước phân tích đọc chúng và hiểu file tên blog.html hay about.html qua tên của nó.

Nếu bạn giữ ở mức năm file trở xuống, toàn bộ việc chuyển đổi nằm trong bản miễn phí.

Máy tính cần gì để chuyển Claude Design sang WordPress

Con đường ngắn hơn cũng chạy trên máy của bạn, và yêu cầu không giảm đi. Trình duyệt và WordPress tạm thời có mặt để kiểm tra kết quả, không phải để tạo ra nó:

• Node 20 trở lên và Python 3 với các gói Playwright và Pillow.
• Docker với lệnh docker compose. Nó khởi động một WordPress tạm thời trên máy tính của bạn, và công cụ chuyển đổi cài theme vào đó trước khi bạn xem.
• php-cli, vì mọi file PHP đều qua kiểm tra cú pháp trước khi vào file ZIP.
• jq, curl, bash và tar. WordPress đích phải là phiên bản 6.6 trở lên.

Bước đầu tiên kiểm tra tất cả những thứ này. Nó tách những gì tự cài được bên trong thư mục của bạn khỏi những gì bạn phải quyết định. Nó sẽ không cài Docker cho bạn trừ khi bạn yêu cầu.

Chạy chuyển Claude Design sang WordPress

Claude Code

/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

Sau đó, từ bất kỳ đâu, hãy gõ:

/html2wp:html2wp

convert ./my-site

Đường dẫn thư mục là toàn bộ chỉ dẫn. Bạn không viết file cấu hình nào và không phải chọn lệnh build. Trong Codex, hãy gõ convert ./my-site with html2wp. Nếu bạn không muốn làm việc trong terminal, bạn có thể mở cùng thư mục đó trong ứng dụng desktop html2wp (hướng dẫn có ảnh chụp màn hình).

Flash mất khoảng 30 phút và Full khoảng một giờ, tùy số trang và tốc độ máy tính của bạn. Artifact một trang nằm ở phía ngắn hơn, nhưng các bước kiểm tra luôn chạy đầy đủ, dù đầu vào nhỏ đến đâu.

Những gì nó quyết định thay bạn, và những gì nó hỏi

Trước khi tạo bất cứ thứ gì, nó đo các file của bạn. Nó liệt kê các trang và xác định phần mã nào dùng chung, phần nào riêng. Nó cũng tìm design token, bất cứ thứ gì trông giống blog và những trang nào đứng riêng. Sau đó nó ghi lại kế hoạch và chuyển đổi theo kế hoạch đó.

Một thiết kế được tạo ra thường gặp hai điều:

• Mọi biến thể thiết kế đều được giữ. Nếu các trang không dùng chung một header, nó không chọn một bản thắng rồi san phẳng phần còn lại. Thay vào đó, nó tạo một template part cho mỗi biến thể và nối mỗi trang với đúng biến thể trang đó đã dùng. Artifact từ các cuộc chat Claude khác nhau thường khác nhau nhiều hơn bạn nhớ.
• Dấu ngoặc nhọn trong văn bản được giữ nguyên. Bước trung gian dùng định dạng giống JSX. Nếu không xử lý, một mẫu JSON hay CSS trong văn bản sẽ làm hỏng bản build hoặc hiện trên trang thành {. Công cụ chuyển đổi xử lý chúng, nên dấu ngoặc vẫn là dấu ngoặc trên trang.

Các nhóm lặp lại, ví dụ thẻ, lời chứng thực hay FAQ, được lưu thành collection thay vì mã HTML gán cứng. Nhờ vậy, sau này bạn thật sự sửa được chúng, chứ không chỉ trông như sửa được.

Bước rà soát không thể bỏ qua

Công cụ chuyển đổi đặt mỗi trang vào một ảnh cạnh bản gốc, và bạn đọc từng ảnh từ trên xuống dưới.

Trong một lần chuyển đổi, một section ở phía dưới trang bị mất, và phép so sánh pixel chỉ cho thấy khác biệt 0,4%, nên trang vẫn qua kiểm tra. Về bản chất, kiểm tra bằng con số không thấy được ba loại lỗi. Loại đầu tiên là một nút điều khiển trông hoàn hảo nhưng không làm gì. Loại thứ hai là một giá trị gán cứng từ đúng một trang mà template được tạo ra. Còn loại thứ ba là bất cứ thứ gì chỉ xuất hiện sau khi bạn cuộn, bấm hoặc gửi form.

Hãy kiểm tra cả việc bạn có sửa được nội dung không. Một trang có thể khớp đến từng pixel mà không ai sửa được FAQ hay lưới tính năng của nó từ wp-admin. Chuyện đó đã xảy ra, và chính bước rà soát này phát hiện ra, không phải kiểm tra tự động nào.

Chỉnh sửa sau khi chuyển Claude Design sang WordPress: theme, Visual Edit hay page builder

Hai file xuất hiện trong thư mục của bạn: file ZIP theme và, bên cạnh, CONVERSION-REPORT.md. Báo cáo liệt kê những gì việc chuyển đổi đã bao quát, những gì bước rà soát tìm ra và những gì còn bỏ ngỏ. Bạn cài theme như mọi theme WordPress khác (Giao diện → Giao diện → Thêm mới → Tải giao diện lên).

Theme tự đứng độc lập. Trang, blog, form, menu, SEO và chuyển hướng đều là mã riêng của nó. Nó không cần plugin nào để chạy và không bao giờ liên lạc với máy chủ của chúng tôi. Bài viết blog được viết trong trình soạn thảo block, còn chữ trên các trang vẫn nằm trong HTML. Để sửa trang mà không cần code có hai lựa chọn: Visual Edit và page builder.

Page builder là lựa chọn tốt khi thiết kế chỉ là điểm khởi đầu. Nó là lựa chọn tồi khi thiết kế chính là thứ bạn bàn giao. Nếu bạn chuyển đổi để thiết kế được tạo ra tồn tại nguyên vẹn trong WordPress, dựng lại nó bằng widget sẽ xóa bỏ lý do bạn bắt đầu. Nhưng nếu quý sau người khác sẽ làm lại bố cục, kinh nghiệm Elementor của họ có thể đáng giá hơn một thiết kế trung thành.

Lite hay Pro, nếu bạn chọn Visual Edit

Chat AI chạy bằng API key của riêng bạn. Chúng tôi không bán token cho bạn, và bạn thanh toán chi phí của chúng với nhà cung cấp.

Giá, và những gì việc chuyển đổi từ chối

Miễn phí cho mọi người, không cần khóa và không cần đăng ký: ba lần chuyển đổi, mỗi lần năm trang và tổng cộng năm lần chạy lại. Cả hai con số đều tính theo địa chỉ IP, nên một văn phòng dùng một địa chỉ chỉ có một hạn mức. Bản miễn phí dành cho việc thử công cụ, site cá nhân và công việc phi thương mại.

Giấy phép Pro bỏ giới hạn trang và không giới hạn chuyển đổi lẫn chạy lại. Pro cũng mở bước biến cửa hàng thành WooCommerce. Bước đó không bao giờ miễn phí: ứng dụng từ chối thẳng một lần chuyển đổi miễn phí của site có cửa hàng, thay vì làm một nửa. Bạn có thể mua Pro theo tháng hoặc theo năm trên trang bảng giá, và trong giai đoạn beta lần thanh toán đầu được giảm 30%.

Một lưu ý: đây là bản beta. Các bước kiểm tra bắt được phần lớn khác biệt, không phải tất cả. Vì vậy việc đọc từng trang cạnh bản gốc là một phần của quy trình, không phải bước trau chuốt tùy chọn. Cũng vì vậy, trước tiên bạn nên chuyển đổi miễn phí một thứ của riêng mình, rồi mới tin tưởng nó.

Hướng dẫn từng bước cho toàn bộ quy trình có trong tài liệu ứng dụng html2wp. Nếu artifact của bạn là React, hướng dẫn chuyển Lovable sang WordPress mô tả con đường đó.