VN

Cách Sử Dụng Claude Code 2.0 Để Làm Cho Website Tốt Hơn 10 Lần

#Công cụ AI
2026-11-03 11:4216 Đọc trong giây phút

Giới thiệu nội dung
Đặt câu hỏi

Video trình diễn cách sử dụng Claude Code 2 với Higgsfield để xây dựng các trang web giàu tính trực quan và tương tác. Nó giới thiệu hai dự án ví dụ—một trang web theo chủ đề Công thức 1 và một trang khởi chạy theo chủ đề bóng đá—được tạo ra thông qua các prompt chi tiết, việc tạo ảnh/video và các cuộc trò chuyện phụ theo mô-đun. Phần hướng dẫn nhấn mạnh việc sử dụng ảnh chụp màn hình, các điểm kiểm tra và những chỉnh sửa lặp lại để tinh chỉnh bố cục, hiệu ứng hoạt ảnh và hiệu năng, đồng thời giải thích cách cấu trúc các prompt hiệu quả với câu chuyện rõ ràng, các phần cụ thể, phong cách chính xác và hướng dẫn về những điều cần tránh. Cuối cùng, video đưa các trang web lên Vercel và khuyến khích người xem sử dụng các công cụ và prompt để tạo ra những dự án của riêng mình.

Thông tin quan trọng

  • Claude Code 2 có giao diện được thiết kế lại và được giới thiệu là dễ sử dụng hơn nhiều để xây dựng trang web và các dự án tương tác.
  • Claude có thể viết mã và xử lý hoạt ảnh, nhưng đối với hình ảnh chân thực như ảnh chụp và video điện ảnh, nó được ghép với Higgsfield thông qua một trình kết nối MCP.
  • Quá trình thiết lập bao gồm việc thêm Higgsfield như một trình kết nối tùy chỉnh trong Claude Code 2 để công cụ có thể truy cập các mô hình như trình tạo video, hình ảnh và giọng nói.
  • Claude Code 2 sử dụng các phiên lồng nhau, cho phép một phiên tạo hiệu ứng hình ảnh trong khi phiên khác xây dựng trang web, với các nhiệm vụ được theo dõi trong một danh sách việc cần làm.
  • Các phiên có thể giao tiếp với nhau, và chế độ xem chia đôi đặt cạnh nhau giúp theo dõi nhiều tác vụ cùng lúc mà không làm lộn xộn cuộc trò chuyện chính.
  • Dự án demo đầu tiên là một trang web hư cấu theo chủ đề F1 dành cho Theo Varga, có hiệu ứng hé lộ mũ bảo hiểm, dòng thời gian cuộc đua và phần kết thúc với cúp/động tác chộp lấy.
  • Người tạo sử dụng ảnh chụp màn hình và các câu lệnh để tinh chỉnh vị trí, hoạt ảnh và hình ảnh, cho thấy phản hồi lặp lại giúp cải thiện kết quả cuối cùng.
  • Các điểm kiểm tra cho phép người dùng quay lại các thời điểm trước đó bằng cách nhấn phím Escape hai lần, giúp việc thử nghiệm an toàn và dễ dàng hơn.
  • Dự án demo thứ hai là một trang giới thiệu bóng đá hư cấu có tên Strike One, với một quả bóng 3D biến hình, các cú sút kích hoạt theo thao tác cuộn trang, và một trò chơi mini đá phạt đền.
  • Higgsfield cung cấp các tài sản hình ảnh và hiệu ứng, trong khi Claude xử lý phần mã; người sáng tạo nhấn mạnh rằng việc kết hợp cả hai tạo ra những kết quả ấn tượng.
  • Một cuộc trò chuyện phụ được sử dụng để tối ưu hóa hiệu suất bằng cách nén phương tiện và tải lười các phần tử, điều này cải thiện tốc độ trang mà không làm thay đổi giao diện.
  • Người nói chia sẻ một công thức prompt: xác định câu chuyện thương hiệu, mô tả hành trình của người dùng, chỉ rõ công cụ nào xử lý từng phần, liệt kê chính xác các màu sắc và phông chữ, và nêu chi tiết hoạt ảnh của từng phần.
  • Video khuyên nên tránh các mẫu thiết kế trông “rất AI” mang tính chung chung, chẳng hạn như chữ có hiệu ứng chuyển màu, các font bị lạm dụng quá mức, những bức tường chữ nhỏ dày đặc, và các cụm từ tiếp thị sáo rỗng.
  • Kết luận chính là các lời nhắc một lần hoạt động tốt nhất khi ý tưởng đã rõ ràng, nhưng việc đưa ra lời nhắc theo từng phần sẽ cho bạn nhiều khả năng kiểm soát hơn khi khái niệm vẫn đang phát triển.
  • Video kết thúc bằng lời kêu gọi hành động sử dụng Higgsfield, sao chép các prompt từ cộng đồng School miễn phí, và đăng ký để xem thêm nội dung.

