Làm thế nào để sử dụng Claude Code tạo ra trang web và hiệu ứng hoạt hình trị giá 10.000 đô la

Từ cài đặt kỹ năng thiết kế, tìm kiếm tài liệu tham khảo, viết prompt xây dựng, đến thực hiện hiệu ứng con trỏ đèn sân khấu, kiểm tra sửa lỗi từng vòng, rồi trau chuốt tinh chỉnh, hướng dẫn toàn diện này giúp bạn không cần nền tảng lập trình cũng có thể làm được. Bài viết này được tổng hợp và dịch từ bài viết của monokern trên X.
(Tin nhanh: Claude Code ra mắt lệnh /goals mới: tách biệt thực thi và đánh giá, tránh AI Agent lười biếng nói dối)
(Bổ sung bối cảnh: Thực chiến: Hướng dẫn từng bước dùng 7 Agent nâng cấp Vibe Coding thành quy trình phát triển chuyên gia)

Mục lục

Toggle

• Bước 1: Cài đặt kỹ năng thiết kế
• Bước 2: Tìm kiếm tài liệu tham khảo
• Bước 3: Viết prompt xây dựng
• Bước 4: Hiệu ứng khối hero
• Bước 5: Kiểm tra và sửa lỗi
• Bước 6: Trau chuốt tinh chỉnh
• Kết quả

Đại lý thu phí 5.000 USD mới tạo được một trang web portfolio trông tinh xảo như vậy.

Tôi đã hoàn thành trang của mình trong 2 giờ. Đây là toàn bộ quy trình.

Đây là bản ghi chép thực tế, không phải hướng dẫn mẫu chung chung.

Tôi dùng portfolio của chính mình làm ví dụ: tài liệu tham khảo tôi thực sự dùng, prompt tôi thực sự gửi, lỗi tôi thực sự gặp và sửa.

Không yêu cầu bất kỳ kinh nghiệm lập trình nào.

Bước 1: Cài đặt kỹ năng thiết kế

Theo mặc định, đầu ra thiết kế của Claude rất tầm thường. Cùng một font chữ, cùng một kiểu sắp chữ, cùng một phong cách phẳng. Hai kỹ năng có thể giải quyết vấn đề này.

• Frontend Design — do Anthropic phát triển, chạy ngầm, chặn các font bị lạm dụng như Inter, thúc đẩy kiểu sắp chữ táo bạo hơn, nâng cao chất lượng văn bản.

Dán đoạn này vào Claude Code:

Install this skill: github.com/anthropics/skills/tree/main/frontend-design

Khi có nhắc, cho phép thay đổi, cài đặt toàn cục.

• UI/UX Pro Max — 57 phong cách giao diện, 95 bảng màu, 56 kết hợp font, bạn có thể gọi trực tiếp khi xây dựng.

Dán đoạn này vào Claude Code:

Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Chuyển bộ chọn chế độ sang Chế độ Tự động, để Claude không hỏi bạn có cho phép ở mỗi bước.

Bước 2: Tìm kiếm tài liệu tham khảo

Đừng mô tả trang web lý tưởng của bạn một cách mơ hồ, hãy để Claude thấy những gì bạn muốn.

Portfolio của tôi sử dụng "Il Capo Production" trên Awwwards làm tham khảo chính.

awwwards.com/sites/il-capo-production

Phong cách tối, điện ảnh đó chính xác là những gì tôi muốn.

Đây là cách tôi thực sự sử dụng:

Tôi không chụp toàn bộ trang và nói "làm cho tôi cái này", mà tôi chụp từng khối những phần tôi thích:

• 1.png — Khối hero
• 2.png — Khối bên dưới hero (tác phẩm được hiển thị dạng video + tiêu đề/mô tả)
• 6.png — Chân trang và cuối trang
• 11.png — Trang dự án đơn lẻ
• 12.png — Màn hình tải

Còn đối với trang portfolio (trang liệt kê tất cả tác phẩm), trang tham khảo không có bố cục phù hợp. Tôi lên Pinterest tìm một bố cục khác có phong cách tương tự và chụp riêng, đặt tên là 11.png.

Đừng cố sao chép hoàn toàn một trang web nào đó, hãy học hỏi những phần tốt từ mỗi trang.

Đặt tất cả tài liệu vào thư mục /reference trong dự án.

Bước 3: Viết prompt xây dựng

Ở đầu prompt, sử dụng /ui-ux-pro-max để kích hoạt kỹ năng thiết kế.

Đây là prompt chính xác tôi đã dùng cho portfolio:

Prompt để sao chép:

/ui-ux-pro-max
Xây dựng một trang web portfolio cao cấp cho một lập trình viên frontend. Nó phải trông đắt tiền, hiện đại và ấn tượng về mặt kỹ thuật,
với các hiệu ứng động thanh lịch tải mượt mà trên mọi thiết bị.
Sử dụng các tài liệu tham khảo trong thư mục reference: 1.png là khối hero, 2.png là khối bên dưới hero
(hiển thị tác phẩm dạng video + tiêu đề/mô tả), 6.png là chân trang/cuối trang, 7.png là trang portfolio liệt kê tất cả tác phẩm,
11.png là mẫu trang dự án đơn lẻ khi nhấp vào bất kỳ tác phẩm nào từ portfolio, 12.png là màn hình tải.
Ở giữa khối hero, sử dụng me.png để đặt ảnh của tôi.
Tất cả ảnh giữ chỗ cho tác phẩm/dự án sử dụng example.png.

