Design on the Flank là gì?
Design on the Flank là một kỹ năng AI để xây dựng Framer Code Components với Three.js, WebGL và GSAP. Khi được sử dụng cùng Codex, Claude, Claude Code hoặc ChatGPT, công cụ này giúp bạn tạo cảnh 3D, hiệu ứng shader, hoạt ảnh dựa trên thao tác cuộn và các tương tác tùy chỉnh từ mô tả bằng văn bản hoặc hình ảnh tham khảo.
Mỗi component được tạo sẽ được cung cấp dưới dạng một tệp TSX hoàn chỉnh mà bạn có thể sao chép vào Framer. Các cài đặt của component được hiển thị trong bảng Properties của Framer, cho phép bạn thay đổi nội dung, màu sắc, hình ảnh và thông số chuyển động mà không cần chỉnh sửa mã.
Tính năng chính
- Đồ họa 3D: Tạo cảnh sản phẩm, hệ thống hạt, vật liệu, ánh sáng và tương tác bằng chuột hoặc cảm ứng.
- Hiệu ứng WebGL: Tạo hiệu ứng biến dạng hình ảnh, gợn sóng, chuyển cảnh và shader tùy chỉnh.
- Chuyển động GSAP: Sử dụng timeline, hiệu ứng văn bản, chuỗi chuyển cảnh và hoạt ảnh gắn với vị trí cuộn.
- Tích hợp Framer: Tạo bố cục responsive, Property Controls và các component có thể sử dụng trực tiếp trong Framer.
- Chỉnh sửa component: Mở rộng component hiện có hoặc sửa lỗi trong khi vẫn giữ nguyên các cài đặt nằm ngoài phạm vi được yêu cầu.
Chọn nền tảng AI
Dự án hỗ trợ nhiều quy trình làm việc với AI. Hãy chọn công cụ phù hợp với nền tảng bạn đang sử dụng.
- Codex: Yêu cầu AI cài đặt skill. Đọc hướng dẫn cài đặt Codex.
- Claude: Tải gói skill và thêm vào mục Skills của Claude. Xem hướng dẫn cài đặt Claude.
- Claude Code: Yêu cầu AI cài đặt skill trong môi trường làm việc của bạn. Làm theo hướng dẫn Claude Code.
- ChatGPT: Tải tệp kiến thức khởi đầu và đính kèm vào cuộc trò chuyện. Xem hướng dẫn ChatGPT.
Cài đặt skill bằng Codex
Cách thiết lập nhanh nhất là yêu cầu Codex cài đặt skill trực tiếp từ repository.
Cài skill Design on the Flank từ https://github.com/Chien1618/design-on-the-flank/tree/main/skills/design-on-the-flankSau khi cài đặt, hãy bắt đầu một cuộc trò chuyện mới và mô tả component Framer bạn muốn tạo. Yêu cầu trên được viết bằng tiếng Việt, phù hợp với README của dự án, nhưng bạn có thể điều chỉnh quy trình tương tự theo ngôn ngữ mình muốn.
Sử dụng tệp kiến thức với ChatGPT
Đối với ChatGPT, hãy đính kèm tệp kiến thức khởi đầu vào một cuộc trò chuyện, sau đó mô tả component bạn muốn tạo. Hãy nêu rõ hành vi trực quan, mô hình tương tác và các cài đặt bạn muốn hiển thị trong Framer.
Nếu ChatGPT yêu cầu thêm tài liệu hoặc không thể mở tài nguyên được liên kết, hãy tải tệp được yêu cầu xuống và đính kèm vào cùng cuộc trò chuyện. Dự án cung cấp hướng dẫn ChatGPT chi tiết.
Tạo component Framer từng bước
- Mô tả kết quả mong muốn. Giải thích hiệu ứng trực quan, tương tác người dùng và các tham số cần có khả năng điều chỉnh trong Framer. Bạn cũng có thể cung cấp hình ảnh, video tham khảo hoặc mã hiện có.
- Yêu cầu mã hoàn chỉnh. Yêu cầu AI cung cấp một tệp TSX hoàn chỉnh hoặc bộ khung mã hoàn chỉnh khi component cần thêm tài nguyên.
- Đưa mã vào Framer. Tạo một Framer Code Component, thay thế nội dung mẫu bằng mã được tạo và thêm component vào trang. Sử dụng hướng dẫn tích hợp Framer để xem quy trình chi tiết.
- Tùy chỉnh và kiểm thử. Điều chỉnh các cài đặt được hiển thị trong bảng Properties, sau đó mở Preview để kiểm tra hoạt ảnh, thao tác cuộn, đầu vào chuột, đầu vào cảm ứng và hành vi responsive.
Viết prompt hiệu quả
Một prompt tốt mô tả cả giao diện và các điều khiển bạn cần. Hãy nêu rõ vai trò của component, hành vi hoạt ảnh, mô hình tương tác và những giá trị có thể chỉnh sửa thông qua Properties.
Ví dụ, bạn có thể yêu cầu một khu vực hero 3D như sau:
Dùng Design on the Flank tạo hero sản phẩm 3D cho Framer, chuyển góc nhìn theo cuộn và cho phép chỉnh model, ánh sáng, nội dung trong Properties.Bằng tiếng Anh, yêu cầu tương tự sẽ đề nghị tạo một hero sản phẩm 3D cho Framer, với góc camera thay đổi theo thao tác cuộn và các cài đặt model, ánh sáng, nội dung có thể chỉnh sửa trong Properties. Bạn có thể tìm thêm ví dụ trong hướng dẫn prompt mẫu của dự án.
Làm việc với tài nguyên bên ngoài
Một số component cần model 3D, hình ảnh hoặc dữ liệu riêng tư khác. Khi đó, hãy cung cấp tài nguyên liên quan cho AI và làm theo hướng dẫn thiết lập đi kèm với mã được tạo. Đừng cho rằng component phụ thuộc vào tài nguyên sẽ hoạt động trước khi các tài nguyên bắt buộc được cấu hình.
Sau khi đưa component vào Framer, hãy sử dụng Properties cho các cài đặt được hiển thị bởi mã đã tạo. Những cài đặt này có thể bao gồm nội dung, màu sắc, hình ảnh và thông số chuyển động, tùy thuộc vào component.
Mẹo nâng cao
Mô tả tương tác chính xác
Đối với các component Three.js và WebGL, hãy làm rõ trải nghiệm cần phản hồi với chuột, cảm ứng, vị trí cuộn hay kết hợp nhiều loại đầu vào. Hãy mô tả hiệu ứng bắt đầu, thay đổi và kết thúc như thế nào để hoạt ảnh được tạo khớp với hành vi mong muốn.
Tách các cài đặt có thể chỉnh sửa khỏi chi tiết triển khai
Cho AI biết những giá trị nào cần được cung cấp trong bảng Properties của Framer. Điều này giúp duy trì khả năng điều chỉnh nội dung và các tham số trực quan, đồng thời giữ phần triển khai bên trong thành phần TSX.
Bảo toàn cấu hình hiện có khi chỉnh sửa
Khi yêu cầu AI sửa đổi một thành phần hiện có, hãy xác định tính năng hoặc lỗi nằm trong phạm vi và yêu cầu giữ nguyên các cài đặt không liên quan. Design on the Flank đặc biệt hỗ trợ mở rộng thành phần hoặc khắc phục sự cố mà không thay đổi cấu hình nằm ngoài nội dung được yêu cầu.
Kiểm thử trong Preview
Sử dụng Framer Preview để kiểm tra bố cục thích ứng, các chuyển tiếp khi cuộn, tương tác con trỏ, hành vi cảm ứng và việc tải tài nguyên. Nếu cần thay đổi, hãy mô tả vấn đề quan sát được cùng kết quả mong muốn trong yêu cầu tiếp theo.
Khắc phục sự cố và tài liệu
Đối với các vấn đề thường gặp, hãy tham khảo hướng dẫn khắc phục sự cố và các câu hỏi thường gặp của dự án. Tài liệu cũng bao gồm hướng dẫn từng bước để chuyển mã đã tạo vào Framer.
Design on the Flank tích hợp kiến thức về Framer và Three.js từ Framer Labs cùng các kỹ năng GSAP chính thức từ GreenSock. Hãy xem lại điều khoản sử dụng và thông tin ghi nhận bên thứ ba của dự án trước khi sử dụng.
Kết luận
Design on the Flank cung cấp quy trình thực tế có AI hỗ trợ để tạo Framer Code Components với Three.js, WebGL và GSAP. Cài đặt skill hoặc đính kèm tệp kiến thức của skill, mô tả trải nghiệm bạn muốn, sao chép TSX được tạo vào Framer, sau đó tinh chỉnh kết quả thông qua bảng Properties và Preview.