Phân tích dòng thời gian

Từ khóa nội dung

Claude Code 2

Claude Code 2 được giới thiệu như một công cụ được thiết kế lại hoàn toàn với giao diện mới, quy trình trò chuyện được cải thiện, các phiên lồng nhau, theo dõi việc cần làm, các điểm kiểm tra và các cuộc trò chuyện bên lề.Video cho thấy cách nó có thể được sử dụng để xây dựng và tinh chỉnh các trang web tương tác hiệu quả hơn.

Higgsfield

Higgsfield được giới thiệu là công cụ truyền thông hình ảnh được kết nối với Claude Code 2. Nó cung cấp quyền truy cập vào các mô hình AI cho hình ảnh, video, 3D và giọng nói, và được dùng để tạo ra các hiệu ứng mà riêng Claude không thể tạo ra.

Tạo trang web tương tác

Video này minh họa việc xây dựng hai trang web tương tác thông qua phát triển dựa trên prompt: một trang web theo chủ đề F1 dành cho Theo Varga và một trang khởi chạy bóng đá có tên Strike One. Quy trình làm việc kết hợp các prompt thiết kế, hoạt ảnh, hiệu ứng hình ảnh và triển khai.

Các phiên lồng nhau và các cuộc trò chuyện bên lề

Một điểm nổi bật lớn là khả năng của Claude Code 2 trong việc chạy đồng thời nhiều phiên làm việc tập trung. Một phiên xử lý việc tạo nội dung trực quan trong khi một phiên khác xây dựng trang web, và các cuộc trò chuyện phụ cho phép người dùng nhận phản hồi hoặc gợi ý mà không làm gián đoạn tác vụ chính.

Chỉnh sửa điểm kiểm tra

Claude Code 2 hỗ trợ các điểm kiểm tra cho phép người dùng hoàn tác thay đổi bằng các lệnh thoát nếu có sự cố xảy ra. Điều này giúp việc thử nghiệm an toàn và dễ dàng hơn khi tinh chỉnh các trang web và hoạt ảnh.

Trải nghiệm hoạt hình F1

Dự án đầu tiên là một trang tương tác theo chủ đề F1, với mũ bảo hiểm, hiệu ứng hình ảnh kích hoạt theo con trỏ, các hoạt ảnh đua khi cuộn, một chiếc mũ bảo hiểm 3D, trình tự chiếc cúp, và các chi tiết kiểu dữ liệu telemetry. Người thuyết trình tinh chỉnh vị trí và thời gian để cải thiện kết quả cuối cùng.

Trang khởi động bóng đá

Dự án thứ hai là một trang web bóng đá bao gồm một quả bóng 3D, nhiều trạng thái biến đổi, các hoạt ảnh sút bóng khi cuộn trang, và một mini-game sút luân lưu. Người thuyết trình cũng tối ưu hóa hiệu năng bằng cách nén phương tiện và tải chậm các phần tử.

Kỹ thuật tạo lời nhắc cho thiết kế web

Video nhấn mạnh một công thức cho các prompt một lần hiệu quả: xác định câu chuyện thương hiệu, hành trình người dùng, vai trò của công cụ, màu sắc và phông chữ chính xác, thứ tự các phần, và các hiệu ứng động chi tiết. Video cũng khuyến nghị tránh các mẫu trông giống AI một cách chung chung như chữ có gradient và phần nội dung quá dài.

Triển khai Vercel

