AI Tools

Cách Tạo Website WordPress Bằng Claude Code: Hướng Dẫn Từng Bước Với Demo Luna Spa

Tháng 6 11, 2026 17 phút đọc

Bạn sẽ làm được gì sau bài viết này?

Trong bài này, mình sẽ hướng dẫn bạn tạo một website mẫu cho Luna Spa bằng Claude Code và WordPress — đi từ con số 0 đến lúc website chạy thật trên hosting, có thể chỉnh sửa nội dung dễ dàng.

Quy trình đi theo đúng thứ tự sau:

Ý tưởng → Nội dung → Giao diện HTML → Theme WordPress → Đưa lên Hostinger → Quản lý nội dung bằng WordPress

Sau khi làm một lần, bạn hoàn toàn có thể đóng gói lại quy trình này thành một Agent tạo website để dùng đi dùng lại cho nhiều dự án khác — của bạn hoặc của khách hàng.

1. Cần chuẩn bị những gì?

  • Claude Code hoặc một công cụ AI viết code tương tự.
  • Một thư mục dự án trống trên máy.
  • Hai bộ kỹ năng (skill) thiết kế cho Claude Code.
  • Một tài khoản Hostinger nếu bạn muốn làm theo đúng như trong video.
  • Một website WordPress đã được cài trên Hostinger trước khi upload theme.
  • Quyền quản trị WordPress (WordPress Admin).

2. Nạp kỹ năng thiết kế cho Claude Code

Claude Code viết code rất nhanh, nhưng muốn giao diện đẹp và có gu hơn thì nên đưa cho nó tiêu chuẩn thiết kế ngay từ đầu. Bạn có thể hiểu “skill” đơn giản là một bộ hướng dẫn làm việc cho Claude Code, không phải plugin WordPress.

Xem video hướng dẫn chi tiết:

Có 2 GitHub bạn nên cài cho Claude Code:

GitHub Dùng để làm gì?
Anthropic Skills – Frontend Design Giúp Claude Code làm giao diện web có gu hơn: bố cục, chữ, màu, khoảng cách, hiệu ứng.
UI UX Pro Max Skill Giúp chọn hướng thiết kế, bảng màu, font chữ, phong cách, và kiểm tra trải nghiệm người dùng.

Bạn chỉ cần mở 2 trang GitHub này, copy link, rồi đưa cho Claude Code:

Hãy mở 2 GitHub này và cài các skill thiết kế theo hướng dẫn trong README:
1. https://github.com/anthropics/skills
2. https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Sau khi cài xong, hãy dùng chúng để giúp tôi chọn hướng thiết kế cho website Luna Spa.

Nếu lệnh cài đặt trên GitHub thay đổi theo thời gian, hãy ưu tiên làm theo README mới nhất. Bạn chỉ cần show rõ nguồn GitHub và để Claude Code đọc hướng dẫn cài.

Sau khi cài xong, hãy yêu cầu Claude Code chốt hướng thiết kế trước khi code:

Hãy dùng kỹ năng thiết kế giao diện web cho dự án này.
Trước khi code, hãy giúp tôi chọn hướng thiết kế, màu sắc, font chữ, bố cục từng phần và cách tối ưu trên điện thoại.

Một website đẹp không bắt đầu từ code. Nó bắt đầu từ hướng thiết kế rõ ràng.

3. Tạo ý tưởng và nội dung cho Luna Spa

Đừng bảo Claude Code code ngay. Hãy để nó hỏi lại trước, sau đó tạo file CONTENT.md làm nguồn nội dung chính cho toàn bộ website.

Tôi muốn tạo website WordPress cho một spa tên Luna Spa.

Mục tiêu:
- Website nhìn cao cấp, nhẹ nhàng, sạch và sang.
- Khách hàng chính là phụ nữ văn phòng, chủ doanh nghiệp nhỏ, người muốn chăm sóc da và thư giãn.
- Nút kêu gọi hành động chính là đặt lịch tư vấn hoặc đặt lịch liệu trình.
- Website sẽ được thiết kế giao diện trước, sau đó chuyển thành theme WordPress.

Trước khi code, hãy hỏi tôi các câu hỏi cần thiết về thương hiệu, dịch vụ, khách hàng, phong cách, các phần cần có trên trang và nội dung chính.
Sau khi đủ thông tin, hãy tạo file CONTENT.md làm nguồn nội dung chính cho website.

Nếu chưa biết trả lời thế nào, bạn có thể tham khảo bộ thông tin mẫu sau cho Luna Spa:

Mục Nội dung mẫu
Tên thương hiệu Luna Spa
Câu tagline Chạm vào sự tĩnh lặng, đánh thức làn da
Khách hàng Phụ nữ văn phòng, chủ doanh nghiệp nhỏ, người cần chăm sóc da và thư giãn
Phong cách Cao cấp, tối giản, sáng, mềm, thiên nhiên
Màu chủ đạo Trắng ngà, xanh sage, vàng champagne, xám than
Nút chính Đặt lịch tư vấn / đặt lịch liệu trình

4. Dựng giao diện HTML trước

Bản HTML giúp bạn xem nhanh, sửa nhanh và chưa ảnh hưởng đến website thật. Khi bản này đẹp rồi, ta mới chuyển thành theme WordPress.

Thêm ảnh hoặc website mẫu để Claude Code hiểu gu thiết kế

Trước khi yêu cầu Claude Code dựng giao diện, bạn nên đưa thêm 2-3 ảnh chụp màn hình hoặc link website mẫu. Không phải để sao chép y nguyên, mà để Claude hiểu phong cách bạn thích: bố cục, màu sắc, khoảng trắng, hình ảnh, cách trình bày dịch vụ và cảm giác cao cấp.

Nguồn tham khảo có thể là website spa bạn thích, ảnh từ Pinterest, Dribbble, Awwwards, hoặc ảnh chụp màn hình website đối thủ trong ngành.

Đây là một số tham chiếu phong cách cho website Luna Spa:
- [Dán link website mẫu 1]
- [Dán link website mẫu 2]
- [Đính kèm ảnh chụp màn hình nếu có]

Không sao chép nội dung hoặc thương hiệu của họ.
Chỉ học cách họ dùng bố cục, màu sắc, khoảng trắng, hình ảnh và cảm giác cao cấp.
Sau đó hãy tạo giao diện riêng cho Luna Spa.

Sau đó, yêu cầu Claude Code dựng giao diện dựa trên CONTENT.md và các tham chiếu vừa đưa:

Dựa trên CONTENT.md và các tham chiếu thiết kế ở trên, hãy tạo website HTML/CSS/JS cho Luna Spa.

Yêu cầu:
- Dùng HTML, CSS, JavaScript thuần.
- Phong cách cao cấp, nhẹ nhàng, sạch, sang.
- Có các trang: index.html, services.html, about.html, contact.html, blog.html.
- Hiển thị tốt trên điện thoại.
- Có phần mở đầu, dịch vụ, quy trình, cảm nhận khách hàng, đặt lịch và footer.
- Code cần rõ ràng để sau này dễ chuyển thành theme WordPress.
- Tránh thiết kế quá chung chung.

5. Chỉnh giao diện cho cao cấp hơn

Đừng dừng ở bản đầu tiên AI tạo ra. Hãy yêu cầu Claude Code kiểm tra và nâng cấp thêm một vòng theo 8 tiêu chí:

  • Phong cách: website có cảm giác rõ không?
  • Chữ: font và cỡ chữ có dễ đọc không?
  • Màu: bảng màu có hài hòa không?
  • Thứ tự nhấn mạnh: người xem biết nhìn gì trước không?
  • Hình ảnh: ảnh có đúng ngành spa không?
  • Hiệu ứng: chuyển động có nhẹ và tinh tế không?
  • Điện thoại: bản mobile có thật sự dễ dùng không?
  • Lỗi nhỏ: link, form, khoảng cách, tốc độ có ổn không?
Hãy review website Luna Spa theo 8 tiêu chí:
1. Phong cách tổng thể
2. Font chữ và khả năng đọc
3. Màu sắc
4. Thứ tự nhấn mạnh nội dung
5. Hình ảnh
6. Hiệu ứng
7. Giao diện điện thoại
8. Các lỗi nhỏ như link, form, tốc độ, khoảng cách

Hãy chỉ ra điểm mạnh, điểm yếu, và đề xuất 5-8 cải thiện để website nhìn cao cấp hơn nhưng không bị rối.
Chưa sửa ngay, hãy giải thích trước.

Sau đó làm thêm một vòng tối ưu riêng cho điện thoại:

Hãy làm riêng một vòng tối ưu cho điện thoại.
Đừng chỉ thu nhỏ bản máy tính.
Hãy tối ưu menu, khoảng cách, nút đặt lịch, ảnh mở đầu, form và khả năng đọc.

6. Chuyển giao diện HTML thành theme WordPress

HTML là bản giao diện. Theme WordPress là cách để giao diện đó chạy bên trong WordPress.

