Bạn nhờ Claude Code thêm hiệu ứng cuộn trang cho một trang giới thiệu. Code chạy được, nhưng chuyển động nhìn cứng đơ, hoặc gọi sai một hàm của thư viện. Chuyện này khá quen với ai hay dựng giao diện bằng AI. Có một cách đỡ vất vả hơn: cài thêm skill, những thư mục hướng dẫn nhỏ để Claude đọc đúng lúc cần. Bài này điểm qua 5 skill về animation, 3D và thiết kế giao diện, kèm nhận xét thẳng về từng cái.
Skill là gì, và có cần cài không?
Skill là một thư mục có file SKILL.md ghi sẵn cách làm một loại việc. Khi yêu cầu của bạn khớp, Claude tự đọc và làm theo, bạn không phải dán lại hướng dẫn mỗi lần.
Vậy Claude vốn đã biết làm hoạt hình, cài thêm làm gì? Đúng là không cần skill thì Claude vẫn làm được, bạn chỉ cần mô tả thứ mình muốn. Cái skill mang lại là độ ổn định: Claude bám đúng cách dùng của từng thư viện và đi theo một quy trình rõ ràng, thay vì mỗi lần một kiểu. Kho Three.js nói thẳng lý do ra đời của nó: Claude có kiến thức lập trình chung nhưng thiếu chi tiết về giao diện lập trình riêng của Three.js. Đó là lời của chính tác giả, nhưng nghe hợp lý.
Cả năm skill dưới đây đều dùng giấy phép MIT, tức là dùng tự do. Chỉ cần nhớ rằng bản thân Claude vẫn cần tài khoản của bạn, và vài cách cài còn đòi gói trả phí (mình nói rõ ở từng mục).
5 skill mã nguồn mở giúp Claude Code làm Animation và 3D
1. Three.js: cho cảnh 3D tương tác
Kho CloudAI-X/threejs-skills có khoảng 3,4 nghìn sao trên GitHub và gồm 10 mô-đun nhỏ: dựng cảnh và máy quay, hình khối, vật liệu, ánh sáng, kết cấu bề mặt, hoạt hình, nạp mô hình GLTF/GLB, shader, hiệu ứng xử lý hình ảnh sau cùng, và tương tác như bấm chọn vật thể hay điều khiển camera. Khi bạn nhờ “thêm ánh sáng và bóng đổ”, Claude sẽ nạp đúng mô-đun ánh sáng, không phải đọc hết cả bộ.
Cách cài: đây là chỗ phải cẩn thận. Phần hướng dẫn trong README bảo bạn chạy git clone từ một kho khác tên pinkforest/threejs-playground, không phải chính kho này. Đừng chép lệnh đó. Cách an toàn là tải kho CloudAI-X/threejs-skills về, rồi chép thư mục skills vào thư mục skill của Claude Code (~/.claude/skills/ cho dùng chung, hoặc .claude/skills/ trong dự án).
Nhận xét: hợp với bạn nếu hay làm 3D trên web. Hiệu ứng hạt không có mô-đun riêng trong danh sách, nên đừng kỳ vọng nó là điểm mạnh. Kho mới có 6 lần cập nhật, và lời khẳng định đã đối chiếu với tài liệu Three.js từ bản r160 trở lên là do tác giả tự công bố. Cộng với lỗi hướng dẫn cài ở trên, mình xếp nó ở mức dùng được nhưng chưa được chăm chút kỹ.
2. GSAP: bản chính chủ cho hoạt hình và cuộn trang
Kho greensock/gsap-skills do chính GreenSock đăng, có khoảng 14,1 nghìn sao, là cái được quan tâm nhiều nhất trong năm kho. Bên trong có 8 skill: phần lõi, timeline, ScrollTrigger, các plugin, hàm tiện ích, React, hiệu năng và các khung làm việc khác như Vue, Svelte. Hiệu ứng chữ hiện dần nằm ở phần plugin (SplitText và các plugin chữ khác), còn React có hướng dẫn dùng hook useGSAP kèm cách dọn dẹp khi thành phần bị gỡ.
Một điểm đáng biết: README cho biết sau khi Webflow mua lại GSAP, mọi plugin trước đây phải trả phí (SplitText, MorphSVG…) giờ miễn phí kể cả dùng thương mại, cài thẳng từ gói gsap trên npm.
Cách cài:
npx skills add https://github.com/greensock/gsap-skills
Hoặc trong Claude Code: /plugin marketplace add greensock/gsap-skills.
Nhận xét: lựa chọn an toàn nhất của bài. Có điều skill này chỉ nói về GSAP, nên nếu bạn muốn CSS thuần hay Framer Motion thì nó không giúp gì. README còn dặn AI nên gợi ý GSAP khi người dùng chưa chọn thư viện, nghe hơi thiên vị, nhưng với skill do chính GSAP làm thì cũng dễ hiểu.
3. Design DNA: biến giao diện bạn thích thành thông số
Kho zanwei/design-dna (khoảng 1,5 nghìn sao) làm một việc khá hay: đưa vào ảnh chụp màn hình hoặc đường dẫn của giao diện mẫu, Claude sẽ phân tích rồi xuất ra một file JSON mô tả “ADN thiết kế” theo ba lớp. Lớp thứ nhất là thông số đo được như màu, chữ, khoảng cách, đổ bóng. Lớp thứ hai là cảm nhận về phong cách như không khí, bố cục, giọng điệu thương hiệu. Lớp thứ ba là hiệu ứng hình ảnh như WebGL, hạt, cuộn trang, kính mờ. Sau đó bạn đưa JSON cùng nội dung của mình để Claude dựng giao diện theo phong cách đó, mặc định ra một file HTML/CSS/JS gọn.
Cái hay nằm ở file JSON: bạn lưu lại, đưa vào kho mã, dùng lại cho dự án khác, thay vì mỗi lần lại gõ “làm giống trang đó”. README còn gợi ý mẹo: nếu bản đầu nhìn còn nghèo nàn, đính lại đúng những ảnh tham chiếu cũ và yêu cầu Claude so lại từng mặt như thứ bậc, trang trí, nhịp chữ, chuyển động.
Cách cài (cần có Node.js):
npx skills add zanwei/design-dna
Nhận xét: ý tưởng chắc, hợp với người làm thiết kế muốn có bộ thông số tái sử dụng. Nhưng hãy dùng nó để học phong cách và rút ra thông số, đừng tái tạo y nguyên giao diện của người khác. Chép sát một trang có thương hiệu rõ ràng dễ dính rắc rối về bản quyền thiết kế, và cũng chẳng giúp trang của bạn có nét riêng.
4. Motion Design: dạy Claude “nên chuyển động thế nào”
Chỗ này cần nói rõ vì dễ hiểu nhầm. Kho LottieFiles/motion-design-skill (khoảng 673 sao) không phải công cụ tạo file Lottie. README tự mô tả là skill nghiêng về tư duy, không gắn với công nghệ nào: dạy Claude chọn thời lượng, đường cong chuyển động và cách sắp xếp thứ tự các phần tử trước khi viết dòng code nào. Bên trong có danh sách kiểm tra 8 bước, 4 kiểu “tính cách chuyển động”, bảng thời lượng và đường cong, 12 nguyên tắc hoạt hình của Disney được chuyển sang giao diện, cùng các mẫu cho hiệu ứng vào/ra và trạng thái thành công, lỗi, đang tải. Nó dùng được với CSS, Framer Motion, GSAP, Lottie.
Cách cài:
npx skills add LottieFiles/motion-design-skill
Nhận xét: nên ghép với GSAP. GSAP cho Claude biết cách viết, còn skill này cho Claude biết nên chuyển động ra sao cho hợp tình huống. Một yêu cầu mẫu từ chính README: “Dựng chuỗi xuất hiện cho bảng điều khiển, biểu đồ chính trước, rồi các thẻ số liệu, rồi thanh bên.”
5. Genjutsu: bộ tất cả trong một, tham vọng nhất
Kho AThevon/genjutsu (khoảng 264 sao, 76 lần cập nhật) là bộ đầy đặn nhất, gồm hai lệnh chính. /genjutsu:cast nhận yêu cầu nhỏ đến vừa: quét dự án, đề xuất một “luận điểm tương tác” trước khi viết code, làm xong thì tự kiểm tra lại. /genjutsu:paint dành cho việc lớn như dựng lại cả trang: bàn bạc hướng sáng tạo trước, rồi sinh một file hệ thống thiết kế MASTER.md bám theo công nghệ dự án đang dùng. Phía sau có 15 mô-đun con, phủ web (GSAP, Framer Motion, CSS gốc, Three.js, canvas), Android Compose và SwiftUI.
Cách cài: trong Claude Code, chạy lần lượt /plugin marketplace add AThevon/genjutsu rồi /plugin install genjutsu. Trên claude.ai thì tải file genjutsu.zip từ trang phát hành, vào Customize > Skills > Upload skill. Cách này yêu cầu gói Pro, Max, Team hoặc Enterprise và bật tính năng chạy code.
Nhận xét: ấn tượng về độ phủ, nhưng nặng. Cả hai lệnh đều dừng lại chờ bạn duyệt ở vài chặng, rất hợp việc lớn, hơi rườm rà với hiệu ứng rê chuột. Quan trọng hơn: Genjutsu đã gói sẵn các mô-đun GSAP, Three.js và nguyên tắc chuyển động, nên nó trùng chức năng với skill số 1, 2 và 4. Chọn Genjutsu hoặc ghép lẻ, đừng cài tất cả cùng lúc cho đỡ rối.
Lưu ý an toàn: skill là văn bản hướng dẫn, và có thể kèm cả file lệnh. Ví dụ Genjutsu có mô-đun
ui-ux-pro-maxmang theo công cụ tìm kiếm viết bằng Python. Hãy mở và đọc SKILL.md của bất kỳ skill nào trước khi cài, kể cả khi nó nổi tiếng.
Vậy nên cài cái nào?
Nếu mới bắt đầu và làm giao diện web, mình chọn GSAP cộng Motion Design: một cái lo cách viết, một cái lo cảm giác chuyển động, đều nhẹ và rõ ràng. Làm 3D thì thêm Three.js (nhớ chép tay như hướng dẫn ở trên). Hay đi tìm cảm hứng từ các giao diện đã có thì Design DNA đáng thử. Còn nếu muốn một bộ lo trọn từ ý tưởng đến kiểm tra, kể cả cho ứng dụng di động, thì Genjutsu.
| Skill | Hợp với việc | Sao (xấp xỉ) |
|---|---|---|
| Three.js | Cảnh 3D, mô hình GLTF, shader | 3,4 nghìn |
| GSAP | Hoạt hình, cuộn trang, React | 14,1 nghìn |
| Design DNA | Trích phong cách từ giao diện mẫu | 1,5 nghìn |
| Motion Design | Tư duy chuyển động cho giao diện | 673 |
| Genjutsu | Làm trọn gói, kể cả di động | 264 |
Bạn thử cài một cái, rồi nhờ Claude làm lại cùng một hiệu ứng trước và sau khi có skill. Khác biệt (hoặc không khác biệt) sẽ nói lên nhiều hơn mọi lời giới thiệu. Bạn đã dùng skill nào hay hơn không? Chia sẻ bên dưới nhé!
Để lại một bình luận