Sau khi xây dựng trang web bóng đá, người nói triển khai nó trên Vercel và làm cho nó có thể truy cập công khai. Quá trình này được mô tả là đơn giản: mở rộng dự án, kết nối triển khai và nhấp gửi.

Các câu hỏi và trả lời liên quan

Claude Code 2 là gì?

Claude Code 2 được giới thiệu là một công cụ được thiết kế lại với giao diện mới trong chat, các tính năng quy trình làm việc được cải thiện và hỗ trợ xây dựng website dễ dàng hơn.

Claude Code 2 có thể làm tốt những gì?

Nó có thể viết mã, tạo hoạt ảnh bằng mã, và giúp xây dựng các trang web tương tác cùng trải nghiệm web.

Bạn có thể cung cấp bài viết cần dịch không? Hiện tại bạn chỉ hỏi: “What are Claude Code 2's limitations?” nên mình chưa có nội dung bài để dịch sang tiếng Việt.

Nó không thể tự tạo ra hình ảnh siêu thực hay video điện ảnh.

“Higgsfield” được dùng để làm gì trong quy trình làm việc?

Higgsfield được sử dụng để cung cấp cho Claude quyền truy cập vào các công cụ tạo ảnh, video, 3D và giọng nói thông qua một bộ kết nối.

Làm thế nào để kết nối Higgsfield với Claude Code 2?

Bạn lấy liên kết MCP, vào Customize, rồi Connectors, thêm một connector tùy chỉnh, dán liên kết vào, đăng nhập, cho phép truy cập, và nó sẽ xuất hiện trong Claude Code 2.

Bạn hỏi: **“What new interface features are shown in Claude Code 2?”** Dịch sang tiếng Việt là:**“Những tính năng giao diện mới nào được hiển thị trong Claude Code 2?”**

Giao diện bao gồm một thẻ kết nối cho Higgsfield và các thẻ mới cho ngữ cảnh, môi trường và đầu ra.

Dự án ví dụ đầu tiên được xây dựng trong video là gì?

Dự án đầu tiên là một trang web dành cho Theo Varga, một nhà vô địch F1 hư cấu.

Người dùng đã yêu cầu những yếu tố nào cho trang web Theo Varga?

Yêu cầu bao gồm một chiếc mũ bảo hiểm bốc cháy dưới con trỏ, một đường đua tự xây dựng, và một màn kết thúc nơi người dùng có thể giành lấy một chiếc cúp và cạnh tranh vì nó.

Các hoạt ảnh trong dự án đầu tiên được điều khiển như thế nào?

Hiệu ứng mũ bảo hiểm xuất hiện dưới con trỏ, và việc cuộn làm cho video cuộc đua phát và tua ngược.

Lợi ích của các phiên lồng nhau trong Claude Code 2 là gì?

Các phiên lồng nhau cho phép những phần khác nhau của dự án làm việc riêng biệt, chẳng hạn như một phiên tạo hiệu ứng hình ảnh và một phiên khác xây dựng trang web.

Các phiên làm việc giao tiếp với nhau như thế nào trong Claude Code 2?

Khi phiên trực quan hoàn tất một hình ảnh, nó sẽ gửi một thông điệp đến phiên trang web, rồi phiên này sẽ thêm hình ảnh đó vào trạng thái của nó.

“Checkpoint” trong Claude Code 2 là một **mốc lưu trạng thái** của phiên làm việc, cho phép bạn **quay lại** hoặc **phục hồi** mã/trao đổi về một thời điểm trước đó nếu cần.Nói đơn giản:- Nó giống như **save point** trong một trò chơi.- Khi bạn đang chỉnh sửa code bằng Claude Code 2, checkpoint giúp bạn: - lưu lại trạng thái hiện tại, - thử thay đổi mới, - nếu kết quả không ổn thì quay về checkpoint trước đó.Thường checkpoint hữu ích khi:- bạn muốn thử một hướng sửa khác,- Claude tạo ra thay đổi lớn và bạn muốn an toàn,- bạn cần so sánh nhiều phiên bản.Nếu bạn muốn, mình có thể giải thích thêm **cách checkpoint hoạt động trong Claude Code 2** hoặc **so sánh checkpoint với git commit**.

