# Cách xây dựng website có hiệu ứng động trong Claude Code chỉ trong một buổi tối
> Các quy tắc chống thiết kế rập khuôn, định hướng hình ảnh, GSAP, khả năng tiếp cận và kiểm tra hiệu năng cho một website có hiệu ứng động trong Claude Code.
Source: https://ailoot.ai/blog/vi/animated-website-claude-code/
Canonical: https://ailoot.ai/blog/vi/animated-website-claude-code/
Language: vi
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-007
Revision: sha256-9554f595a488af7709ff023ce351f4b853fe241e1f56d19d2e7197c96fdd2265
Điểm chính
Claude Code có thể xây dựng một website có hiệu ứng động chỉ trong một buổi tối, nhưng kết quả trông chung chung vì nếu không có các ràng buộc rõ ràng, mô hình sẽ trôi về mức trung bình trong dữ liệu huấn luyện của nó. Có ba cách khắc phục: quy tắc chống rập khuôn trong `CLAUDE.md`, một định hướng hình ảnh có sẵn thay vì câu lệnh mơ hồ, và tài liệu thư viện hiệu ứng động được cập nhật ngay trong ngữ cảnh. Cạm bẫy chính trong quá trình này là lạm dụng chuyển động: hiệu ứng động quá mức khiến người ta nhận ra sản phẩm được tạo bằng AI rõ hơn cả khi không có hiệu ứng, đồng thời làm chậm tốc độ hiển thị phần đầu trang.
Tìm hiểu thêm về cách làm việc với các mô hình trong [tài liệu Ailoot](https://ailoot.ai/docs/).
## Vì sao có thể nhận ra website do AI tạo ngay từ màn hình đầu tiên?
Điểm chính
Một mô hình không có ranh giới được thiết lập sẽ lấy trung bình mọi thứ nó từng thấy trong dữ liệu huấn luyện. Trước đây, kết quả thường là các nút màu tím và phông Inter; xu hướng hiện chuyển sang nền màu kem với chữ serif và điểm nhấn màu đất nung. Anthropic mô tả ba kiểu tiêu chuẩn như vậy trong tài liệu về skill của chính họ và gọi rõ đó là hành vi mặc định.
Bạn yêu cầu một tác nhân dựng một trang đích. Bốn mươi phút sau, bạn có một website hoạt động được: các phần đã được sắp xếp, có bố cục thích ứng và các nút hoạt động. Gần như ngay lập tức, bạn lại có cảm giác mình đã thấy nó ở đâu đó rồi.
Lý do nằm ở cơ chế. Mô hình được huấn luyện trên một bộ sưu tập khổng lồ các trang hoàn chỉnh, và bộ sưu tập đó có độ lệch đáng kể.
Hàng nghìn hướng dẫn và mẫu khởi đầu đã sao chép màu đó, làm lệch mẫu dữ liệu, và mô hình học được rằng nút phải có màu tím. Cơ chế tương tự cũng áp dụng cho phông chữ, góc bo tròn và bóng đổ.
Trong thời gian đó, “diện mạo AI” đã thay đổi. Trong tài liệu về skill `frontend-design`, Anthropic hiện mô tả những kiểu khác.
Thiết kế do AI tạo hiện tập trung quanh ba kiểu: nền màu kem ấm (khoảng #F4F1EA) với tiêu đề serif tương phản và điểm nhấn màu đất nung; nền gần như đen với một điểm nhấn xanh axit hoặc đỏ son sáng; và bố cục báo khổ rộng với các đường kẻ mảnh, góc không bo và các cột báo dày đặc. Cả ba đều phù hợp với một số nhiệm vụ, nhưng đây là hành vi mặc định chứ không phải lựa chọn có chủ đích, và chúng xuất hiện bất kể chủ đề là gì.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Vấn đề gốc: slop xuất hiện khi không có thứ gì cụ thể để sao chép, và mô hình chỉ lấy trung bình mọi phong cách web.
Ở đây, “slop” có nghĩa là sản phẩm do máy tạo ra được lấy trung bình thành một kết quả chung chung, không có phong cách riêng biệt.
Bài học thực tế là tác nhân cần một hệ quy tắc thiết kế hẹp thay vì một nhiệm vụ mở. Nếu bạn nói “làm cho đẹp”, nó sẽ chọn mức trung bình. Nếu bạn đưa cho nó một bảng màu cụ thể, vài kiểu chữ và một yếu tố hình ảnh định hình, nó sẽ xây dựng dựa trên những thứ đó.
Chuyển động là tín hiệu dễ nhận thấy nhất trong bức tranh này. Ngay cả một trang tĩnh có kiểu chữ hoàn hảo vẫn trông như mẫu có sẵn, vì website sống động có nhịp điệu: các thành phần xuất hiện khi bạn cuộn, con trỏ làm thay đổi mọi thứ, và chuyển cảnh giữa các màn hình không bị ngắt đột ngột.
## Bạn cần gì để xây dựng website có hiệu ứng động trong Claude Code?
Hãy lần lượt xem các công cụ, vì có nhiều nhầm lẫn về giá cả.
**GSAP** là thư viện hiệu ứng động đứng sau một phần đáng kể các website từng đoạt giải thưởng. Webflow mua lại thư viện này vào tháng 10 năm 2024, và tin đồn rằng mọi thứ đã miễn phí gần như lập tức xuất hiện. Nhưng không hoàn toàn đúng: thời điểm đó, Webflow xác nhận giá hiện hành vẫn được giữ nguyên. Thư viện chỉ trở nên miễn phí **vào cuối tháng 4 năm 2025**, cùng phiên bản 3.13.
GSAP hiện hoàn toàn miễn phí cho mọi người dùng, nhờ sự hỗ trợ của Webflow.
— GSAP, https://gsap.com/pricing
Bản phát hành 3.13 nói rõ các plugin trước đây phải trả phí như SplitText và MorphSVG cũng trở nên miễn phí, kể cả khi dùng cho mục đích thương mại. Phiên bản hiện tại tính đến tháng 7 năm 2026 là `gsap@3.15.0`.
Tuy nhiên, miễn phí không có nghĩa là mã nguồn mở. Giấy phép vẫn độc quyền và cấm xây dựng trình chỉnh sửa hiệu ứng động trực quan dựa trên GSAP để cạnh tranh với Webflow. Không có hạn chế nào đối với website, dự án khách hàng hay công việc thương mại.
**Skill `frontend-design` của Anthropic** là một tập hợp chỉ dẫn làm thay đổi cách tác nhân xử lý giao diện. Phần mô tả trong kho mã viết:
Hướng dẫn thiết kế hình ảnh đặc sắc, có suy nghĩ khi tạo giao diện mới hoặc làm lại giao diện hiện có. Hướng dẫn định hướng thẩm mỹ, kiểu chữ và lựa chọn giải pháp thiết kế không bị xem như mẫu mặc định.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Bên trong là phương pháp hai lượt. Trước tiên, tác nhân xây dựng một hệ thống token: bốn đến sáu màu có tên, kiểu chữ cho ít nhất hai vai trò, sơ đồ bố cục dưới dạng phác thảo văn bản và một yếu tố hình ảnh định hình trang. Sau đó, nó tự đánh giá kế hoạch dựa trên nhiệm vụ. Chỉ sau bước đó, nó mới viết mã.
Bài đăng nói có 75 skill, phần mô tả kho mã liệt kê 78, còn cây thư mục hiện có 91. Tác giả nói thẳng về điều này: hãy kiểm tra kho mã bằng lệnh tìm kiếm, vì phần mô tả đã lỗi thời.
## Làm thế nào để Claude Code ngừng tạo ra các mẫu rập khuôn?
Điểm chính
Hai bước. Trước tiên, thêm một bộ quy tắc cấm vào `CLAUDE.md`: không dùng bảng màu tiêu chuẩn, không dùng cùng một phông chữ cho cả tiêu đề lẫn nội dung, và không tạo hiệu ứng động cho thứ gì ngoài độ mờ và các phép biến đổi. Tiếp theo, cài skill `frontend-design`, giúp tác nhân lắp ghép một hệ thống token và đánh giá kế hoạch trước khi viết mã.
Hãy bắt đầu với tệp quy tắc, vì nó có hiệu lực trong mọi yêu cầu và không tốn gì.
Một điểm khởi đầu hữu ích là một khối quy tắc chống rập khuôn. Logic rất đơn giản: liệt kê cụ thể những lựa chọn mà mô hình thường mặc định trôi về, rồi cấm chúng bằng tên.
```markdown
## Anti-Generic Guardrails
- Colors: Never use default Tailwind palette (indigo-500, blue-600).
Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
with a clean sans. Apply tight tracking (-0.03em) on large headings,
generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).
```
Khối này được viết bằng tiếng Anh có chủ đích: mô hình tuân theo các chỉ dẫn kỹ thuật ngắn chính xác hơn khi dùng ngôn ngữ của tài liệu.
Dòng về hiệu ứng động nằm trong danh sách điều cấm cùng với màu sắc và bóng đổ là có lý do. Độ mờ trên màn hình đầu tiên ảnh hưởng trực tiếp đến chỉ số tốc độ, như ta sẽ thấy bên dưới.
Tiếp theo là skill. Có thể cài các skill chính thức của Anthropic thông qua plugin:
```bash
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
Một chi tiết: không thể cài riêng từng skill thiết kế; plugin `example-skills` cài cả mười hai skill cùng lúc. Nếu chỉ muốn cài một skill, hãy sao chép thư mục theo cách thủ công—Claude Code sẽ nhận ra mà không cần khởi động lại phiên:
```bash
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
```
Các skill khác trong bộ sưu tập có thể hữu ích gồm: `theme-factory` với mười giao diện có sẵn và yêu cầu con người xác nhận trước khi áp dụng; `web-artifacts-builder` để xây dựng bằng React với các thành phần có sẵn; và `algorithmic-art` để tạo đồ họa bằng thuật toán. Một bài viết riêng giải thích chi tiết cách chọn skill cho một nhiệm vụ: [cách chọn skill cho Claude Code](https://ailoot.ai/blog/vi/choose-claude-code-skills/).
Các quy tắc và skill phối hợp với nhau: quy tắc cấm những lựa chọn kém, còn skill áp đặt quy trình—hệ thống trước, đánh giá sau, cuối cùng mới viết mã.
Mọi điều quan trọng ở đây diễn ra trước khi gửi yêu cầu. Bạn đưa sẵn vào ngữ cảnh các ràng buộc mà tác nhân sẽ dựa vào để xây dựng, và câu chữ trong chính câu lệnh hầu như không còn quan trọng. Cách tiếp cận này gọi là kỹ thuật ngữ cảnh, và tệp `CLAUDE.md` là viên gạch đầu tiên. Sự kết hợp giữa **bản sao AI + Bộ não thứ hai + Kỹ thuật ngữ cảnh** giúp biến Claude từ một công cụ tạo đầu ra trung bình thành công cụ bám sát phong cách của bạn.
## Bạn có thể tìm định hướng hình ảnh và câu lệnh hiệu ứng động có sẵn ở đâu?
Các kỹ thuật chuyển động trong đó gồm: `animation-on-scroll`, `gsap`, `gsap-scrolltrigger-storytelling`, `cinematic-gsap-lenis-motion-system`, `cinematic-scroll-storytelling`, `marquee-loop`, `masked-reveal`, `staggered-word-reveal`, `reveal-hover-effect`, `scroll-progress-timeline`, `scroll-scrubbed-visual-sequence`, `scroll-scrubbed-word-reveal`, `scroll-world-storytelling`.
Nếu bạn không phải lập trình viên, điều quan trọng hơn là các định hướng hình ảnh có sẵn. Thay vì nói mơ hồ “làm cho hiện đại”, hãy chọn một trong những kiểu này và đưa cho mô hình hệ quy tắc hẹp mà nó còn thiếu:
- `clean-minimal-beige-light-mode` - tối giản màu be sáng
- `dark-glass-clean-layout` - kính tối
- `documentary-brutalist-agency` - phong cách tư liệu thô mộc
- `editorial-portfolio-chapters` - danh mục đầu tư chia thành các chương như tạp chí
- `orange-clean-paper-saas` - website dịch vụ phong cách giấy với điểm nhấn màu cam
- `solar-duotone-bold` - xử lý hai màu nổi bật
- `tech-green-dark-mode-modern` - phong cách công nghệ tối với màu xanh lá
- `light-mode-paper-technical` - giấy kỹ thuật sáng
Ngoài ra còn có các skill kỹ thuật về đồ họa và hiệu ứng 3D: `threejs`, `matterjs`, `globe-gl`, `vantajs`, `unicorn-studio`, `progressive-blur`, `beautiful-shadows`, `css-border-gradient`.
Kho mã không có lệnh cài đặt—tác giả nói rõ trong lộ trình rằng họ sẽ thêm lệnh khi phương thức tích hợp được thống nhất. Chỉ dẫn duy nhất dành cho Claude Code là:
Một cách cài đặt được trình bày bên dưới. Lệnh này không có trong kho mã; đây là đề xuất cài đặt:
```bash
git clone ''
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/
```
## Làm thế nào để cung cấp cho tác nhân tài liệu GSAP mới nhất chỉ bằng một dòng?
Điểm chính
GSAP có tệp `llms.txt`—bản tóm tắt tài liệu dài 25 kilobyte được tạo riêng cho các mô hình ngôn ngữ. Đưa cho tác nhân liên kết tới tệp này, và nó có thể làm việc dựa trên mô tả phương thức cập nhật thay vì điều nó nhớ từ trước. Mỗi trang tài liệu cũng có phiên bản markdown. Thư viện Motion có cùng loại tệp, thậm chí còn lớn hơn.
Một vấn đề thường gặp với các thư viện hiệu ứng động là tác nhân nhớ cách kết nối đã lỗi thời. Nó viết lệnh import từ đường dẫn cũ, đăng ký plugin theo cách dùng từ hai năm trước, và mã không chạy được.
Cách khắc phục là tự đưa tài liệu vào ngữ cảnh. GSAP cung cấp tài liệu theo định dạng dễ xử lý bằng máy:
```
https://gsap.com/llms.txt
```
Tính đến hôm nay, tệp này có dung lượng khoảng 25 kilobyte. Mỗi trang tài liệu cũng có phiên bản markdown—chỉ cần thêm `.md` vào URL.
Trên thực tế, câu lệnh sẽ như sau:
```
Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md
Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.
```
Thư viện Motion (trước đây là Framer Motion) có cùng loại tệp và thậm chí còn lớn hơn. Motion được phân phối theo giấy phép MIT và vẫn thực sự là mã nguồn mở; phiên bản hiện tại là `motion@12.42.2`. Nếu dự án dùng React và chỉ cần hiệu ứng hiện đơn giản, bạn có thể chọn Motion; với các cảnh cuộn phức tạp, hãy dùng GSAP cùng plugin ScrollTrigger.
ScrollTrigger cho phép mọi người tạo hiệu ứng cuộn tuyệt đẹp chỉ với lượng mã tối thiểu.
— GSAP, https://gsap.com/docs/v3/Plugins/ScrollTrigger
Ngoài ra còn có các lựa chọn chỉ dựa vào trình duyệt, không dùng thư viện. Chuyển trạng thái trang qua API View Transitions bắt đầu được hỗ trợ rộng rãi vào ngày 14 tháng 10 năm 2025—nhưng chỉ trong cùng một trang; phiên bản chuyển giữa các trang hoàn toàn không được Firefox hỗ trợ. Hiệu ứng cuộn bằng CSS vẫn chưa được hỗ trợ rộng rãi: Chrome hỗ trợ, Safari mới học được gần đây, còn trong Firefox phải bật thủ công trong cài đặt, nên chúng sẽ không hoạt động với độc giả thông thường. Hãy yêu cầu tác nhân kiểm tra trước xem trình duyệt có hỗ trợ hay không; nếu không, hãy giữ hiệu ứng chuyển tiếp tiêu chuẩn.
## Làm thế nào để biến website bạn thích thành một câu lệnh?
Cách phổ biến nhất để giải thích điều bạn muốn là đưa ra ví dụ. Nhưng cách đó không trực tiếp hiệu quả với tác nhân: nó không nhìn thấy website mà chỉ thấy văn bản.
Skill `video-to-superprompt` lấp khoảng cách này. Mô tả trong kho mã: biến video tham khảo thành câu lệnh chi tiết để tái tạo hoặc lấy cảm hứng. Bên trong, skill phân tích bản ghi theo từng lớp: nội dung kể chuyện, bố cục, chuyển động, kiểu chữ và đồ họa 3D. Đầu ra là một câu lệnh sẵn sàng sử dụng.
Quy tắc chính của skill được nêu rất dứt khoát:
Skill thứ hai, `html-to-interaction-prompts`, xử lý mã nguồn: tìm mọi thứ chuyển động—phản ứng với con trỏ, đồ họa 3D, hiệu ứng cuộn, các lớp di chuyển ở tốc độ khác nhau—rồi chia trang thành các câu lệnh riêng, mỗi câu cho một phần, nút, trạng thái hover hoặc hiệu ứng. Nguyên tắc của skill là xem hành vi trong mã nguồn là sự thật và không bịa hiệu ứng từ ảnh chụp màn hình khi đã có mã.
Skill thứ ba, `stitched-full-page-capture`, giải quyết một vấn đề thực tế. Ảnh chụp toàn trang thông thường của website có tải chậm và đồ họa 3D sẽ xám xịt, trống trơn vì ảnh được chụp trước khi trang kết xuất. Skill cuộn qua trang theo từng màn hình, chờ mọi thứ ổn định rồi ghép kết quả lại.
Cũng có cách làm không cần bản ghi màn hình: kết nối tác nhân với thư viện ví dụ giao diện đang hoạt động thông qua MCP. Có thể cài máy chủ chính thức của Mobbin bằng một lệnh:
```bash
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Sau đó, mở phiên mới, chọn máy chủ trong danh sách rồi đăng nhập bằng trình duyệt. Tác nhân được quyền xem ảnh chụp màn hình của các ứng dụng thật đang hoạt động: có hơn 621,500 màn hình được liệt kê. Đây là ảnh chụp sản phẩm hoàn chỉnh, không phải thành phần hay mã. Lưu ý quan trọng: máy chủ Mobbin không hoạt động với gói miễn phí; dịch vụ chỉ có trong các gói trả phí (tính đến tháng 7 năm 2026). Có một [bài viết riêng về Google Stitch](https://ailoot.ai/blog/vi/google-stitch-claude-code-design/) hướng dẫn kết nối dịch vụ bên ngoài với tác nhân, dùng cùng phương pháp để đưa hệ thống thiết kế vào Claude Code.
## Từng bước xây dựng website có hiệu ứng động trong một buổi tối
Điểm chính
Thứ tự thực hiện là: quy tắc chống rập khuôn, skill thiết kế, chọn một định hướng hình ảnh, xây dựng trang tĩnh, và chỉ ở bước cuối mới thêm một cảnh động. Thêm chuyển động ở cuối, từng hiệu ứng một; nếu không, bạn sẽ chẳng biết bắt đầu từ đâu khi có lỗi. Bảy bước dưới đây sẽ mất một buổi tối nếu bạn không cố tạo hiệu ứng động cho mọi thứ cùng lúc.
1. ### Thiết lập dự án
Nếu chưa có dự án, hãy bắt đầu bằng một thư mục trống. Tạo thư mục, mở trong terminal rồi chạy `claude` tại đó. Với câu lệnh đầu tiên, hãy yêu cầu tạo khung dự án: “xây dựng khung website một trang cho doanh nghiệp của tôi (mô tả doanh nghiệp), chỉ dùng HTML và CSS thuần, không dùng thư viện.” Một bộ tệp sẽ xuất hiện—đó là thư mục gốc của dự án, nơi từ giờ mọi thứ sẽ diễn ra.
2. ### Thêm quy tắc vào CLAUDE.md
Sao chép khối Anti-Generic Guardrails vào tệp `CLAUDE.md` ở thư mục gốc của dự án. Nếu chưa có tệp này, hãy yêu cầu tác nhân tạo. Các quy tắc được viết cho Tailwind; nếu khung dự án dùng CSS thuần, hãy bảo tác nhân “áp dụng những nguyên tắc này vào CSS thông thường”—ý nghĩa của các quy tắc không thay đổi. Xem phân tích bốn quy tắc cho CLAUDE.md để biết tệp này hoạt động ra sao và nên thêm gì khác vào đó.
3. ### Cài skill frontend-design
Dùng plugin `example-skills` hoặc sao chép thư mục `frontend-design` như mô tả bên trên. Bạn có thể kiểm tra xem skill đã được tải chưa bằng lệnh `/doctor`.
4. ### Chọn một định hướng hình ảnh
Chọn một kiểu. Một kiểu, không phải hai hay ba. Trộn phong cách tư liệu thô mộc với tối giản màu be sẽ tạo ra chính kiểu lấy trung bình mà bạn đang cố tránh. Tên thư mục có tính mô tả nhưng bạn không thể xem trước bằng hình ảnh: hãy mở tệp `SKILL.md` bên trong kiểu bạn thích và đọc phần mô tả bảng màu cùng kiểu chữ—mọi thứ đều được nêu rõ.
5. ### Xây dựng trang tĩnh
Không có một hiệu ứng động nào. Trước tiên là kiểu chữ, khoảng cách và lưới. Yêu cầu tác nhân khởi động bản xem trước cục bộ rồi mở địa chỉ mà nó cung cấp. Để xem trên điện thoại, hãy nói: “chạy để các thiết bị khác trong mạng của tôi có thể mở”, và tác nhân sẽ cung cấp một địa chỉ.
6. ### Thêm một cảnh chuyển động
Chỉ một cảnh. Thường là màn hình đầu tiên: tiêu đề xuất hiện, còn một lớp nền di chuyển chậm hơn tiền cảnh. Đưa cho tác nhân tệp `llms.txt` của thư viện và mô tả cụ thể cảnh đó—thứ gì di chuyển, ở đâu và trong bao nhiêu mili giây. Đừng thay đổi độ mờ trên màn hình đầu tiên; có một phần riêng bên dưới giải thích lý do.
7. ### Thêm quy tắc giảm chuyển động
Áp quy tắc CSS và thiết lập JavaScript giảm chuyển động ở phần trợ năng. Thử trang khi bật giảm chuyển động trước xuất bản.
8. ### Xuất bản và kiểm tra tốc độ
Xuất bản lên một dịch vụ lưu trữ tĩnh miễn phí bất kỳ—Vercel, Netlify hoặc GitHub Pages. Yêu cầu tác nhân: “xuất bản dự án này lên Vercel và gửi cho tôi liên kết.” Chỉ sau khi xuất bản, hãy chạy URL kết quả qua PageSpeed Insights: dịch vụ này hoạt động với URL công khai và không thể xem trang cục bộ. Xem chỉ số “Largest Contentful Paint”—thời gian kết xuất phần tử lớn nhất; vùng xanh là tối đa 2.5 giây. Tác nhân có thể đo phiên bản cục bộ trước khi xuất bản: Chrome DevTools MCP sẽ mở trang trong Chrome và hiển thị cùng chỉ số.
Bước sáu là lúc dễ phá hỏng nhất công sức của năm bước trước.
## Vì sao quá nhiều hiệu ứng động khiến website trông giống sản phẩm AI hơn?
Điểm chính
Anthropic nói rõ điều này trong tài liệu skill thiết kế: chuyển động quá mức làm tăng ấn tượng rằng trang được tạo bằng AI. Theo mặc định, tác nhân thêm hiệu ứng hiện lần lượt vào mọi phần, tạo ra một trang mà mọi thứ đều giật giật và chẳng hướng sự chú ý đến đâu. Cách ngược lại mới hiệu quả: một cảnh có chủ đích trên màn hình đầu tiên, sau đó là sự tiết chế.
Đây là chỗ cách suy nghĩ của gần như tất cả những người quan tâm đến chủ đề này đổ vỡ: quá ít hiệu ứng động trông rẻ tiền, vậy thì phải thêm nhiều hơn.
Đôi khi ít hơn lại tốt hơn, và hiệu ứng động quá mức làm tăng cảm giác rằng thiết kế được tạo ra bằng máy.
— Anthropic, https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
Điều đó nằm ngay trong skill `frontend-design` mà bạn đã cài để cải thiện thiết kế. Anthropic cảnh báo không nên lạm dụng hiệu ứng ngay trong công cụ mà tác nhân dùng để trang trí trang.
Anthropic cũng liệt kê các kỹ thuật rập khuôn khác: dùng một con số lớn kèm chú thích nhỏ và điểm nhấn chuyển sắc làm phản hồi tiêu chuẩn cho mọi nhiệm vụ; dùng các khối đánh số như 01 / 02 / 03, vốn chỉ phù hợp khi thực sự có một trình tự.
Trên thực tế, lạm dụng trông như sau: tác nhân nhận nhiệm vụ “thêm hiệu ứng động” rồi thêm hiệu ứng cuộn hiện vào mọi phần. Tiêu đề trượt vào, ba thẻ lần lượt bật lên, lời chứng thực trượt từ bên cạnh, rồi chân trang mờ dần hiện ra. Mỗi hiệu ứng riêng lẻ đều ổn. Kết hợp lại, chúng tạo thành một trang không ngừng chuyển động và chẳng nhấn mạnh điều gì.
Website đang hoạt động thì khác: một cảnh có chủ đích, thường ở màn hình đầu tiên, rồi tiết chế sau đó. Chuyển động có tác dụng như nhấn mạnh—nó có ý nghĩa miễn là chỉ tập trung vào một từ.
Từ đó có một quy tắc cho câu lệnh. Hãy viết như sau: “tạo một cảnh trên màn hình đầu tiên và để mọi thứ khác ở trạng thái tĩnh.” Câu này chỉ khác “thêm hiệu ứng động” vài từ, nhưng kết quả tốt hơn cả một bậc độ lớn.
## Hiệu ứng động làm giảm tốc độ website như thế nào?
Điểm chính
Cạm bẫy chính: trình duyệt thậm chí không xem phần tử có độ mờ bằng không là ứng viên cho Largest Contentful Paint. Kỹ thuật tiêu chuẩn “ẩn phần rồi hiện ra khi cuộn”, nếu áp dụng ở màn hình đầu tiên, sẽ trực tiếp làm xấu chỉ số tốc độ chính. Ngoài ra, chỉ tạo hiệu ứng cho phép biến đổi và độ mờ—mọi thứ khác đều kích hoạt tính toán lại bố cục.
Ba chỉ số Google dùng để đánh giá trang gồm: thời gian kết xuất phần tử lớn nhất—không quá 2.5 giây; khả năng phản hồi thao tác—không quá 200 mili giây; và độ dịch chuyển bố cục—không quá 0.1. Các chỉ số được đo ở phân vị thứ 75 của lượt truy cập thực tế.
Hãy phân tích vì sao điều này quan trọng ở đây. Theo mặc định, tác nhân tạo hiệu ứng hiện như sau: đặt độ mờ của một phần bằng không, rồi bỏ thiết lập đó khi phần ấy đi vào vùng hiển thị. Nếu hiệu ứng hiện nằm ở màn hình đầu tiên, hình ảnh có thể đã tải và giải mã hoàn toàn, nhưng chỉ số vẫn không tính nó cho đến khi quá trình kết xuất bắt đầu. Tình hình còn tệ hơn nếu một tập lệnh xóa độ mờ sau khi tải—khi đó chỉ số phải đợi cả tập lệnh.
Có hai cách khắc phục. Hoặc bắt đầu hiệu ứng hiện với độ mờ nhỏ nhưng khác không thay vì bằng không, để lần kết xuất ban đầu được tính. Hoặc để nguyên độ mờ trên màn hình đầu tiên và chỉ tạo hiệu ứng dịch chuyển.
Vấn đề thứ hai là thứ gì dễ tạo hiệu ứng và thứ gì tốn kém.
Nếu có thể, hãy giới hạn hiệu ứng động ở các thuộc tính opacity và transform để chúng vẫn nằm ở giai đoạn tổng hợp của quy trình kết xuất.
— web.dev, https://web.dev/articles/animations-guide
Nói đơn giản: trình duyệt ghép hình ảnh từ các lớp, và thay đổi vị trí cùng độ mờ diễn ra ở bước cuối cùng, ít tốn kém nhất. Mọi thứ khác buộc trình duyệt tính toán lại trang. Số liệu trong cùng tài liệu: tạo hiệu ứng bằng độ lệch top và left mất 37 mili giây cho bố cục và 79 mili giây cho kết xuất; dùng transform cho cùng hiệu ứng hình ảnh thì cả hai đều bằng không.
Và đây là mâu thuẫn đáng nhớ: độ mờ dễ tổng hợp, nhưng lại khiến phần tử không đủ điều kiện cho chỉ số tốc độ. Vì thế, hiệu ứng rẻ cho trình duyệt và an toàn cho hiệu năng là hai chuyện khác nhau.
Một điều nữa về thuộc tính `will-change`, thứ mà các tác nhân thích rải khắp nơi “để tối ưu hóa”. Tài liệu MDN nói ngược lại:
Dùng will-change quá mức dẫn đến tiêu thụ bộ nhớ quá nhiều và buộc trình duyệt kết xuất phức tạp hơn khi cố chuẩn bị cho những thay đổi có thể xảy ra. Điều này làm giảm hiệu năng.
— MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
Tài liệu cũng nói thuộc tính này chỉ dành cho những vấn đề hiệu năng hiện hữu như một biện pháp cuối cùng. Nó không có tác dụng phòng ngừa. Một dòng như `will-change: transform, opacity` trên năm mươi phần tử là dấu hiệu điển hình của mã được tạo tự động.
Câu chuyện về dịch chuyển bố cục đơn giản hơn. Tài liệu của Google không đổ lỗi cho hiệu ứng động; trái lại, chuyển cảnh được cân nhắc kỹ giúp cập nhật nội dung mà không làm người đọc giật mình. Công thức vẫn vậy: đổi tỷ lệ bằng transform thay vì chiều rộng và chiều cao, và dịch chuyển bằng độ lệch thay vì tọa độ.
## Còn những người bị tổn hại về thể chất bởi chuyển động thì sao?
Điểm chính
Có tới 35% người trưởng thành trên bốn mươi tuổi ở Mỹ từng mắc rối loạn tiền đình. Với họ, hiệu ứng cuộn có thể gây buồn nôn và đau nửa đầu. Thiết lập hệ thống “giảm chuyển động” đã được mọi trình duyệt hỗ trợ hơn năm năm, nhưng tác nhân sẽ không thêm tính năng này trừ khi bạn yêu cầu. Ba dòng kiểu dáng cùng một dòng mã cho các dòng thời gian là đủ để xử lý.
Phần này quan trọng hơn phép lịch sự. Khách hàng của một chủ doanh nghiệp chính là những người từ bốn mươi tuổi trở lên.
Hiệp hội W3C mô tả hậu quả không hề giảm nhẹ: buồn nôn và đau nửa đầu, đôi khi nghiêm trọng đến mức người bệnh phải nằm xuống.
Cần cả quy tắc CSS và nhánh rõ trong thiết lập hoạt ảnh JavaScript; chỉ đọc tùy chọn không dừng timeline:
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
Có ba điểm cần ghi nhớ.
Hãy viết hiệu ứng động làm hành vi mặc định rồi tắt trong quy tắc này—như vậy trang sẽ suy giảm an toàn hơn so với làm ngược lại.
Đặc tả viết “loại bỏ, giảm bớt hoặc thay thế”—loại bỏ hoàn toàn thậm chí không phải lựa chọn đầu tiên. Thay một cú trượt vào mạnh bằng một lần mờ dần ngắn sẽ tốt hơn cắt bỏ hẳn: tắt mọi hiệu ứng động sẽ làm hỏng chỉ báo tải và thanh tiến trình.
Hoạt ảnh JavaScript cần xử lý tùy chọn riêng; ghi đè duration CSS không hủy timeline GSAP. Chỉ lưu `matchMedia(...).matches` vào biến không có tác dụng nếu setup không rẽ nhánh. Với GSAP, giữ phần tử nhìn thấy trong HTML/CSS thường rồi chỉ tạo chuyển động khi người dùng cho phép:
```js
// Run after GSAP and the page elements have loaded.
function mountMotion() {
const mm = gsap.matchMedia();
mm.add('(prefers-reduced-motion: no-preference)', () => {
gsap.from('.hero-title', { y: 24, duration: 0.35 });
});
return () => mm.revert();
}
const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.
```
Tiêu đề không được có style gốc ẩn hoặc dịch chuyển. Khi giảm chuyển động bật, nó còn hiển thị tĩnh. Nếu tùy chọn đổi lúc trang mở, GSAP hoàn tác hoạt ảnh khi query không khớp. `mm.revert()` cũng xóa hoạt ảnh thu thập lúc teardown. Với Motion, triển khai nhánh tương đương trong setup thư viện; riêng CSS chưa đủ. Xem [vòng đời và cleanup GSAP matchMedia](https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/).
Ngoài ra còn có một tiêu chí chính thức về khả năng tiếp cận cần ghi nhớ. WCAG 2.2.2, tiêu chí Cấp A, yêu cầu rằng nếu bất kỳ nội dung nào tự động di chuyển, nhấp nháy hoặc cuộn, kéo dài hơn năm giây và xuất hiện cùng nội dung khác, người dùng phải có khả năng dừng nó. Quy định này áp dụng cho băng chuyền tự xoay và dải chữ chạy vô hạn, những thứ tác nhân thường dễ dàng chèn vào.
## Bảy chỗ dễ hỏng
Điểm chính
Hầu hết lỗi đều bắt nguồn từ ba nguyên nhân: màn hình đầu tiên bị tạo hiệu ứng, có quá nhiều chuyển động hoặc tạo hiệu ứng cho sai thuộc tính. Ép cuộn là vấn đề riêng—nghiên cứu về khả năng sử dụng trực tiếp cho thấy nó có hại. Thời lượng hiệu ứng hữu ích là 100 đến 400 mili giây, trong khi tác nhân thường mặc định dùng trọn một giây.
**1. Màn hình đầu tiên bị ẩn cho đến khi mờ dần hiện ra.** Phần tử có độ mờ bằng không không được tính là ứng viên cho chỉ số kết xuất. Đây là sai lầm gây tốn kém nhất vì nó ảnh hưởng đến chỉ số tác động lên thứ hạng tìm kiếm.
**2. Mọi thứ đều có hiệu ứng.** Mọi phần đều trượt vào, mọi thẻ đều bật lên. Anthropic nói rõ rằng điều này làm tăng ấn tượng về một thiết kế được tạo tự động.
**3. Ép cuộn.** Khi website thay thế hành vi cuộn thông thường của con lăn chuột bằng logic “điện ảnh” riêng.
Trong cùng nghiên cứu, phần lớn người tham gia gặp ít nhất một chút mất phương hướng.
**4. Tạo hiệu ứng cho thuộc tính bố cục.** Dùng tọa độ và kích thước thay vì phép biến đổi. 37 và 79 mili giây so với không mili giây.
**5. Hiệu ứng quá dài.** Phạm vi hữu ích là 100 đến 400 mili giây, với 400 đã rất chậm và chỉ phù hợp với các chuyển động lớn. Tác nhân thường mặc định dùng trọn một giây.
Theo kết quả của ông, khoảng thời lượng hữu ích là 100 đến 400 mili giây; 400 đã rất chậm và chỉ phù hợp với những chuyển động lớn. Tác nhân thường mặc định dùng trọn một giây.
**6. Không có quy tắc giảm chuyển động.** Tác nhân sẽ không tự thêm quy tắc này.
**7. Website chậm hơn sau mỗi lần tương tác.** Vấn đề đặc thù của React: hiệu ứng được tạo mà không tham chiếu đến phần tử và không có bước dọn dẹp sẽ nhân lên sau mỗi lần thành phần cập nhật. Trang dần chậm đi mà chẳng rõ lý do.
Có một cạm bẫy thứ tám. Cách làm “tác nhân chụp ảnh màn hình rồi sửa những gì nó thấy” rất hiệu quả với trang tĩnh, nhưng với các thành phần chuyển động, tác nhân mắc vào vòng lặp chỉnh sửa vô tận: nó nhìn thấy khung hình giữa chừng, tưởng đó là lỗi, sửa lại rồi thấy một khung hình giữa chừng khác. Hơn nữa, mỗi ảnh chụp màn hình đều tiêu tốn ngữ cảnh.
## Chi phí bao nhiêu, và làm thế nào để tránh dùng hết hạn mức cả tháng cho một website?
Điểm chính
Mọi công cụ trong thiết lập này đều miễn phí; bạn trả tiền cho chính công việc của tác nhân. Hiệu ứng động tiêu tốn hạn mức nhanh hơn công việc bố cục thông thường, vì bạn không thể xác minh kết quả bằng cách đọc mã: mỗi lần chỉnh sửa đều cần đọc lại tệp và lặp thêm nhiều lượt. Xây dựng từng cảnh một, giữ `CLAUDE.md` ngắn gọn và tắt vòng lặp chụp màn hình với các thành phần chuyển động đều có ích.
Một câu chuyện quen thuộc trong cộng đồng vibe-coding nói tiếng Anh: có người xây dựng trang hào nhoáng với hiệu ứng cuộn xuyên không gian, đăng kết quả lên, rồi cuộc thảo luận cho thấy website duy nhất đó đã dùng hết hạn mức cả tháng.
Điều đó có thể dự đoán được. Hiệu ứng động tốn kém hơn công việc bố cục thông thường vì nhiều lý do cùng lúc. Không thể xác minh kết quả bằng cách đọc mã; phải qua nhiều lượt lặp. Mỗi lần chỉnh sửa đều phải đọc lại tệp. Và vòng lặp chụp màn hình trên thành phần chuyển động tạo thêm những lượt không cần thiết.
Điều gì có ích:
Xây dựng từng cảnh một và khóa kết quả lại. Yêu cầu một lần kiểu “thêm hiệu ứng động cho cả website” chắc chắn sẽ tiêu quá mức. Bạn có thể tắt bước xác minh bằng ảnh chụp màn hình đối với các thành phần chuyển động rồi tự kiểm tra bằng mắt. Giữ `CLAUDE.md` ngắn gọn để các quy tắc không chiếm ngữ cảnh trong mọi yêu cầu. Và cung cấp trước cho tác nhân tệp `llms.txt` của thư viện, nếu không nó sẽ bịa ra cách kết nối lỗi thời rồi tự sửa lỗi do mình tạo ra.
Bài viết [vì sao Claude Code đọc lại toàn bộ dự án](https://ailoot.ai/blog/vi/claude-code-rereads-project/) giải thích token được dùng vào đâu khi làm việc trên dự án; bài viết [cách không dùng hết hạn mức Claude Code](https://ailoot.ai/blog/vi/claude-code-token-limits-saving/) đề cập cách kiểm soát mức sử dụng.
## Tiếp theo là gì?
Điểm chính
Cách tiếp cận này hiệu quả: quy tắc chống rập khuôn, một định hướng hình ảnh, một cảnh chuyển động, kiểm tra tốc độ và tôn trọng thiết lập của người đọc. Điểm phức tạp nằm ở việc đưa trước đúng thông tin vào ngữ cảnh của tác nhân, để nó có cơ sở xây dựng. Bản thân hiệu ứng động là phần việc dễ nhất.
Hãy xây dựng trang đầu tiên bằng tám bước. Chọn một định hướng hình ảnh, tạo một cảnh trên màn hình đầu tiên và kiểm tra tốc độ.
### Nguồn tham khảo
- [anthropics/skills](https://github.com/anthropics/skills) - các skill chính thức của Anthropic, gồm frontend-design
- [GSAP: Giá cả](https://gsap.com/pricing) - xác nhận rằng thư viện miễn phí
- [Bản phát hành GSAP 3.13](https://gsap.com/blog/3-13) - những gì trở nên miễn phí vào cuối tháng 4 năm 2025
- [GSAP: llms.txt](https://gsap.com/llms.txt) - tài liệu dành cho mô hình ngôn ngữ
- [GSAP: ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger) - plugin tạo hiệu ứng cuộn
- [Motion](https://motion.dev/) - lựa chọn mã nguồn mở theo giấy phép MIT
- [web.dev: Hướng dẫn về hiệu ứng động](https://web.dev/articles/animations-guide) - nên tạo hiệu ứng cho thuộc tính nào
- [MDN: will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) - vì sao không nên đặt trước thuộc tính này
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - thiết lập giảm chuyển động
- [WCAG 2.2.2: Tạm dừng, Dừng, Ẩn](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - tiêu chí về khả năng tiếp cận
- [W3C: Hiệu ứng động từ tương tác](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - ảnh hưởng đến rối loạn tiền đình
- [Mobbin MCP](https://mobbin.com/mcp) - thư viện tham khảo giao diện cho tác nhân
Cho các bước tiếp theo—[Ailoot](https://ailoot.ai/).
## Câu hỏi thường gặp
### Vì sao CSS giảm chuyển động vẫn để GSAP chạy?
Ghi đè duration CSS không hủy timeline JavaScript. Tạo GSAP trong nhánh matchMedia no-preference và giữ phần tử gốc nhìn thấy để chế độ giảm chuyển động còn trang tĩnh.
### Ngăn hoạt ảnh tích lũy sau điều hướng thế nào?
Gọi cleanup do thiết lập hoạt ảnh trả về khi bỏ trang hoặc component. Trong ví dụ, mm.revert() khôi phục style và xóa hoạt ảnh được instance matchMedia đó thu thập.
## Ailoot · Công ty và danh mục dự án của công ty
Ailoot dựa trên kinh nghiệm vận hành tích lũy, cơ sở khách hàng lớn, dịch vụ ổn định và việc kiểm soát KPI liên tục.
Công ty và danh mục dự án của công ty: hàng triệu khách hàng; doanh số hàng tỷ mỗi tháng.
Ailoot áp dụng kinh nghiệm vận hành này để cung cấp quyền truy cập API vào các tính năng AI trong sản phẩm của khách hàng, tác tử, ứng dụng và quy trình tự động hóa.