Tóm tắt: Thời gian đặt sẵn đến từng mili giây. Điểm hay là vòng tự kiểm: chụp từng khung, tìm lỗi vượt đà, vá code đến khi đạt.
Prompt xin một timeline GSAP cho các thẻ giao diện với thời gian cố định: 280ms cho thẻ, 220ms cho tiêu đề, 160ms cho thông tin phụ, mỗi phần tử cách nhau 60ms. Sau đó dựng vòng kiểm tra: chạy từng khung bằng Playwright, so ảnh chụp để phát hiện vượt đà hay lỗi, rồi vá code đến khi đạt mà không viết lại từ đầu.
Vì sao nhiều người dừng lại xem?
Đây là prompt về quy trình hơn là về hình ảnh. Nó dạy Claude tự kiểm tra kết quả thay vì đoán là đã đúng. Câu "vá chứ không viết lại" tránh được thói quen AI hay đập đi làm lại, làm hỏng những phần đã ổn.
Cách dùng với Claude Opus 5.5
Prompt này cần Claude Code và máy đã cài Node.js (để chạy Playwright). Dán prompt vào một thư mục dự án trống. Nếu bạn làm web, đây là mẫu tốt để áp cho mọi hiệu ứng giao diện.
Prompt
Prompt gốc của tác giả:
Build a GSAP timeline for UI cards with specific timing constraints: 280ms for cards, 220ms for title, 160ms for metadata, and a 60ms stagger between elements. Implement a verification loop where the animation is stepped through frame-by-frame using Playwright, screenshots are compared to detect overshoot or errors, and the code is patched until it passes the checks without rewriting everything.Prompt by @fleyta88, via Skillry / awesome-opus5-5-videos (MIT)
Câu hỏi thường gặp
Prompt này tạo ra cái gì?
Prompt xin một timeline GSAP cho các thẻ giao diện với thời gian cố định: 280ms cho thẻ, 220ms cho tiêu đề, 160ms cho thông tin phụ, mỗi phần tử cách nhau 60ms.
Làm video giải thích này thì cần cài gì trên máy?
Bài này không gói gọn trong một file HTML: quy trình dùng Node.js, Playwright. Bạn cần để Claude chạy được lệnh trên máy, ví dụ Claude Code mở trong thư mục dự án của bạn, và cài sẵn Node.js nếu máy chưa có. Mình dùng Claude Opus 5.5; Claude tự viết code, tự chạy và xuất ra file video.
Có được dùng lại prompt của @fleyta88 để đăng lên kênh của bạn không?
Được. Prompt là của @fleyta88, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là khái niệm cần giải thích, giọng đọc và số cảnh. Khi chia sẻ lại, bạn ghi nguồn @fleyta88 là đủ.
