AI Frontend UI & Motion Stack Playbook
Minh Khoa
Tác giả
Dùng AI để làm website rất nhanh.
Nhưng cũng vì quá nhanh, chúng ta thường bỏ qua một quyết định quan trọng: Dự án này thực sự nên dùng công nghệ gì?
Bạn chỉ cần nói:
Hãy tạo cho tôi một website thật đẹp và có animation.
AI có thể lập tức chọn Next.js, Tailwind CSS, shadcn/ui, Motion, GSAP, Three.js và thêm một loạt thư viện hiệu ứng khác.
Website có thể chạy. Nhưng chưa chắc đó là stack phù hợp.
Một landing page, dashboard, portfolio sáng tạo và website thương mại điện tử không nên dùng chung một công thức.
Vấn đề không phải là thiếu công nghệ
Frontend hiện nay có quá nhiều lựa chọn:
- React, Vue, Svelte hay Astro?
- Tailwind hay CSS Modules?
- shadcn/ui, Base UI, Radix hay Material UI?
- Motion, GSAP hay chỉ cần CSS animation?
- Lottie hay Rive?
- Three.js, PixiJS hay hoàn toàn không cần canvas?
- Có nên dùng smooth scroll không?
- Animation đẹp nhưng có chạy tốt trên mobile không?
Mỗi công nghệ đều có điểm mạnh riêng. Nhưng nếu lựa chọn sai, dự án rất dễ biến thành một “nồi lẩu dependency”: nhiều thư viện cùng làm một việc, khó bảo trì, tải chậm và không còn nhất quán về UI.
AI biết rất nhiều công nghệ, nhưng nó không tự động biết bạn muốn sản phẩm như thế nào.
Vì vậy, trước khi yêu cầu AI code, chúng ta cần cho nó một quy trình lựa chọn.
Tôi tạo một Frontend Stack Playbook cho AI
Đây là một file Markdown có thể đặt vào bất kỳ dự án frontend nào.
Nó không phải starter template và cũng không phải danh sách package bắt buộc phải cài.
Nó là một playbook hướng dẫn AI cách suy nghĩ trước khi chọn frontend stack.
Trong file có:
- Danh mục framework và meta-framework.
- UI kit, headless component và design system.
- Styling, token và CSS architecture.
- Animation engine và page transition.
- Rive, Lottie, SVG, Canvas và 3D.
- Chart, table, form, carousel, drag and drop và editor.
- Quy tắc về accessibility, performance và reduced motion.
- Các liên kết tài liệu chính thức để AI kiểm tra thông tin mới nhất.
- Bộ câu hỏi giúp AI hiểu dự án trước khi đề xuất công nghệ.
Điểm quan trọng nhất là file yêu cầu AI:
Chưa được code và chưa được cài package cho đến khi người dùng chốt stack.