Xây dựng Website Chuyên Nghiệp Tự Động Với Claude Code và Nano Banana 2
📋 Mục lục (8 mục)
▲
4 views
Bạn có muốn xây dựng những website đẹp mắt, chuẩn SEO, đa trang và thân thiện với thiết bị di động chỉ trong vài phút, ngay cả khi bạn chưa từng viết dòng mã nào? Bài viết này sẽ hướng dẫn chi tiết cách tận dụng sức mạnh của trí tuệ nhân tạo với Claude Code và Nano Banana 2 để biến điều đó thành hiện thực, giúp bạn tạo ra những trang web ấn tượng mà không phải là “sản phẩm AI kém chất lượng”.
Các Công Cụ Chính
Để thực hiện quy trình này, chúng ta sẽ sử dụng các công cụ sau:
- Claude Code: Trợ lý mã hóa AI.
- Nano Banana 2: Mô hình tạo hình ảnh và video mạnh mẽ.
- Firecrawl.dev: Công cụ trích xuất tài sản thương hiệu (logo, màu sắc).
- Hixelon: Công cụ tạo chuyển động video giữa các hình ảnh.
- Anti-gravity (Tiện ích mở rộng VS Code): Môi trường làm việc cho Claude Code, quản lý các “skill” (kỹ năng) và quy trình xuất bản.
- GitHub: Nền tảng quản lý phiên bản mã nguồn.
- Vercel: Dịch vụ lưu trữ và xuất bản website.
Quy Trình Xây Dựng Website Chi Tiết
Bước 1: Xác Định Thương Hiệu và Mục Đích
Đây là “trái tim” của website. Bạn cần xác định rõ thương hiệu (ví dụ: một công ty chuyển nhà) và mục đích của website.
- Trích xuất tài sản thương hiệu:
- Truy cập firecrawl.dev.
- Chọn “scrape” -> “markdown” -> “branding”.
- Nhập URL của thương hiệu mục tiêu để trích xuất logo, màu sắc, phông chữ và các thông tin quan trọng khác. Những thông tin này sẽ là nền tảng cho thiết kế website.
Bước 2: Tạo Hoạt Ảnh Cuộn Tương Tác (Scroll-Stopping Animation)
Mục tiêu là tạo một chuỗi hình ảnh và video chuyển động độc đáo khi người dùng cuộn trang.
- Tải và cài đặt skill “asset generation” cho Claude Code:
- Skill này giúp tạo ra các tài sản hình ảnh cần thiết. Nếu chưa có, bạn có thể tạo bằng lệnh
/skillcreatortrong Claude Code. - Sử dụng “scroll stop prompter” trong Claude Code:
- Trong Claude Code, nhập lệnh
/scroll stop prompter. - Nhập mô tả chi tiết về hoạt ảnh bạn muốn. Ví dụ: “Xây dựng giao diện HTML cho một công ty chuyển nhà, hình ảnh chính là phía sau một chiếc xe van đang nổ tung với các vật phẩm bay ra.” Claude Code sẽ tạo ra các prompt phù hợp cho việc tạo hình ảnh.
- Tạo hình ảnh bắt đầu với Nano Banana 2:
- Truy cập Nano Banana 2.
- Sử dụng prompt được tạo từ Claude Code.
- Tải lên logo và hình ảnh liên quan đến thương hiệu (ví dụ: chiếc xe van của công ty).
- Cấu hình: Kích thước 16×9, độ phân giải tối thiểu 2K. Tạo 4 phiên bản lặp (iterations) để có nhiều lựa chọn.
- Lưu ý quan trọng: Đảm bảo có “nền trắng sạch” (clean white background) để không có chi tiết nào chạm vào các cạnh của hình ảnh.
- Chọn hình ảnh ưng ý nhất làm hình ảnh bắt đầu.
- Tạo hình ảnh kết thúc (bung ra) với Nano Banana 2:
- Sử dụng hình ảnh bắt đầu đã chọn làm hình ảnh “tham chiếu” (reference).
- Sử dụng prompt từ Claude Code để mô tả phiên bản “bung ra” của hình ảnh.
- Cấu hình tương tự: 16×9, 2K, 4 phiên bản lặp.
- Chọn hình ảnh ưng ý nhất làm hình ảnh kết thúc.
- Tạo video chuyển động với Hixelon:
- Truy cập Hixelon, chọn mục “video”.
- Tải lên hình ảnh bắt đầu và hình ảnh kết thúc.
- Sử dụng prompt “video transition” được tạo từ Claude Code.
- Cấu hình: Cling 3.0, thời lượng 7 giây.
- Tạo video và tải xuống.
Bước 3: Xây dựng Website MVP (Phiên bản Tối thiểu Khả dụng)
Sử dụng Anti-gravity và Claude Code để tạo khung website cơ bản với hoạt ảnh đã có.
- Tải và cài đặt skill “3D website builder” cho Claude Code:
- Skill này sẽ giúp xây dựng cấu trúc website.
- Tạo thư mục dự án mới trong Anti-gravity:
- Mở Anti-gravity (trong VS Code), tạo một thư mục mới cho dự án của bạn (ví dụ: “Website Anivan Mới”).
- Kích hoạt Claude Code và chỉ định video:
- Trong Claude Code, sử dụng lệnh
/scroll stop builder. - Khi được hỏi về tệp video, chọn “other” và nói “Đây là tệp cuối cùng tôi đã tải xuống trên máy tính của mình.”
- Chọn “edit automatically” để Claude Code tự động thực hiện các chỉnh sửa.
- Claude Code sẽ tạo ra một website MVP: Website này sẽ có bảng màu, thông tin cơ bản và hoạt ảnh cuộn mà bạn đã tạo.
- Kỹ thuật nâng cao: Tái tạo cấu trúc website hiện có:
- Trích xuất HTML: Sử dụng công cụ “HTML website extractor” (tìm trên Google) để tải về mã HTML của một website mẫu hoặc website hiện tại của khách hàng.
- Tái tạo trong Anti-gravity:
- Mở một cửa sổ Claude Code mới trong Anti-gravity.
- Nhập prompt: “Tôi vừa tải xuống HTML từ website gốc. Tôi muốn sử dụng HTML đó để tái tạo lại website với nội dung mới và hoạt ảnh cuộn đã bao gồm.”
- Claude Code sẽ tái tạo website dựa trên cấu trúc HTML bạn cung cấp, tích hợp nội dung mới và hoạt ảnh cuộn, đồng thời giữ nguyên kiểu chữ và logo của website gốc.
Bước 4: Xuất bản và Tối ưu hóa Website
Đưa website của bạn lên mạng và quản lý tên miền, phân tích.
- Kết nối Anti-gravity với GitHub và Vercel:
- Tạo tài khoản GitHub và Vercel (có gói miễn phí).
- Tạo token API Vercel tại
vercel.com/account/settings/tokens. - Trong Anti-gravity, nhập prompt: “Tôi muốn bạn kết nối với GitHub để tạo và xuất bản các kho lưu trữ. Và tôi muốn bạn kết nối với Vercel.”
- Thêm khóa API Vercel của bạn vào cấu hình MCP của Anti-gravity bằng cách sử dụng
@@mcp_config. - Xuất bản website:
- Trong Anti-gravity, nhập prompt: “Tôi muốn bạn tạo một kho lưu trữ GitHub, xuất bản nó. Sau đó, tôi muốn bạn tạo một website mới trên Vercel cho dự án này.”
- Anti-gravity sẽ tạo kho lưu trữ GitHub và triển khai website của bạn lên Vercel.
- Kiểm tra và cập nhật:
- Mở các liên kết GitHub và Vercel do Anti-gravity cung cấp để xem website đã hoạt động.
- Bạn có thể xem trước website trên localhost (máy tính của bạn) bằng cách yêu cầu Claude Code: “Mở website này trên localhost cho tôi.”
- Sau khi chỉnh sửa, yêu cầu Anti-gravity đẩy phiên bản mới lên Vercel: “Tôi muốn bạn đẩy phiên bản mới này lên mạng.”
- Mua tên miền:
- Trên Vercel, truy cập website của bạn, vào mục “Domains”, nhập tên miền mong muốn và gán.
- Thêm Analytics (Phân tích):
- Trên Vercel, vào mục “Analytics” của website và bật tính năng này (có sẵn trong gói Hobby).
- Sao chép đoạn mã analytics và yêu cầu Anti-gravity thêm vào website của bạn: “Tôi muốn thêm phân tích vào website của tôi trên Vercel.”
Bước 5: Thêm Nhiều Trang và Tối ưu hóa SEO Toàn Diện
Mở rộng website và đảm bảo trang web của bạn thân thiện với công cụ tìm kiếm.
- Yêu cầu tạo thêm trang:
- Trong Anti-gravity, nhập prompt: “Tôi có một website hiện có. Hãy xem xét trang web hiện tại của tôi và hiểu ngôn ngữ thiết kế. Hỏi tôi muốn tạo những trang nào. Đối với mỗi trang, hãy khớp chính xác thiết kế hiện có. Thêm tối ưu hóa SEO đầy đủ, bao gồm dữ liệu có cấu trúc. Đảm bảo website phản hồi hoàn toàn và cập nhật điều hướng trên tất cả các trang. Sau khi tạo tất cả các trang, hãy chạy một kiểm tra SEO đầy đủ trên mỗi trang và cung cấp báo cáo.”
- Anti-gravity sẽ hỏi bạn muốn tạo những trang nào (ví dụ: Trang giới thiệu, Trang lời chứng thực, Trang đội ngũ).
- Nó sẽ tạo các trang mới, đảm bảo khớp với thiết kế hiện có, có tối ưu hóa SEO đầy đủ (tiêu đề, mô tả meta, thẻ OG, URL chính tắc, thẻ Twitter, dữ liệu có cấu trúc JSON LD), phản hồi tốt trên mọi thiết bị và cập nhật hệ thống điều hướng.
- Tải và cài đặt skill “SEO optimizer” cho Claude Code:
- Skill này sẽ giúp phân tích và tối ưu hóa SEO.
- Chạy phân tích SEO với Claude Code:
- Trong Claude Code, nhập lệnh
/SEO strategy. - Chọn tùy chọn “1” để phân tích toàn bộ trang hoặc bài viết.
- Cung cấp URL của website đã xuất bản trên Vercel.
- Claude Code sẽ thực hiện phân tích SEO toàn diện: tìm nạp trang chủ và các trang nội bộ, kiểm tra robots.txt và sitemap, phân tích từng trang, phân tích chéo trang, chấm điểm và tạo báo cáo HTML chi tiết.
- Báo cáo sẽ bao gồm tổng quan, phân tích từng trang, các vấn đề kỹ thuật và nội dung toàn trang, chiến lược liên kết nội bộ và một kế hoạch hành động cụ thể để cải thiện thứ hạng SEO.
Khung Làm Việc Kiếm Tiền (Money Framework)
Nếu bạn muốn biến kỹ năng này thành một mô hình kinh doanh, hãy tham khảo khung làm việc sau:
- M (Map – Lập bản đồ): Tìm kiếm các thị trường ngách ít cạnh tranh.
- O (Obtain – Thu thập): Tìm kiếm khách hàng tiềm năng và xây dựng kịch bản tiếp cận.
- N (Nail – Hoàn thiện): Xây dựng các website đẹp mắt, chuyên nghiệp.
- E (Execute – Thực thi): Cung cấp website cho khách hàng miễn phí (vì quá trình này có thể tự động hóa ở quy mô lớn).
- Y (Yield – Mang lại lợi nhuận): Bán các dịch vụ duy trì, nâng cấp và phát triển website để tạo doanh thu định kỳ.
Với các công cụ và quy trình này, bạn hoàn toàn có thể tạo ra những website chất lượng cao, tối ưu hóa và mang lại giá trị thực sự cho doanh nghiệp của mình hoặc khách hàng.
Có thể bạn sẽ thích
