Bạn từng gõ vào Claude Code một câu kiểu “làm cho tôi cái dashboard” rồi ngồi xem nó tự vẽ ra giao diện chưa? Nhìn thì có vẻ ổn, thậm chí khá đẹp mắt. Nhưng thử hỏi kỹ hơn: nó có giải đúng vấn đề không? Cấu trúc thông tin có hợp lý hay chỉ là AI “đoán mò”? Màu sắc, khoảng cách, font chữ có nhất quán không?
Phần lớn câu trả lời là không. Cái bị thiếu chính là phần việc vô hình mà designer chuyên nghiệp vẫn làm trước khi bắt tay vào code: hỏi yêu cầu, viết brief, dựng cấu trúc thông tin, chọn design token, chia nhỏ công việc, rồi review lại. Julian Oczkowski, một designer có gần 30 năm kinh nghiệm ở Adobe, IBM, Danone, đã đóng gói cả quy trình đó thành một bộ skill (file hướng dẫn cho AI) dùng được trong Claude Code, Cursor và nhiều công cụ agent khác. Repo có tên designer-skills, hiện đang có khoảng 300 sao trên GitHub.
Cài đặt designer-skills thế nào
Chỉ cần một dòng lệnh trong terminal:
npx skills add julianoczkowski/designer-skillsLệnh này mở ra một CLI tương tác, cho bạn chọn cài skill nào, nhắm vào công cụ agent nào (Claude Code, Cursor, Codex, Windsurf…) và cài ở phạm vi dự án hay toàn cục.
Lưu ý nhỏ: thật ra bộ này chạy được trên hơn 40 công cụ agent khác nhau, không riêng gì Claude Code. Nếu bạn đang dùng Cursor hay Codex thì vẫn cài được bình thường.
Quy trình gồm 7 bước (cộng 1 skill điều phối)
Repo designer-skills thực chất có 8 skill, trong đó có một skill tên /design-flow đóng vai trò nhạc trưởng — chạy lệnh này, AI sẽ tự dẫn bạn đi qua toàn bộ quy trình bên dưới, cho phép bỏ qua bước nào không cần và xác nhận lại sau mỗi bước.
1. Grill Me — AI “tra khảo” bạn trước
Đây là bước quan trọng nhất, dù đoạn code đứng sau nó khá ngắn gọn. AI sẽ hỏi dồn dập về dự án của bạn: loại ứng dụng gì, ai dùng, quy mô ra sao, có tình huống đặc biệt nào không. Bạn có thể mất 20 phút để trả lời hết — và đó chính là mục đích. Nếu bạn còn chưa nói rõ được mình muốn xây gì, AI cũng không nên tự ý xây thay bạn. Kết quả là một bản tóm tắt buổi “tra khảo”, đóng vai trò giao kèo giữa bạn và AI trước khi làm bất cứ điều gì.
Tác giả cũng ghi rõ ý tưởng này lấy cảm hứng từ bộ skill của Matt Pocock, rồi anh chỉnh lại cho phù hợp quy trình của designer.
2. Design Brief — bản tóm tắt thiết kế
Sau khi “tra khảo” xong, AI viết ra một bản brief thiết kế. Nhưng nó không chỉ tóm tắt lại những gì bạn vừa trả lời — nó còn tự soi vào codebase hiện có để xem đã có component nào, hệ thống thiết kế nào, pattern nào đang tồn tại rồi. Trước khi chốt brief, nó còn hỏi thêm về cảm xúc, phong cách hình ảnh bạn muốn, thậm chí gợi ý tham chiếu như Linear hay Google Admin Console tùy lĩnh vực.
3. Information Architecture — dựng khung cấu trúc
AI đọc lại toàn bộ tài liệu đã có, rồi sắp xếp cấu trúc thông tin: trang nào, điều hướng ra sao, phân cấp nội dung thế nào. Nếu tính năng phức tạp — ví dụ luồng nhiều trang hay làm lại toàn bộ navigation — nó sẽ hỏi thêm trước khi chốt.
4. Design Tokens — bộ “nguyên liệu” màu sắc, font, khoảng cách
Nếu dự án chưa có hệ thống thiết kế sẵn, skill này sẽ tạo ra một bộ design token hoàn chỉnh dưới dạng CSS custom properties: màu sắc, kiểu chữ, khoảng cách, độ nổi (elevation), bo góc… Theo README của repo, bộ token này còn hỗ trợ cả bảng màu sáng lẫn tối. Nếu dự án đã có sẵn hệ thống thiết kế, bước này sẽ tự động bị bỏ qua vì bước 2 đã phát hiện ra rồi.
5. Brief to Tasks — chia nhỏ việc cần làm
Bản brief được bẻ thành danh sách công việc cụ thể. AI đọc lại toàn bộ tài liệu, xác định việc nào phụ thuộc việc nào, rồi lưu thành một file markdown theo dõi tiến độ từng đầu việc — làm nền trước, giao diện chính sau, rồi mới đến responsive và tinh chỉnh.
6. Frontend Design — bắt tay dựng giao diện
Đây là bước “ra sản phẩm” thật sự. AI dùng toàn bộ brief, cấu trúc thông tin, token và danh sách task ở trên để dựng component, trang, layout — không phải code random mà là code có chủ đích, bám theo mọi quyết định đã chốt từ trước. Theo README, skill này có tới 8 “triết lý thẩm mỹ” cho bạn chọn (hoặc để AI tự chọn theo ngữ cảnh) như Dieter Rams (tối giản chức năng), Brutalist (thô mộc, không tô vẽ), Scandinavian (ấm áp, tiết chế)… và luôn dựng giao diện theo hướng mobile-first trước, rồi mới mở rộng lên desktop.
7. Design Review — tự chấm điểm lại
Sau khi giao diện đã ra hình hài, skill này soát lại kết quả. Bạn có thể dán ảnh chụp màn hình thủ công, hoặc dùng thêm một MCP server tên Playwright để tự động hóa toàn bộ: Claude Code sẽ tự mở trình duyệt ẩn, đi qua từng trang, chụp ảnh rồi tự chấm dựa trên các ảnh đó — không cần bạn động tay. Bước review sẽ chỉ ra những lỗi như layout trống trải, biểu đồ sắp xếp sai thứ tự, thiếu chế độ tối, hay các vấn đề về khả năng tiếp cận (accessibility), sau đó đề xuất và có thể tự sửa luôn.
Kết quả có thật sự tốt không?
Tác giả bài viết gốc kể lại rằng chỉ từ một câu mô tả mơ hồ như “tôi muốn làm ứng dụng quản lý tài sản IT”, quy trình 7 bước này đã ra được một ứng dụng hoàn chỉnh với dashboard, theo dõi tài sản, báo cáo, bộ lọc, sắp xếp, trạng thái rỗng, hộp thoại chỉnh sửa và điều hướng đàng hoàng — kèm điểm Lighthouse 91 về hiệu năng và 100 về khả năng tiếp cận.
đây là số liệu từ một lần demo cá nhân của tác giả, chưa có kiểm chứng độc lập. Kết quả thực tế sẽ phụ thuộc nhiều vào độ phức tạp dự án và mô hình AI bạn dùng, không nên xem là con số “chuẩn” áp dụng cho mọi trường hợp.
Có đáng thử không
Bộ skill này không có gì thần kỳ — nó chỉ ép AI đi đúng các bước mà một designer có kinh nghiệm vẫn làm, thay vì nhảy thẳng vào code. Nếu bạn hay dùng Claude Code hoặc Cursor để dựng prototype nhanh, đây là cách hay để tránh cảnh “AI code ra cái gì cũng được, miễn là chạy” — vốn dễ tạo ra sản phẩm trông giống phần mềm nhưng dùng không thật sự trơn tru. Coi đây như một bộ khung quy trình cho AI, chứ không phải phép màu thay thế tư duy thiết kế của bạn.
Để lại một bình luận