Hãy chuyển website HTML Luna Spa thành một theme WordPress hoàn chỉnh.

Yêu cầu:
- Tạo style.css để WordPress nhận diện theme.
- Tạo functions.php để nạp CSS và JavaScript đúng cách.
- Tách phần đầu trang thành header.php.
- Tách phần cuối trang thành footer.php.
- Tạo front-page.php cho trang chủ.
- Tạo template cho trang dịch vụ, giới thiệu và liên hệ.
- Đưa hình ảnh, CSS, JavaScript vào thư mục assets.
- Đường dẫn hình ảnh trong theme phải dùng get_template_directory_uri().
- Theme cần có wp_head() và wp_footer().
- Không dùng công cụ build phức tạp.

Bảng quy ước chuyển đổi cơ bản:

Bản HTML Theme WordPress
index.html front-page.php
services.html page-services.php
about.html page-about.php
contact.html page-contact.php
blog.html Trang blog trong WordPress
CSS, JavaScript, hình ảnh Thư mục assets

Sau khi convert xong, nhờ Claude Code kiểm tra lại một lượt:

Hãy kiểm tra theme vừa tạo:
- Đường dẫn hình ảnh đã đúng chưa?
- CSS và JavaScript đã được nạp đúng chưa?
- Có thiếu wp_head hoặc wp_footer không?
- Có file nào vẫn còn dùng đường dẫn local không?
- Theme có thể upload lên WordPress được chưa?

7. Cài WordPress trên Hostinger trước

Trước khi upload theme, bạn cần cài WordPress trên Hostinger. Theme WordPress chỉ chạy được khi hosting đã có WordPress.

Truy cập hostinger.com/giangxai và dùng mã GIANGXAI. Nếu mua gói đủ điều kiện với kỳ hạn từ 12 tháng, bạn thường có thể nhận tên miền miễn phí 1 năm. Đuôi .com nằm trong nhóm đuôi hỗ trợ nếu tên miền còn trống.

  1. Mua gói hosting và chọn/nhận tên miền nếu gói của bạn đủ điều kiện.
  2. Trong hPanel, dùng luồng cài WordPress khi onboarding hoặc vào Auto Installer.
  3. Chọn WordPress, điền tên website, email quản trị, tên đăng nhập và mật khẩu.
  4. Hoàn tất cài đặt và đăng nhập WordPress Admin.
  5. Sau khi WordPress chạy được, chuyển sang bước đưa theme Luna Spa lên website.

8. Đưa theme Luna Spa lên Hostinger

Khi WordPress đã được cài xong, bạn có hai cách đưa theme lên: upload thủ công trong WordPress Admin, hoặc để Agent Code đẩy theme tự động.

Cách dễ nhất: upload theme bằng WordPress Admin

  1. Zip folder luna-spa-theme.
  2. Vào WordPress Admin sau khi đã cài WordPress trên Hostinger.
  3. Chọn Appearance → Themes → Add New → Upload Theme.
  4. Upload file zip và kích hoạt theme.
zip -r luna-spa-theme.zip luna-spa-theme

Cách tự động hơn: để Agent Code đẩy theme giúp bạn

Nếu bạn làm nhiều website, hãy hỏi Agent Code cách thiết lập để mỗi lần bạn chỉnh giao diện hoặc thêm trang mới, Agent Code có thể tự đẩy thay đổi lên Hostinger. Bạn không cần tự hiểu cấu hình kỹ thuật phía sau — hãy để Agent Code hỏi bạn cần cung cấp thông tin gì (thông tin hosting, tài khoản kết nối, tên website, thư mục WordPress…) và bạn chỉ cần cung cấp theo hướng dẫn.

Tôi muốn mỗi lần chỉnh giao diện hoặc thêm trang mới,
Agent Code có thể tự đẩy thay đổi lên website WordPress trên Hostinger.

Hãy hướng dẫn tôi cần chuẩn bị những thông tin gì.
Sau đó hãy tự cấu hình quy trình đẩy theme giúp tôi.
Trước khi đẩy lên website thật, hãy luôn báo rõ những file nào sẽ được thay đổi.

Với người mới, bạn có thể bỏ qua phần tự động này và upload bằng WordPress Admin. Khi đã làm nhiều website, hãy để Agent Code tự hướng dẫn và tự cấu hình quy trình đẩy lên Hostinger.

Nếu bạn không thấy chỗ upload theme thì làm gì?

