AI hiện nay có thể dựng một giao diện khá nhanh. Chỉ cần mô tả vài câu, chúng ta đã có component, animation, responsive layout, thậm chí cả một trang hoàn chỉnh. Nhưng có một vấn đề mà mình gặp khá thường xuyên: UI chạy được chưa chắc đã là UI đẹp.
Một animation có thể đúng về mặt kỹ thuật nhưng easing lại không tự nhiên. Một tooltip có thể hoạt động hoàn hảo nhưng delay hơi khó chịu. Một interface nhìn qua khá ổn nhưng khi dùng trên mobile lại xuất hiện những chi tiết rất “web”: tap bị flash, input làm zoom màn hình hay animation hơi giật.
Đó cũng chính là vấn đề mà repository Skills For Designers and Engineers của Emil Kowalski muốn giải quyết. Repo này không phải UI framework hay thư viện component mới. Emil Kowalski Skills là một bộ AI skills dành cho designer và engineer, tập trung vào những quyết định nhỏ nhưng ảnh hưởng rất nhiều đến chất lượng giao diện: animation, interaction, mobile experience, lựa chọn UI library và cả cách kiểm tra UI trong những tình huống xấu nhất.
Khi AI biết code nhưng chưa chắc đã có “taste”
Một trong những ý mình thích nhất trong repo này là quan điểm khá đơn giản: AI agent có thể viết code rất nhanh, nhưng chưa chắc có khả năng đưa ra những quyết định thiết kế tốt.
Ví dụ một enter animation đáng lẽ nên dùng ease-out, agent lại chọn ease-in. Hoặc thay vì sử dụng shadow nhẹ và semi-transparent để tạo chiều sâu, AI có thể thêm một border đặc khiến component trông cứng hơn.
Từng lỗi riêng lẻ rất nhỏ. Nhưng khi cộng hàng chục chi tiết như vậy vào một sản phẩm, giao diện sẽ có cảm giác hơi “AI generated” dù rất khó chỉ rõ chính xác vấn đề nằm ở đâu.
Các skill trong repository này đóng vai trò giống một lớp kinh nghiệm bổ sung cho agent. Thay vì chỉ yêu cầu AI “làm animation đẹp hơn”, chúng ta cung cấp cho nó những nguyên tắc cụ thể về easing, duration, gesture, performance hay interaction để agent có cơ sở đưa ra quyết định tốt hơn.
Điểm thú vị là Emil cũng không xem AI như thứ thay thế chuyên môn. Ngược lại, quan điểm của repo là domain expertise vẫn cực kỳ quan trọng; AI chỉ giúp khuếch đại những kiến thức đó và đưa chúng vào workflow nhanh hơn.
Emil Kowalski Skills có gì đáng chú ý?
Phần mạnh nhất của repository hiện tại nằm ở animation và interaction.
Skill chính là emil-design-eng, tập hợp khá nhiều nguyên tắc liên quan đến animation và UI design. Nếu thường xuyên dùng AI để viết frontend, đây có thể xem như điểm bắt đầu hợp lý nhất.
Từ đó có những skill chuyên sâu hơn như animate, giúp agent lựa chọn curve, duration và property phù hợp khi xây một animation mới; hay review-animations, dùng để review những animation đã có theo một bộ nguyên tắc chặt chẽ hơn.
Nếu một sản phẩm đã có khá nhiều motion, improve-animations thú vị hơn vì nó có thể audit animation trong toàn bộ codebase rồi tạo ra các kế hoạch sửa theo mức độ ưu tiên. Ngược lại, remove-animations lại đi theo hướng khá hay: tìm những animation không cần thiết và loại bỏ chúng.
Không phải chỗ nào có chuyển động cũng tốt.
Một keyboard shortcut, tooltip hay section xuất hiện trên màn hình đôi khi không cần fade hoặc delay. Việc biết không animate khi nào quan trọng chẳng kém việc biết animate thế nào.
Repo cũng có animation-performance, tập trung vào những trường hợp animation drop frame hoặc chạy không mượt. Đây là nhóm vấn đề AI coding agent thường xử lý chưa tốt nếu chỉ nhận một prompt kiểu “optimize animation”.
Nếu đang làm React Native hoặc Expo, có riêng animate-expo cho gesture, bottom sheet, haptic feedback, screen transition và những vấn đề liên quan đến việc giữ animation khỏi JS thread.
Không chỉ có animation
Một số skill khác lại rất hữu ích ở góc nhìn product UI.
mobile-native tập trung vào việc khiến một web app khi dùng trên điện thoại có cảm giác gần với native app hơn. Những lỗi nhỏ như sticky hover state, tap highlight, 100vh, safe area, input zoom hay tap lag đều được đưa vào phạm vi xử lý.
Có một skill mình thấy đặc biệt hữu ích trong quá trình làm sản phẩm là break-ui. Thay vì nhìn UI bằng dữ liệu đẹp, skill này cố tình đưa vào những trường hợp xấu: tên cực dài, email bất thường, số liệu rất lớn, danh sách rỗng hay label dài. Đây chính là kiểu kiểm thử mà chúng ta rất dễ bỏ qua khi đang tập trung hoàn thiện happy path.
pick-ui-library lại giải quyết một vấn đề khác của AI coding: agent rất thích tự viết lại những thứ vốn đã có thư viện tốt. Skill này hướng agent về những thư viện đáng tin cậy cho từng nhu cầu, thay vì tự dựng một toast component mới hoặc vô tình cài một package đã lâu không còn được duy trì.
Ngoài ra còn có prototype, dùng để tạo nhiều phương án UI khác nhau và chuyển qua lại giữa chúng. Với designer hoặc frontend engineer đang thử nhiều hướng thiết kế, workflow này khá gần với cách chúng ta thực sự iterate UI.
Cài đặt Emil Kowalski Skills
Cách cài khá đơn giản. Repository hỗ trợ hệ sinh thái skills, vì vậy chỉ cần chạy:
npx skills@latest add emilkowalski/skillsSau khi thêm vào môi trường agent hỗ trợ skills, các hướng dẫn trong repository có thể được sử dụng như những năng lực bổ sung trong quá trình làm việc.
Điểm mình thích ở cách tiếp cận này là chúng ta không cần nhét một prompt thiết kế dài vài nghìn chữ vào mỗi phiên làm việc.
Thay vào đó, kiến thức được chia thành từng skill tương ứng với công việc: cần review animation thì gọi skill review, cần tối ưu performance thì dùng skill performance, muốn thử phá UI bằng edge case thì dùng break-ui.
Workflow vì thế gọn và dễ tái sử dụng hơn khá nhiều.
Nên dùng thế nào để hiệu quả?
Mình không nghĩ nên bật tất cả các skill rồi mong AI tự xử lý mọi thứ.
Cách tốt hơn là xem chúng như những chuyên gia nhỏ được gọi vào từng giai đoạn.
Khi vừa dựng component, có thể dùng skill thiết kế hoặc animation. Sau khi interaction tương đối hoàn chỉnh, chạy review-animations. Trước khi ship, dùng break-ui kiểm tra dữ liệu cực đoan và mobile-native nếu sản phẩm có lượng người dùng mobile lớn.
Với codebase đã tồn tại lâu, improve-animations hoặc animation-performance lại hợp lý hơn vì mục tiêu lúc đó không phải tạo thêm hiệu ứng mà là tìm những điểm đang gây vấn đề.
Nói cách khác, skill tốt nhất không phải skill được dùng nhiều nhất mà là skill xuất hiện đúng thời điểm.
Một vài điểm cần lưu ý
Đây không phải design system và cũng không thay thế designer.
Các skill chủ yếu đưa kinh nghiệm và nguyên tắc của tác giả vào context của AI. Chúng có thể giúp agent đưa ra quyết định tốt hơn, nhưng kết quả cuối cùng vẫn phụ thuộc vào sản phẩm, thương hiệu và đối tượng người dùng.
Một animation rất phù hợp với landing page chưa chắc phù hợp với dashboard nghiệp vụ. Một UI có phong cách giống Linear hay Vercel cũng không mặc nhiên là lựa chọn đúng cho mọi sản phẩm.
Bên cạnh đó, repository mang khá rõ quan điểm thiết kế của Emil Kowalski. Theo mình đây vừa là điểm mạnh vừa là điều nên nhận biết trước khi dùng.
Nếu gu thiết kế của bạn gần với những sản phẩm hiện đại, tối giản, chú trọng interaction và motion thì bộ skill này rất dễ hợp. Nếu đang làm một hệ thống có quy chuẩn riêng rất chặt, tốt hơn nên xem đây như một nguồn tham khảo rồi kết hợp thêm rule hoặc skill nội bộ của team.
Có đáng thử không?
Nếu chỉ dùng AI để generate vài landing page đơn giản, có thể bạn chưa thấy quá nhiều khác biệt.
Nhưng nếu AI đã bắt đầu tham gia sâu hơn vào workflow frontend — dựng component, prototype interaction, review UI hoặc sửa code production — thì những repository như emilkowalski/skills bắt đầu trở nên rất đáng quan tâm.
Điểm giá trị của nó không nằm ở việc giúp AI viết thêm code.
Nó giúp AI đưa ra những quyết định nhỏ tốt hơn.
Mà với UI/UX, trải nghiệm tốt thường được tạo nên chính từ hàng trăm quyết định nhỏ như vậy.
Repository: github.com/emilkowalski/skills
Để lại một bình luận