Cách Sử Dụng Các Prompt Đã Tạo

Tổng Quan

SiteKit cung cấp hai prompt để sử dụng với Claude Code:

Giai đoạn 1 xây dựng cấu trúc dự án với nội dung tạm thời
Giai đoạn 2 áp dụng thiết kế thương hiệu và viết nội dung thực

Sử dụng theo thứ tự, mỗi lần một prompt. Đây là toàn bộ quy trình.

Giai Đoạn 1: Thiết Lập Dự Án

1. Tải Prompt Giai Đoạn 1

Trong SiteKit, vào tab Prompts của trang web và nhấn Download Stage 1 Prompt. Lưu tệp .md ở nơi dễ tìm.

2. Mở Dự Án

Di chuyển đến repo GitHub đã clone (xem Cách thiết lập GitHub):

cd your-project-folder

3. Khởi Động Claude Code

claude

4. Đưa Prompt Cho Claude

Bạn có thể dán toàn bộ prompt vào khung chat, hoặc tham chiếu tệp:

Read stage-1-scaffold-your-site.md and follow all the instructions in it to build this project.

5. Để Claude Xây Dựng Dự Án

Claude Code sẽ tạo toàn bộ dự án Jekyll — tệp cấu hình, layout, include, trang, và bất kỳ tính năng nào bạn đã chọn (biểu mẫu liên hệ, blog). Quá trình này mất khoảng 10-15 phút.

Mẹo: Đừng ngắt ngang Claude khi nó đang thực hiện prompt. Hãy để nó hoàn thành toàn bộ, rồi yêu cầu thay đổi sau.

6. Kiểm Tra Trên Máy

Sau khi Claude hoàn thành, cài đặt các gói phụ thuộc và khởi động máy chủ phát triển:

bundle install
bundle exec jekyll serve --livereload

Mở http://localhost:4000 trong trình duyệt. Bạn sẽ thấy trang web với:

Tất cả các trang hiển thị trong thanh điều hướng
Nội dung tạm thời trên mọi trang
Menu di động hoạt động
Màu sắc mặc định (màu thương hiệu thực sẽ có ở Giai đoạn 2)

7. Xác Minh

Kiểm tra những điều sau trước khi tiếp tục:

Tất cả các trang tải không có lỗi
Liên kết điều hướng hoạt động trên máy tính và di động
Biểu mẫu liên hệ xuất hiện (nếu bạn đã chọn) — nó chạy ở chế độ phát triển trên localhost
http://localhost:4000/robots.txt hiển thị tên miền thực, không phải https://landingpage.managertools.xyz

8. Đẩy Lên GitHub

git add .
git commit -m "Initial scaffold from SiteKit Stage 1"
git push origin main

9. Xác Minh Triển Khai

Vào bảng điều khiển Cloudflare Pages. Bạn sẽ thấy một bản triển khai mới đang được xây dựng. Sau khi hoàn thành, truy cập URL trang web để xác nhận nó đã hoạt động.

Giai Đoạn 2: Thiết Kế & Nội Dung

1. Chuẩn Bị Tài Nguyên Thương Hiệu

Trước khi chạy Giai đoạn 2, đặt tài nguyên thương hiệu vào dự án:

Logo → assets/images/logo.png
Ảnh → assets/images/ với tên tệp mô tả
Favicon → assets/images/favicon-source.png (tối thiểu 512x512)

Chưa có tài nguyên? Không sao — Giai đoạn 2 vẫn hoạt động. Nó sẽ thêm ghi chú trong mã cho biết vị trí đặt tài nguyên sau.

2. Tải Prompt Giai Đoạn 2

Quay lại SiteKit và tải prompt Giai đoạn 2 từ tab Prompts.

3. Chạy Lại Claude Code

Trong cùng thư mục dự án:

claude

Đưa prompt Giai đoạn 2 tương tự:

Read stage-2-design-content-your-site.md and follow all the instructions.

4. Để Claude Áp Dụng Thiết Kế

Claude Code sẽ:

Chọn màu thương hiệu dựa trên sở thích thiết kế của bạn
Cập nhật cấu hình Tailwind
Viết nội dung thực cho mọi trang
Tạo mô tả dịch vụ
Viết mô tả meta SEO
Thiết lập dữ liệu có cấu trúc (JSON-LD) với thông tin doanh nghiệp thực
Tích hợp tài nguyên thương hiệu (nếu có)

Quá trình này cũng mất khoảng 10-15 phút.

5. Xem Lại Thay Đổi

Khởi động lại máy chủ phát triển và xem lại:

bundle exec jekyll serve --livereload

Những điều cần kiểm tra:

Màu sắc phù hợp với thương hiệu
Nội dung nghe giống doanh nghiệp của bạn (không chung chung)
Số điện thoại và email chính xác
Giờ làm việc đúng
Tất cả các trang có nội dung riêng (không còn văn bản tạm thời)
Bố cục di động trông đẹp

6. Điều Chỉnh

Chưa hài lòng với điều gì đó? Nói với Claude:

The hero headline doesn't feel right. Can you make it more about [specific outcome]
and less formal? Our brand voice is casual and approachable.

Change the primary color to #2563eb (a brighter blue).

The About page needs more emphasis on our 15 years of experience.

Claude có thể chỉnh sửa bao nhiêu lần tùy bạn cần.

7. Đẩy Và Triển Khai

git add .
git commit -m "Apply brand design and content from SiteKit Stage 2"
git push origin main

Cloudflare Pages sẽ tự động triển khai trang web đã cập nhật.

Mẹo Hữu Ích

Bạn có thể tải lại prompt bất cứ lúc nào. Nếu bạn cập nhật thông tin doanh nghiệp hoặc câu trả lời thương hiệu trong SiteKit, hãy tải prompt mới. Các prompt mới sẽ phản ánh dữ liệu mới nhất của bạn.

Giai đoạn 2 có thể chạy lại được. Nếu bạn muốn làm lại thiết kế, bạn có thể chạy lại Giai đoạn 2 trên cùng khung sườn. Claude sẽ ghi đè thiết kế hiện tại bằng thiết kế mới.

Giữ dữ liệu SiteKit luôn cập nhật. Nếu giờ làm việc thay đổi, bạn thêm dịch vụ mới, hoặc số điện thoại đổi — hãy cập nhật trong SiteKit. Lần tải prompt tiếp theo sẽ có thông tin chính xác.

Bạn sở hữu mọi thứ. Trang web được tạo ra là của bạn — repo GitHub của bạn, hosting Cloudflare của bạn, mã nguồn của bạn. SiteKit chỉ giúp bạn bắt đầu.