Khám phá và tái tạo 282 video AI Claude Opus 5.5 cùng prompt gốc

Awesome Opus 5.5 Videos là gì?

Awesome Opus 5.5 Videos là bộ sưu tập tuyển chọn các video lan truyền được tạo bằng Claude Opus 5.5. Mỗi dự án được thực hiện bằng cách yêu cầu Claude viết phần hoạt ảnh dưới dạng mã, sử dụng các công nghệ như HTML, Canvas, SVG, Three.js, GSAP, GLSL, WebGL, Web Audio và hệ thống hạt.

Kho lưu trữ bao gồm 282 prompt trong thư mục prompts/ và tệp data/videos.json. README giới thiệu 100 mục, mỗi mục là một ví dụ cho một prompt riêng biệt, đồng thời liên kết từng mục với bài đăng gốc của tác giả.

Đây không phải là thư viện phần mềm mà bạn cài đặt và import. Thay vào đó, đây là một thư viện prompt thực tế: chọn một ví dụ, sao chép prompt và yêu cầu AI coding agent của bạn tạo ra trải nghiệm tương tự.

Xem cả 282 video cùng với các bản dựng lại trực tiếp trên Skillry.

Duyệt bộ sưu tập theo danh mục sáng tạo

Các ví dụ nổi bật được sắp xếp thành bốn nhóm chính. Nhờ đó, bạn dễ dàng bắt đầu với phong cách hình ảnh hoặc kiểu tương tác mà mình muốn khám phá.

• Đồ họa chuyển động: 58 ví dụ dựa trên các bố cục hình ảnh động.
• Video giải thích: 16 ví dụ truyền đạt một ý tưởng thông qua hoạt ảnh.
• Cảnh 3D: 14 ví dụ sử dụng hình ảnh ba chiều trên trình duyệt.
• Trò chơi và tương tác: 12 ví dụ phản hồi thao tác của người dùng hoặc hoạt động như những trải nghiệm nhỏ có thể chơi.

Các bản triển khai được liệt kê trải dài từ những thử nghiệm Canvas và SVG gọn nhẹ đến các dự án sử dụng Three.js, GSAP, GLSL, WebGL, Web Audio, hình ảnh do AI tạo và hệ thống hạt. Nhãn công nghệ hiển thị bên cạnh mỗi mục có thể giúp bạn chọn điểm bắt đầu phù hợp.

Thiết lập kho lưu trữ

Bạn không cần cài đặt gói nào để duyệt các prompt. Việc sao chép kho lưu trữ về máy hữu ích khi bạn muốn tìm kiếm, lưu tài liệu tham khảo hoặc kiểm tra dữ liệu video có cấu trúc.

1. Sao chép kho lưu trữ GitHub về máy tính.
2. Mở thư mục kho lưu trữ trong trình soạn thảo.
3. Duyệt thư mục prompts/ để xem các tệp prompt Markdown riêng lẻ.
4. Mở data/videos.json khi muốn làm việc với toàn bộ bộ sưu tập dưới dạng dữ liệu có cấu trúc.

git clone <repository-url>
cd <repository-directory>

README không nêu runtime bắt buộc, lệnh cài đặt dependency hay máy chủ ứng dụng cục bộ nào. Bộ sưu tập chủ yếu dành cho việc đọc prompt và làm theo các ví dụ được liên kết. Nếu dự án được tạo sử dụng thư viện bên ngoài hoặc API của trình duyệt, hãy yêu cầu Claude cung cấp hướng dẫn thiết lập cần thiết cho dự án cụ thể đó.

Cách sử dụng prompt

Mỗi mục nổi bật đều có một liên kết mang nhãn Prompt. Chọn ví dụ phù hợp với loại hoạt ảnh bạn muốn, sau đó mở tệp prompt tương ứng trong kho lưu trữ.

1. Chọn một danh mục như đồ họa chuyển động, video giải thích, cảnh 3D hoặc dự án tương tác.
2. Xem các nhãn công nghệ, chẳng hạn Canvas, SVG, GSAP hoặc Three.js.
3. Mở tệp Markdown được liên kết trong prompts/.
4. Sao chép prompt vào Claude Opus 5.5 hoặc coding agent ưa thích của bạn.
5. Yêu cầu agent tạo các tệp dự án và giải thích cách chạy chúng.
6. Mở dự án HTML kết quả trong trình duyệt và tiếp tục cải tiến.

Ví dụ, một tệp prompt gắn với ví dụ Canvas có thể làm điểm khởi đầu cho một hoạt ảnh trên trình duyệt. Thay vì chỉ sao chép ý tưởng hình ảnh, hãy giữ lại các yêu cầu quan trọng trong prompt, chẳng hạn phương pháp kết xuất, chuyển động, sắc thái hình ảnh, tương tác và các ràng buộc kỹ thuật. Sau đó thay đổi chủ thể hoặc phong cách để tạo dấu ấn riêng.

Bắt đầu với một prompt, sao chép chính xác, chạy kết quả được tạo và thực hiện thay đổi qua các yêu cầu bổ sung ngắn.

Quy trình lặp mẫu

Một quy trình thực tế có thể diễn ra như sau:

