Tóm tắt: Prompt lấy thiết kế từ Figma, giữ y nguyên, chỉ thêm chuyển động: huy hiệu là khối 3D đặc nghiêng theo con trỏ, rồi ăn mừng bằng hạt vàng.
Đây là màn hình mở khóa huy hiệu, kiểu bạn thấy trong game hay ứng dụng khi đạt thành tích. Claude lấy thiết kế từ một khung Figma có sẵn và giữ đúng bố cục, chữ, ánh sáng. Phần Claude thêm là chuyển động: huy hiệu là một vật 3D đặc, nghiêng về phía con trỏ theo quy luật vật lý, rồi bung hạt vàng ăn mừng.
Vì sao nhiều người dừng lại xem?
Prompt chia việc rõ: thiết kế là của người, chuyển động là của Claude. Câu "chỉ thêm chuyển động" ngăn Claude tự ý sửa giao diện. Hai yêu cầu cuối cũng đáng học: nhanh và mượt, nhưng không nảy tưng tưng. Nhiều hoạt hình hỏng chỉ vì nảy quá đà.
Cách dùng với Claude Opus 5.5
Bạn cần kết nối Figma với Claude (qua công cụ Figma) để Claude đọc được khung thiết kế, hoặc xuất khung đó thành ảnh rồi đính kèm. Dán prompt vào Claude Opus 5.5, thay "linked Figma frame" bằng link của bạn. Lưu code thành .html, mở bằng Chrome.
Prompt
Prompt gốc của tác giả:
Using the linked Figma frame build a badge unlock screen. Match the design exactly. Use the file's assets, lighting, type and layout and add only the motion. Animate the badge so it feels premium and celebratory. Build its scene and then celebrate with gold particles. Treat the badge as a solid 3D object that tilts toward thecursor following the rules of physics. Keep it fast and smooth, it should not be bouncy.Prompt by @BThreeAgency, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Đây là màn hình mở khóa huy hiệu, kiểu bạn thấy trong game hay ứng dụng khi đạt thành tích.
Màn hình mở khóa huy hiệu 3D được dựng bằng công cụ nào?
Chỉ cần Claude Opus 5.5 và Chrome. Bạn dán prompt, xin Claude trả về một file HTML duy nhất, lưu rồi mở lên. Code dùng SVG, Canvas, mở là chạy ngay trong trình duyệt. Cần file video thì quay lại màn hình.
Có được dùng lại prompt của @BThreeAgency để đăng lên kênh của bạn không?
Được. Prompt là của @BThreeAgency, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là vật thể, ánh sáng, góc máy hay tốc độ quay. Khi chia sẻ lại, bạn ghi nguồn @BThreeAgency là đủ.