html2wp / Blog / Claude Design sang WordPress trong ứng dụng

Xuất từ Claude Design: thành theme WordPress trong ứng dụng html2wp

Bạn có thể biến thiết kế từ Claude Design thành WordPress trong ứng dụng html2wp trên Mac và Windows, không cần terminal. Trước tiên, bạn lưu thiết kế dưới dạng HTML. Sau đó bạn thêm nó vào ứng dụng, chọn Flash hoặc Full, và cuối cùng tải về một theme WordPress trông giống thiết kế của bạn.

Hướng dẫn ngày · Flash khoảng nửa giờ, Full khoảng một giờ · ảnh chụp màn hình từ html2wp 1.0.20
Trước khi bắt đầuỨng dụng và thiết kế

Bạn cần gì để chuyển thiết kế Claude Design sang WordPress

  • Máy Mac chip Apple silicon (M1 trở lên) và macOS 12 trở lên.
  • Tài khoản ChatGPT. AI trong gói của chính bạn thực hiện việc chuyển đổi, nên bạn không trả chúng tôi tiền credit.
  • Bản xuất từ Claude Design: thiết kế lưu thành file HTML. Nếu có nhiều trang, hãy lưu mỗi trang thành một file riêng.

HTML từ Claude là con đường ngắn nhất tới theme, vì ứng dụng không phải build hay mở nó trong trình duyệt trước. Bản miễn phí chuyển đổi ba site, mỗi site tối đa năm trang. Với dự án khách hàng, bạn cần giấy phép Pro từ trang bảng giá.

Cài đặt, môi trường và đăng nhập

Tải ứng dụng cho Mac và chuyển nó vào thư mục Applications. Trong Settings, bấm Prepare environment, và ứng dụng tải Docker cùng môi trường chuyển đổi. Sau đó đăng nhập bằng Connect with ChatGPT. Hướng dẫn Lovable cho ứng dụng mô tả chi tiết từng bước này kèm ảnh chụp màn hình, và với Claude các bước giống hệt.

Ứng dụng html2wp với môi trường đã sẵn sàng sau khi bấm Prepare environment
Môi trường đã sẵn sàng, ứng dụng đang chờ dự án đầu tiên.
Chuyển đổiTừ thiết kế tới theme

Flash hay Full cho theme WordPress

Flash là mặc định: mỗi bước chạy một lần, và mất khoảng nửa giờ. Full chạy mọi bước kiểm tra và cố sửa lỗi, nên mất khoảng một giờ. Thiết kế một trang thường nằm ở phía ngắn hơn, nhưng các bước kiểm tra vẫn chạy đầy đủ.

Thiết kế xuất từ Claude Design trong ứng dụng html2wp trước khi bắt đầu Flash hoặc Full
Dự án HTML tĩnh trước khi bắt đầu chuyển đổi.

Trong lúc chuyển đổi, tab "Overview" cho thấy ứng dụng đang làm gì. Để tạm dừng, bấm Stop conversion, rồi tiếp tục bằng "Continue".

Lần chuyển đổi đang chạy của một dự án Claude Design trong ứng dụng html2wp
Tiến độ chuyển đổi với bước hiện tại.

Kiểm tra thiết kế trong ứng dụng

Tab Compare hiển thị bản gốc và bản WordPress cạnh nhau, ở độ rộng desktop và mobile. Hãy xem qua từng trang, vì kiểm tra tự động bắt được phần lớn khác biệt, nhưng không phải tất cả. Nếu có gì không khớp, hãy viết vào khung chat. Thay đổi diễn ra trong bản xem trước, rồi "Make release" đóng gói một phiên bản theme mới.

Tab Compare trong ứng dụng html2wp với bản gốc và bản WordPress
So sánh một trang sau khi chuyển đổi. Ảnh chụp từ một site mẫu.
Ứng dụng html2wp sau một lần sửa qua chat, với nút Make release
Sau một thay đổi trong chat, bạn đóng gói theme bằng "Make release".

Xuất theme WordPress từ thiết kế Claude Design

Trong tab Exports, bấm "Save" cạnh theme WordPress và lưu file ZIP. Trong WordPress, bạn tải nó lên tại Giao diện → Giao diện → Thêm mới → Tải giao diện lên. Theme tự đứng độc lập: trang, form, menu và SEO chạy không cần plugin.

Tab Exports trong html2wp với file ZIP theme được build từ thiết kế xuất từ Claude Design
Theme hoàn chỉnh, báo cáo chuyển đổi và dự án gốc.

Trình chỉnh sửa Visual Edit thêm khả năng bấm để sửa cho khách hàng của bạn. Nếu bạn làm việc trong terminal, hướng dẫn với plugin cho Claude Code và Codex nói về cùng lần chuyển đổi đó.