Dùng Claude Code làm trang web giới thiệu cửa hàng trong 1 buổi, không cần biết code

🏪 Dùng Claude Code làm trang web giới thiệu cửa hàng trong 1 buổi, không cần biết code

Sau bài này bạn sẽ có một trang web giới thiệu cửa hàng chạy thật, có địa chỉ, sản phẩm, nút nhắn Zalo, và một đường link công khai gửi được cho khách, tất cả trong khoảng ba đến bốn tiếng của một buổi rảnh. Bạn không cần biết lập trình, chỉ cần một chiếc máy tính, tài khoản Claude Code, và vài tấm ảnh cửa hàng.

Đây là một ví dụ của vibe coding: bạn nói ra điều mình muốn bằng tiếng Việt bình thường, AI tự viết và chạy code thay bạn.

Chuẩn bị

• Claude Code: công cụ dòng lệnh của Anthropic, tải miễn phí nhưng cần tài khoản Claude Pro (khoảng 20 đô la một tháng) trở lên để dùng ổn định, không bị chờ mỗi khi hết hạn mức. Trang chính thức: claude.com/claude-code.
• Máy tính Windows, macOS hoặc Linux có kết nối internet.
• Một thư mục chứa: vài tấm ảnh thật của cửa hàng hoặc sản phẩm (jpg hoặc png), logo nếu có, và một ghi chú ngắn: tên cửa hàng, địa chỉ, số Zalo hoặc điện thoại, giờ mở cửa, ba đến năm sản phẩm hoặc dịch vụ chính kèm giá.
• (Tùy chọn, miễn phí) tài khoản Vercel, để trang web có đường link công khai ngay trong buổi làm, không cần thuê máy chủ riêng.

Làm từng bước

1. Cài Claude Code

Trên macOS hoặc Linux, mở Terminal và dán lệnh:

curl -fsSL https://claude.ai/install.sh | bash

Trên Windows, mở PowerShell và dán:

irm https://claude.ai/install.ps1 | iex

Gõ claude --version, thấy hiện số phiên bản nghĩa là cài xong. Nếu máy bạn chưa quen Terminal hay chưa rõ Claude Code mở ở đâu cho tiện, đọc thêm bài dùng Claude Code ở đâu để chọn đúng cách phù hợp với máy bạn.

2. Tạo thư mục dự án và mở Claude Code

Tạo một thư mục mới, ví dụ đặt tên [ten-cua-hang], rồi chép ảnh và file ghi chú thông tin cửa hàng vào đó. Mở Terminal ngay tại thư mục này, gõ lệnh:

claude

Lần đầu chạy, Claude Code sẽ yêu cầu đăng nhập tài khoản Claude, bạn làm theo hướng dẫn mở trên trình duyệt là xong, lần sau mở lại không cần đăng nhập nữa.

3. Mô tả cửa hàng và yêu cầu dựng trang

Gõ nguyên văn mẫu dưới đây (sửa lại phần trong ngoặc vuông cho đúng cửa hàng của bạn) rồi nhấn Enter:

Hãy tạo một trang web một trang (one-page) giới thiệu cửa hàng [Tên cửa hàng], chuyên bán [mặt hàng]. Địa chỉ: [Địa chỉ]. Zalo hoặc điện thoại: [Số điện thoại]. Giờ mở cửa: [Giờ mở cửa]. Dùng HTML, CSS và JavaScript thuần, không cần framework. Trang cần có: phần đầu trang với tên cửa hàng và một khẩu hiệu ngắn, phần giới thiệu hai đến ba câu, phần danh sách [số lượng] sản phẩm hoặc dịch vụ kèm ảnh và giá, phần địa chỉ có thể nhúng bản đồ, một nút bấm nổi bật ghi "Nhắn Zalo ngay" dẫn tới số của tôi, màu chủ đạo là [màu sắc], và hiển thị đẹp trên cả điện thoại.

Claude Code sẽ tự đọc ảnh trong thư mục, tạo các file cần thiết (thường có index.html, một file CSS, và có thể vài ảnh được sắp xếp lại), và báo cho bạn biết nó vừa làm gì.

4. Xem thử ngay trên máy

Gõ tiếp:

Mở trang web vừa tạo trên trình duyệt để tôi xem thử

Claude Code sẽ chạy một máy chủ nhỏ ngay trên máy bạn và đưa ra một đường link để mở bằng trình duyệt, bạn thấy ngay trang web trông như thế nào.

5. Sửa theo ý mình bằng câu nói thường

Chỗ nào chưa ưng, cứ mô tả lại bằng lời, ví dụ:

Đổi màu nút liên hệ sang màu cam, chữ tiêu đề to hơn, và thêm một phần "Khách hàng nói gì" với ba đánh giá mẫu

Lặp lại bước này vài lần cho tới khi trang web giống với cửa hàng thật của bạn.

6. Đưa trang web lên mạng

Nếu đã có tài khoản Vercel miễn phí, gõ:

Giúp tôi đưa trang web này lên Vercel để có một đường link công khai

Claude Code sẽ hướng dẫn hoặc tự chạy các lệnh cần thiết. Sau vài phút bạn có một link dạng [ten-cua-hang].vercel.app, gửi ngay được cho khách qua Zalo hay Facebook. Muốn một địa chỉ riêng kiểu tencuahang.com thì mua tên miền rồi trỏ về sau, phần này bài domain và VPS là gì giải thích rõ hai khái niệm này.

Kết quả mẫu

Một cửa hàng cà phê rang xay tên "Cà Phê Nắng" sau một buổi làm cùng Claude Code có: trang chủ với ảnh quán thật, dòng chữ "Cà phê sạch, rang mỗi ngày", danh sách năm loại cà phê kèm giá, nút "Nhắn Zalo đặt hàng" màu cam nổi bật, phần địa chỉ có bản đồ, và một đường link vercel.app gửi được ngay cho khách trong ngày hôm đó.

Mẹo để kết quả tốt hơn

• Đưa ảnh thật của cửa hàng vào thư mục trước khi bắt đầu, Claude Code sẽ dùng ảnh có sẵn thay vì chèn ảnh minh họa chung chung không liên quan.
• Mô tả phong cách bằng ví dụ cụ thể thay vì tính từ mơ hồ: thay vì nói "đẹp, sang trọng", hãy nói "giống phong cách quán cà phê tối giản, nền trắng, chữ đen, một màu nhấn duy nhất".
• Muốn hiểu sơ qua Claude Code vừa làm gì, cứ hỏi thẳng "giải thích ngắn gọn các file vừa tạo", nhưng không bắt buộc phải hiểu code mới dùng được trang web.

Giới hạn cần biết

• Đây là trang giới thiệu đơn giản, không phải website bán hàng có giỏ hàng, thanh toán hay quản lý kho, việc đó là một dự án lớn hơn nhiều.
• Luôn tự kiểm tra lại mọi thông tin trang web hiển thị: địa chỉ, số điện thoại, giá cả, vì AI có thể gõ nhầm một con số mà bạn không để ý.
• Ảnh hay logo có bản quyền của người khác thì không nên để AI tự lấy trên mạng, chỉ dùng ảnh bạn sở hữu hoặc ảnh được phép dùng miễn phí.
• Gói Claude Pro có giới hạn số lượng yêu cầu trong mỗi khung giờ năm tiếng, nếu sửa đi sửa lại quá nhiều trong thời gian ngắn có thể phải chờ.

Câu hỏi thường gặp

Không biết lập trình có làm được không? Có. Mọi ví dụ ở trên chỉ cần gõ câu tiếng Việt bình thường, Claude Code tự viết và chạy code thay bạn.

Có bắt buộc phải trả tiền không? Claude Code cần tài khoản Claude Pro trở lên, khoảng 20 đô la một tháng, để dùng ổn định, hiện chưa có gói miễn phí riêng cho Claude Code.

Trang web có lên được Google tìm kiếm không? Có, nhưng cần thêm thời gian để Google nhận ra trang mới, và nên viết thêm nội dung sau khi trang đã chạy ổn, đây là bước làm sau chứ không phải việc của buổi đầu tiên.

Chưa quen dùng Terminal thì sao? Đọc trước bài Claude Code là gì để hiểu công cụ này từ đầu rồi quay lại làm theo các bước trên.

Có cần mua tên miền riêng ngay không? Không bắt buộc. Link vercel.app miễn phí dùng tạm rất tốt cho buổi đầu, mua tên miền riêng khi cửa hàng đã hoạt động ổn định.

#ClaudeCode #VibeCoding #AIChoChuShop #TrangWebCuaHang #AIChoDoanhNghiepNho