Với người mới, không cần nhớ đường dẫn hosting hay lệnh kỹ thuật. Bạn chỉ cần hỏi trợ lý Hostinger/Kodee ngay trong hPanel, hoặc dùng File Manager nếu muốn upload thủ công. Ví dụ, bạn có thể hỏi:

WordPress root folder của domain này nằm ở đâu?
Nếu Agent Code cần kết nối nâng cao, tôi cần bật tính năng nào trong Hostinger?
Tôi cần upload custom theme vào thư mục nào?
Vì sao WordPress báo theme thiếu style.css?
Làm sao để xóa cache sau khi upload theme mới?

9. Kết nối phần quản lý nội dung WordPress với Claude Code

Sau khi theme chạy, WordPress là nơi quản lý nội dung phía sau. Giao diện do theme quyết định; còn bài viết, trang dịch vụ, hình ảnh, SEO, form đặt lịch và người dùng thì quản lý trong WordPress.

Với người mới, bạn không cần tự chọn cách kết nối kỹ thuật. Hãy hỏi Agent Code cần chuẩn bị thông tin gì để nó có thể hỗ trợ bạn tạo bài viết, sửa trang, cập nhật nội dung hoặc kiểm tra website WordPress.

Tôi muốn Agent Code hỗ trợ quản lý nội dung cho website WordPress Luna Spa.

Tôi cần tạo bài viết nháp, chỉnh nội dung trang dịch vụ,
cập nhật thông tin liên hệ và kiểm tra các trang quan trọng.

Hãy hướng dẫn tôi cần chuẩn bị những thông tin gì.
Sau đó hãy đề xuất cách kết nối phù hợp nhất với website của tôi.
Trước khi thay đổi nội dung trên website thật, hãy luôn cho tôi xem trước nội dung sẽ thay đổi.

Agent Code có thể gợi ý cách phù hợp tùy website của bạn. Phần kỹ thuật như dùng cổng kết nối nào, lệnh nào, hay plugin nào không cần đưa vào tài liệu cho người mới.

10. Đóng gói quy trình thành Agent Website

Nếu chỉ làm một website, các bước trên là đủ. Nếu làm nhiều website, hãy đóng gói quy trình thành một Agent để dùng lại:

Website-Agent/
  File hướng dẫn tổng
  Mẫu tạo website mới
  Mẫu nội dung
  Quy trình chọn hướng thiết kế
  Quy trình dựng giao diện
  Quy trình chuyển sang WordPress theme
  Quy trình cài WordPress trên Hostinger
  Quy trình đưa lên Hostinger
  Quy trình quản lý nội dung WordPress
  Checklist kiểm tra chất lượng

Lúc này Claude Code không còn chỉ là công cụ viết code. Nó trở thành một trợ lý có quy trình rõ ràng để tạo website WordPress — bạn có thể áp dụng cho chính dự án của mình hoặc nhận thêm dự án cho khách hàng.

11. Lỗi thường gặp và cách xử lý

Lỗi Cách xử lý
WordPress báo theme thiếu style.css Đảm bảo style.css nằm ngay trong folder theme, không nằm sâu trong folder con.
Ảnh không hiện Kiểm tra đường dẫn hình ảnh, trong theme nên dùng get_template_directory_uri().
CSS không chạy Kiểm tra functions.php và bảo đảm có wp_head().
JavaScript không chạy Kiểm tra cách nạp file JS và bảo đảm có wp_footer().
Upload rồi nhưng website chưa đổi Xóa cache plugin, cache hosting và cache trình duyệt.
Không biết thư mục gốc WordPress ở đâu Hỏi Kodee/Hostinger support hoặc kiểm tra File Manager trong hPanel.

Tổng kết

Chỉ với một quy trình rõ ràng — Ý tưởng, Nội dung, Giao diện HTML, Theme WordPress, Hosting, Quản lý nội dung — bạn hoàn toàn có thể tự tay dựng một website WordPress chuyên nghiệp bằng Claude Code, không cần biết code, không cần đội kỹ thuật.

Nếu bạn muốn làm theo đúng quy trình trong bài, hãy bắt đầu bằng việc chuẩn bị hosting tại hostinger.com/giangxai với mã GIANGXAI.

Và nếu muốn sở hữu bộ AI AGent để để xây hệ thống AI Agent cho công việc của riêng bạn, đừng ngần ngại tham khảo 7 AI Agent của Giangxai Lab 

Ps: Mình cũng đang đồng bộ thêm Agent thứ 8 là Agent Website đóng gói từ hường dẫn trên sẽ giúp bạn tạo Website nhanh hơn và tiện hơn x5, x10 lần nữa. 😀

← Quay lại Blog