Tóm tắt: Mẫu prompt hình khối UI được đổi chủ đề sang Pokémon: nút giữa quả bóng thành vòng quét, thanh trượt, bảng chỉ số, rồi quay về quả bóng.
Đây là biến thể chủ đề Pokémon của prompt "một hình khối biến hóa" đã có trong loạt. Quả Poké Ball là hình khối duy nhất. Nút giữa thành vòng quét, vỏ bóng giãn thành Pokédex, hiện Pokémon được chọn, nút phát tiếng kêu, thanh âm lượng, công tắc bản shiny, bảng chỉ số, ô tìm kiếm, thông báo "đã thêm vào đội", rồi gập lại thành quả bóng.
Vì sao nhiều người dừng lại xem?
Cái hay là cách tác giả gắn từng bộ phận của quả bóng vào giao diện: nút giữa, đường kẻ đen, vỏ đỏ trắng đều thành điều khiển của trạng thái tiếp theo. 28 phách, mỗi phách một việc, được kê từng dòng. Đây là ví dụ tốt về cách lấy một prompt mẫu rồi làm nó thành của mình.
Cách dùng với Claude Opus 5.5
Prompt này mở đầu bằng việc để Claude hỏi bạn trước. Dán vào Claude Code (chọn Opus 5.5), trả lời từng câu Claude hỏi, duyệt bảng phân cảnh rồi mới cho viết code. Phần render cần ffmpeg, Playwright và Python có numpy. Prompt gốc dài gần 6.000 ký tự, mình rút gọn bên dưới. Pokémon là thương hiệu có bản quyền, nên video này hợp để học và chơi, không dùng để bán hàng.
Prompt
Prompt mình viết lại theo ý của tác giả (không phải nguyên văn):
Ask me first for: my featured Pokémon or starter trio, 8 to 12 Pokémon-themed UI states, and a royalty-free song around 120 BPM. Default palette: warm off-white, black, Poké Ball red.
Direction: a Pokémon-inspired UI motion film, like a beautifully designed modern Pokédex. One shape, never cut: a Poké Ball morphs into every component. Its center button, dividing line and shell become the controls of each new state. A cursor drives every change. Warm-gray canvas, Geist, tight springs, tiny overshoot. The ending returns to the opening Poké Ball for a seamless loop.
Banned: excess bouncing, particles, glows, gradients on UI chrome, generic dashboards, dead time.
Structure: 120 BPM, 7 bars, 28 beats, about 14 seconds.
Bar 1: click the center button, it becomes a scanning loader, then a check, the shell stretches into a Pokédex.
Bar 2: reveal the Pokémon with name, number, type; click the cry button, it morphs to pause with a waveform.
Bar 3: waveform becomes a volume slider, drag past max so it stretches, release into a shiny toggle.
Bar 4: flip shiny mode, knob becomes a liquid tab indicator, select Stats.
Bar 5: stat bars draw on the beat, hover tooltip, collapse into a search field.
Bar 6: command palette, type a name, select, enter, "Added to team" toast.
Bar 7: the toast's check becomes the center button and the shell closes back into the Poké Ball.
Build: one HTML file 1440x1440, every style computed from time in seek(t), closed-form springs, the tab indicator's two edges on different springs, drags as direct manipulation. Analyze the song with numpy for the beat grid. Render with Playwright and ffmpeg motion blur at 60fps.Prompt by @TheGrootDev, 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à biến thể chủ đề Pokémon của prompt "một hình khối biến hóa" đã có trong loạt.
Làm video 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 ffmpeg, Playwright, Python. Bạn cần để Claude chạy được lệnh trên máy, ví dụ Claude Code mở trong một thư mục trống, và cài sẵn ffmpeg 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.
Prompt của @TheGrootDev có được sửa lại cho việc của bạn không?
Được. Prompt là của @TheGrootDev, mình lấy qua Skillry và bộ awesome-opus5-5-videos (giấy phép MIT). Chỗ nên đổi trước là tên thương hiệu, câu chữ, màu và thời lượng. Khi chia sẻ lại, bạn ghi nguồn @TheGrootDev là đủ.
