Tóm tắt: Một câu ngắn để thử óc thiết kế web: năm kiểu hiệu ứng cuộn, không cái nào giống cái nào, nội dung do Claude quyết.
Prompt xin Claude dựng 5 phần trang web chạy theo thao tác cuộn, mỗi phần hoàn toàn khác nhau. Bối cảnh và bố cục Claude tự quyết.
Vì sao nhiều người dừng lại xem?
Hiệu ứng cuộn là thứ các trang giới thiệu sản phẩm hay dùng để kể chuyện. Chữ "hoàn toàn khác nhau" ép Claude đi qua nhiều kỹ thuật (ghim phần tử, lớp chồng, chữ chạy, biểu đồ hiện dần) thay vì lặp lại một mẹo.
Cách dùng với Claude Opus 5.5
Mở Claude, chọn Opus 5.5, dán prompt bên dưới. Nhắc thêm một câu: "gói tất cả trong một file HTML, không cần cài gì". Lưu đoạn code Claude trả về thành file .html, mở bằng Chrome. Muốn có video để đăng, bạn quay màn hình lúc nó chạy. Quay màn hình khi cuộn chậm từ trên xuống, bạn có ngay một video demo. Muốn dùng cho trang thật, bạn nói rõ chủ đề (ví dụ: trang giới thiệu một quán cà phê).
Prompt
Prompt gốc của tác giả:
Build 5 completely different scroll-based sections, decide the context & layout yourself.Prompt by @ercankeskinx, 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 Claude dựng 5 phần trang web chạy theo thao tác cuộn, mỗi phần khác hẳn nhau.
Năm phần trang web cuộn được dựng bằng công cụ nào?
Code dùng SVG, Canvas, mở là chạy ngay trong trình duyệt. Mình dùng Claude Opus 5.5: dán prompt, bảo Claude gom mọi thứ vào một file HTML, mở bằng Chrome, rồi quay màn hình nếu muốn đăng thành video.
Muốn biến năm phần trang web cuộn thành phiên bản của riêng bạn thì đổi chỗ nào?
Được. Prompt là của @ercankeskinx, 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 @ercankeskinx là đủ.