1. Yêu cầu Claude triển khai ý tưởng đã chọn dưới dạng một tệp HTML độc lập.
2. Chạy tệp trong trình duyệt hiện đại và kiểm tra xem hoạt ảnh có hiển thị chính xác không.
3. Yêu cầu một thay đổi cụ thể, chẳng hạn bảng màu khác, chuyển cảnh chậm hơn hoặc tương tác mới.
4. Kiểm tra lại phiên bản đã chỉnh sửa trước khi yêu cầu thay đổi tiếp theo.
5. Lưu riêng các phiên bản thành công để có thể so sánh các lần lặp.

Khi dự án phụ thuộc vào một kỹ thuật cụ thể, hãy nêu rõ kỹ thuật đó trong yêu cầu. Chẳng hạn, hãy yêu cầu triển khai bằng Canvas khi tài liệu tham khảo có nhãn Canvas, hoặc yêu cầu Three.js khi tài liệu tham khảo sử dụng cảnh 3D. Điều này giúp kết quả được tạo bám sát ví dụ gốc.

Hiểu các nhãn kỹ thuật

Canvas

Các ví dụ Canvas vẽ đồ họa trực tiếp trên canvas của trình duyệt và thường là lựa chọn hữu ích cho hạt, hoạt ảnh tạo theo quy tắc và chuyển động theo từng khung hình.

SVG

Các ví dụ SVG xây dựng thành phần hình ảnh dưới dạng các hình vector có thể co giãn. Chúng phù hợp với bố cục hình học, sơ đồ và các hoạt ảnh cần hình dạng sắc nét.

GSAP

GSAP xuất hiện trong các ví dụ sử dụng thư viện hoạt ảnh chuyên dụng để điều phối dòng thời gian, hiệu ứng chuyển tiếp và chuyển động.

Three.js, WebGL và GLSL

Các nhãn này cho biết những phương pháp kết xuất nâng cao hơn. Three.js cung cấp một framework JavaScript cho các cảnh 3D, trong khi WebGL và GLSL hỗ trợ đồ họa cấp thấp được tăng tốc bằng GPU cùng các hiệu ứng shader.

Web Audio và hạt

Các ví dụ Web Audio kết nối hình ảnh với khả năng âm thanh của trình duyệt. Các ví dụ về hạt tập trung vào những tập hợp phần tử nhỏ chuyển động, tạo ra các hiệu ứng như trường, vệt hoặc vụ nổ.

Mẹo nâng cao để có kết quả tốt hơn

• Sử dụng repository như một thư viện prompt: So sánh nhiều prompt trước khi chọn một prompt, ngay cả khi bạn dự định xây dựng một hình ảnh khác.
• Làm theo nhãn công nghệ: Bắt đầu với một ví dụ có phong cách triển khai phù hợp với dự án bạn dự định thực hiện.
• Yêu cầu kết quả hoàn chỉnh có thể chạy: Yêu cầu Claude cung cấp toàn bộ mã cần thiết và hướng dẫn rõ ràng cho trình duyệt thay vì các đoạn mã rời rạc.
• Lặp lại theo từng bước nhỏ: Tách các thay đổi về hình ảnh, tương tác và hiệu năng thành những yêu cầu riêng biệt.
• Giữ prompt gốc để so sánh: Lưu phiên bản đã chỉnh sửa bên cạnh prompt nguồn để xác định những thay đổi nào ảnh hưởng đến kết quả.
• Kiểm tra các liên kết nguồn: Mỗi mục nổi bật đều liên kết đến bài đăng gốc của tác giả, cung cấp thêm ngữ cảnh về dự án.
• Sử dụng dữ liệu có cấu trúc để tìm kiếm: Tìm trong data/videos.json khi cần làm việc với toàn bộ 282 mục thay vì chỉ các ví dụ nổi bật.
• Kiểm tra quyền trình duyệt: Các dự án liên quan đến âm thanh, dữ liệu đầu vào của người dùng hoặc đồ họa nâng cao có thể hoạt động khác nhau tùy thuộc vào quyền trình duyệt và phần cứng.

Tác giả và tác phẩm gốc

Bộ sưu tập ghi nhận công sức của các tác giả đứng sau những video nổi bật và liên kết đến các bài đăng gốc của họ. Khi sử dụng lại một ý tưởng hoặc prompt, hãy xem lại mục gốc và giữ phần ghi công phù hợp. Repository là tài nguyên để khám phá và học tập, còn các video riêng lẻ thuộc về những tác giả tương ứng.

Để có trải nghiệm duyệt đầy đủ, hãy sử dụng thư viện Skillry, hoặc khám phá trực tiếp các tệp prompt trong repository.

Kết luận

Awesome Opus 5.5 Videos mang đến một cách thực hành để học lập trình sáng tạo dựa trên prompt. Hãy duyệt qua các danh mục, chọn một phong cách triển khai, sao chép prompt từ prompts/ và yêu cầu Claude Opus 5.5 tạo một trải nghiệm trình duyệt có thể chạy. Với 282 prompt bao quát Canvas, SVG, Three.js, GLSL, GSAP, Web Audio và nhiều công nghệ khác, bộ sưu tập cung cấp nhiều điểm khởi đầu cho các hoạt ảnh và thử nghiệm tương tác của riêng bạn.