Trước khi bắt đầu xây dựng, hãy hỏi tôi bất kỳ câu hỏi nào cần làm rõ.

Dòng cuối cùng là chìa khóa
Claude sẽ dừng lại và hỏi 4-6 câu hỏi về phong cách, font chữ, bố cục, mức độ hiệu ứng động, giọng văn nội dung, câu trả lời của bạn sẽ là nền tảng cho toàn bộ trang web.

Trả lời cụ thể, càng chính xác ở đây, càng ít phải qua lại sau này.

Sau khi bạn trả lời, Claude mất khoảng 5 phút lập kế hoạch, sau đó mất khoảng 10 phút xây dựng, đầu ra lần đầu đã khá vững chắc.

Bước 4: Hiệu ứng khối hero

Đặt một bức ảnh thường vào giữa khối hero tối là nhàm chán
Khi người dùng di chuyển chuột, phải có điều gì đó xảy ra.

Tôi đã nghĩ ra ý tưởng đèn sân khấu cho portfolio của mình:

• Toàn bộ khối có màu tối
• Ảnh của tôi mặc định gần như không nhìn thấy
• Con trỏ hoạt động như đèn pin—"chiếu sáng" tôi
• Lớp thứ hai chỉ là phiên bản sáng hơn, ấm hơn của cùng một bức ảnh

Tôi mô tả ý tưởng này cho Claude và yêu cầu nó phát triển hiệu ứng:

"Trong khối hero, tôi muốn hiệu ứng con trỏ đèn pin/đèn sân khấu. Nền tối. Ảnh của tôi mặc định gần như không nhìn thấy. Khi con trỏ di chuyển trên khối, nó hoạt động như đèn sân khấu—thông qua mặt nạ hình tròn mềm mại theo con trỏ, tiết lộ phiên bản sáng hơn, ấm hơn của ảnh bên dưới. Bán kính 100-150px, viền mờ mềm mại. Hãy thực hiện hiệu ứng này."

Claude đã làm ra ngay lần đầu. Hiệu ứng hoàn toàn như mô tả—người dùng di chuyển chuột, ảnh sáng lên ở nơi họ trỏ đến.

Bước 5: Kiểm tra và sửa lỗi

Trước khi thực hiện kiểm tra chất lượng chính thức, hãy tự mình cuộn duyệt trang web, ghi lại tất cả những điểm cảm thấy không ổn.

Danh sách của tôi sau lần xây dựng đầu tiên:

• Chuyển tiếp giữa các route trang cảm giác đột ngột—cần hiệu ứng mờ dần mượt mà
• Hiệu ứng đèn sân khấu có độ trễ rõ rệt, không theo kịp con trỏ
• Một số phần tử tràn ra khỏi màn hình, không thích ứng được
• Font chữ không khớp với trang tham khảo—trông chung chung hơn so với thẩm mỹ Il Capo

Ghi lại tất cả vấn đề, sau đó gửi một lần duy nhất:

"Đây là một số vấn đề cần sửa, vui lòng xử lý tất cả:\

2. [Mô tả vấn đề 1]\
3. [Mô tả vấn đề 2]\
4. [Mô tả vấn đề 3]"

Việc gửi tất cả vấn đề một lần là rất quan trọng.

Bước 6: Trau chuốt tinh chỉnh

Sau khi sửa các lỗi rõ ràng, thực hiện kiểm tra chất lượng có cấu trúc. Dán đoạn này vào Claude:

"Vui lòng xem xét trang web theo các tiêu chí sau, thành thật chỉ ra những điểm cần cải thiện:
— Kiểu chữ (chúng ta có đang sử dụng các font AI bị lạm dụng như Inter không?)
— Màu sắc (bảng màu có tiết chế hay lộn xộn?)
— Phân cấp (kích thước chữ có hướng dẫn mắt đúng cách không?)
— Hiệu ứng động (mượt mà và có chủ đích, hay giật cục và ngẫu nhiên?)
— Phiên bản di động (thực sự được thiết kế cho điện thoại, hay chỉ là bản thu nhỏ của desktop?)
— Văn bản (tiết chế và cụ thể, hay là nội dung AI chung chung?)"

Claude sẽ chấm điểm từng tiêu chí. Đọc xong, đồng ý hoặc không đồng ý với từng điểm, sau đó tập hợp các vấn đề bạn muốn sửa thành một prompt và gửi một lần.

Đừng sửa những điểm bạn không đồng ý. Bạn hiểu trang web của mình hơn nó.

Kết quả

Cuối cùng bạn sẽ có một trang web vững chắc. Không hoàn hảo—nhưng đủ tốt.

Một số thứ sẽ không hoàn toàn đúng trong lần xây dựng đầu tiên, có thể phiên bản di động cần làm lại, hoặc một hiệu ứng động nào đó hơi lệch, điều này là bình thường.

Từ đây hãy lặp lại. Mỗi ngày tìm một điều để cải thiện và sửa nó.