Một điểm kiểm tra cho phép bạn quay lại một điểm trước đó trong mã hoặc cuộc trò chuyện của mình nếu có sự cố xảy ra.

Trang web thứ hai nào đã được tạo trong video?

Dự án thứ hai là một trang giới thiệu bóng đá hư cấu có tên Strike One.

Bạn vui lòng gửi bài viết hoặc đoạn văn cần dịch. Hiện tại mình chỉ thấy câu hỏi: **“What features were requested for the Strike One website?”** — nếu bạn muốn mình **trả lời câu hỏi này** hoặc **dịch một bài viết liên quan**, hãy gửi thêm nội dung nhé.

Yêu cầu bao gồm một quả bóng 3D có thể biến đổi thành bốn loại, một cú sút bay vào khung thành trong khi cuộn màn hình, và một mini-game sút luân lưu.

Trang bóng đá đã được cải thiện như thế nào sau khi nhận phản hồi?

Trang web đã được tối ưu hóa bằng cách nén video và hình ảnh, đồng thời chỉ tải các thành phần khi người dùng cuộn đến chúng.

Một “side chat” trong Claude Code 2 là một cuộc trò chuyện phụ, tách riêng khỏi luồng trao đổi chính.Nó thường được dùng để:- hỏi thêm thông tin mà không làm rối cuộc trò chuyện chính,- thử ý tưởng hoặc kiểm tra lệnh,- giữ cho ngữ cảnh chính gọn gàng hơn.Nếu bạn muốn, tôi có thể giải thích thêm sự khác nhau giữa side chat và chat chính trong Claude Code 2.

Một cuộc trò chuyện phụ cho phép bạn yêu cầu phản hồi hoặc gợi ý mà không làm gián đoạn cuộc trò chuyện chính hoặc quy trình làm việc.

Cuộc trò chuyện bên có thể cung cấp những gợi ý gì?

Nó có thể chỉ ra các hoạt ảnh không cần thiết hoặc chậm và đề xuất cải thiện.

Công thức được khuyến nghị để viết một prompt “một lần” thật tốt là:**Vai trò + nhiệm vụ + ngữ cảnh + ràng buộc + định dạng đầu ra**Cụ thể:- **Vai trò**: bạn muốn AI đóng vai ai- **Nhiệm vụ**: bạn muốn AI làm gì- **Ngữ cảnh**: thông tin nền cần thiết- **Ràng buộc**: các giới hạn, yêu cầu, điều không được làm- **Định dạng đầu ra**: kết quả cần được trình bày như thế nàoVí dụ:> Bạn là một chuyên gia marketing. Hãy viết 5 tiêu đề quảng cáo cho sản phẩm này, dựa trên đối tượng khách hàng là nữ 25–35 tuổi, giọng văn thân thiện, mỗi tiêu đề không quá 10 từ, và trình bày dưới dạng danh sách gạch đầu dòng.Nếu bạn muốn, tôi có thể giúp bạn tạo một **mẫu prompt một lần** thật hiệu quả để dùng ngay.

Bắt đầu bằng một câu chuyện, giải thích thương hiệu và hành trình người dùng, nêu rõ công cụ nào làm gì, cung cấp chính xác màu sắc và phông chữ, liệt kê từng phần theo thứ tự, và xác định các hiệu ứng hoạt ảnh.

Tại sao bạn nên mô tả những điều không nên làm trong một prompt?

Nói cho Claude biết những gì cần tránh sẽ giúp ngăn chặn các lựa chọn thiết kế chung chung hoặc trông như do AI tạo ra, chẳng hạn như chữ có hiệu ứng chuyển sắc, những bức tường văn bản khó đọc, hoặc các cụm từ được dùng quá thường xuyên.

Khi nào thì tốt hơn để xây dựng một trang web theo từng phần thay vì chỉ bằng một lời nhắc?

Thà xây dựng theo từng phần khi ý tưởng vẫn đang hình thành hoặc khi bạn muốn kiểm soát nhiều hơn và có thể xem xét từng phần trước khi chuyển sang phần tiếp theo.

Thêm gợi ý video

Chia sẻ đến: