MớiClaudeMức độ: Nâng cao

Prompt thiết kế website bằng Claude

Bản mô tả yêu cầu để AI tạo website tĩnh nhiều trang, có hệ màu, cấu trúc trang và quy tắc nội dung rõ ràng.

Khi nào nên dùng Prompt này

Người muốn tự dựng một website giới thiệu hoặc trang cá nhân mà không biết lập trình.

Nội dung Prompt

Sao chép toàn bộ khối bên dưới, sau đó thay các biến trong ngoặc vuông bằng thông tin của bạn.

Prompt · Claude
Bạn là nhà thiết kế và lập trình viên front-end. Hãy tạo website tĩnh nhiều trang cho: [CHỦ ĐỀ]

1. Thông tin thương hiệu
- Tên hiển thị: [CHỦ ĐỀ]
- Người dùng mục tiêu: [ĐỐI TƯỢNG]
- Mục tiêu website: [MỤC TIÊU]
- Cảm giác thiết kế: [GIỌNG VĂN]

2. Công nghệ
- Chỉ dùng HTML5, CSS3 và JavaScript thuần.
- CSS dùng chung trong một file, JavaScript trong một file riêng.
- Không cần npm, không cần bước build.
- Upload trực tiếp lên hosting là chạy được.

3. Các trang cần tạo
[NỀN TẢNG]

4. Quy tắc thiết kế
- Định nghĩa biến CSS cho màu, bán kính, khoảng cách trước khi viết component.
- Nội dung quan trọng nằm sẵn trong HTML để phục vụ SEO.
- Mỗi trang có một thẻ H1, title và meta description riêng.
- Kiểm tra hiển thị ở 360px, 768px và 1440px, không để tràn ngang.
- Có trạng thái focus rõ ràng và dùng được bằng bàn phím.

5. Quy tắc nội dung
- Không dùng Lorem Ipsum. Viết nội dung mẫu bằng tiếng Việt.
- Không bịa số liệu, đánh giá hay thành tích. Chỗ chưa có dữ liệu thì để placeholder rõ ràng.

Hãy tạo trực tiếp từng file, đi theo thứ tự trên và báo lại danh sách file khi hoàn thành.

Các biến cần thay

  • [CHỦ ĐỀ]Nội dung, sản phẩm hoặc tài liệu bạn muốn AI xử lý.
  • [ĐỐI TƯỢNG]Người sẽ đọc, xem hoặc nhận kết quả.
  • [MỤC TIÊU]Kết quả bạn muốn đạt được sau khi dùng Prompt.
  • [GIỌNG VĂN]Cách diễn đạt: thân thiện, trang trọng, ngắn gọn…
  • [NỀN TẢNG]Nơi nội dung sẽ xuất hiện hoặc công cụ bạn dùng.

Hướng dẫn sử dụng

  1. Ở mục 3, liệt kê từng trang kèm các khối nội dung bạn muốn có.
  2. Yêu cầu AI làm xong hệ màu và header trước, rồi mới sang các trang còn lại.
  3. Nếu kết quả quá dài, hãy bảo AI tiếp tục theo đúng thứ tự thay vì viết lại từ đầu.

Ví dụ đầu vào

Bạn điền

[CHỦ ĐỀ] = website giới thiệu quán cà phê · [ĐỐI TƯỢNG] = khách quanh khu vực · [MỤC TIÊU] = xem menu và tìm đường · [NỀN TẢNG] = Trang chủ, Menu, Về quán, Liên hệ

Ví dụ kết quả

AI trả về

AI trả về hệ biến CSS, một file style dùng chung và bốn trang HTML có header, footer giống nhau, kèm ghi chú những chỗ cần thay ảnh và địa chỉ.

Lưu ý khi dùng

Càng mô tả rõ từng trang và từng khối nội dung, kết quả càng ít phải sửa. Hãy xem lại nội dung trước khi đưa lên hosting.

Prompt liên quan

CHChatGPT

Prompt viết nội dung landing page

Viết cấu trúc và nội dung cho một trang giới thiệu sản phẩm, từ tiêu đề chính đến phần câu hỏi thường gặp.

CLClaude

Prompt phân tích khách hàng mục tiêu

Dựng chân dung khách hàng dựa trên dữ liệu bạn cung cấp, kèm nhu cầu, lo lắng và cách họ ra quyết định.

CLClaude

Prompt tóm tắt tài liệu

Tóm tắt tài liệu dài theo ba mức độ chi tiết và tách riêng phần cần bạn tự kiểm tra lại.

Video liên quan

Video hướng dẫn trên kênh YouTube Kolbot.

Nhập môn AIMiễn phí

Bắt đầu dùng AI: ba việc nên thử trong ngày đầu tiên

Ngày đăng: Chưa xuất bản
PromptMiễn phí

Cấu trúc Prompt: bốn phần giúp câu trả lời rõ hơn

Ngày đăng: Chưa xuất bản
PromptMiễn phí

Viết bài đăng bằng AI mà vẫn giữ giọng văn của bạn

Ngày đăng: Chưa xuất bản

Muốn thêm Prompt chuyên sâu?

Một số Prompt nhiều bước được dành cho Hội viên Kolbot trên YouTube hoặc Facebook.