distill

Tổng quan về skill distill

distill làm gì

distill là một quy trình tinh gọn thiết kế UI, tập trung vào việc lược một màn hình về đúng chức năng cốt lõi của nó. Skill này phù hợp khi giao diện đang trở nên rối, nhiều nhiễu, trang trí quá tay hoặc nhồi quá nhiều lựa chọn, và bạn muốn có một hướng đi sạch hơn, mạnh hơn thay vì tiếp tục thêm tính năng.

Khi nào distill phù hợp nhất cho UI Design

Hãy dùng distill for UI Design khi bạn đã có sẵn một màn hình, flow hoặc component và cần làm cho nó bình tĩnh, rõ ràng hơn. Skill này phù hợp với designer, frontend engineer, team sản phẩm và AI agent đang xử lý:

• dọn bớt sự lộn xộn trên dashboard, form, trang settings và trang chi tiết
• giảm các hành động cạnh tranh nhau
• đơn giản hóa hệ thống phân cấp thị giác
• loại bỏ nhiễu mang tính trang trí
• biến layout “nhiều tính năng” thành layout ưu tiên tác vụ

Công việc thực sự cần giải quyết

Người dùng không cài distill skill chỉ để có “thiết kế đơn giản hơn”. Họ cài nó để trả lời những câu hỏi khó hơn:

• Điều gì nên giữ lại?
• Điều gì nên bỏ đi?
• Điều gì nên được ẩn, gộp hoặc hoãn lại?
• Mục tiêu người dùng quan trọng nhất trên màn hình này là gì?

Vì vậy, distill hữu ích hơn hẳn một prompt kiểu “làm cái này gọn hơn”. Giá trị thật của nó nằm ở việc buộc bạn phải ưu tiên trước khi redesign.

Điểm khác biệt chính

Điểm khác biệt lớn nhất là distill không phải một prompt tạo style độc lập. Skill này phụ thuộc rõ ràng vào ngữ cảnh thiết kế ở bước trước:

• chạy /frontend-design trước
• nếu chưa có ngữ cảnh thiết kế, hãy chạy /teach-impeccable trước
• dừng lại và hỏi làm rõ nếu mục tiêu chính hoặc ràng buộc chưa rõ

Phần phụ thuộc này rất quan trọng khi cân nhắc có nên cài hay không: distill mạnh hơn nhiều khi nằm trong hệ sinh thái thiết kế impeccable rộng hơn, thay vì dùng như một prompt rời rạc một lần.

Điều cần biết trước khi cài

Đây là một skill gọn nhẹ với một file chính là SKILL.md, không kèm script, ví dụ hay tài nguyên tham chiếu nào. Nhờ vậy nó rất dễ kiểm tra nhanh, nhưng đồng thời chất lượng đầu ra sẽ phụ thuộc nhiều vào ngữ cảnh bạn cung cấp. Nếu bạn đang tìm một distill guide tự chứa, có sẵn nhiều scaffold và chỉ dẫn theo kiểu công cụ, thì đường dẫn repository này nghiêng về nguyên tắc hơn là công cụ.

Cách dùng distill skill

Bối cảnh cài đặt distill

SKILL.md phía upstream không có lệnh cài đặt, nên hãy dùng luồng cài Claude Skills thông thường của bạn cho repository và chọn skill distill bên trong pbakaus/impeccable. Nếu cài từ repo, đường dẫn liên quan là:

https://github.com/pbakaus/impeccable/tree/main/.claude/skills/distill

Vì skill này có thể được người dùng gọi trực tiếp và nhận gợi ý đối số dạng [target], cách dùng thực tế là gọi distill cho một màn hình, flow hoặc component cụ thể, thay vì một yêu cầu mơ hồ ở cấp toàn sản phẩm.

Hãy đọc file này trước

Bắt đầu với:

• SKILL.md

Trong thư mục skill này không có các file đi kèm như README.md, metadata.json, rules/ hay references/, nên gần như toàn bộ hành vi hữu ích đều được định nghĩa trong đúng một file đó. Với mục đích đánh giá cài đặt, đây là tin tốt: bạn có thể xem trọn distill skill rất nhanh.

Phụ thuộc bắt buộc mà nhiều người sẽ bỏ sót

Trước khi dùng distill, skill này yêu cầu gọi /frontend-design. Bước upstream đó chứa các nguyên tắc thiết kế, anti-pattern và “Context Gathering Protocol”. Nếu chưa có ngữ cảnh thiết kế nào, bạn được kỳ vọng sẽ chạy /teach-impeccable trước.

Điều này rất quan trọng vì kết quả yếu thường đến từ việc bỏ qua phần chuẩn bị này. Nếu bạn gọi distill trực tiếp từ một screenshot hoặc một lời phàn nàn còn thô, model có thể loại bỏ nhầm những thứ quan trọng.

distill cần đầu vào như thế nào

Muốn distill usage cho kết quả tốt, bạn cần một target cụ thể cùng đủ ngữ cảnh để xác định đúng nhiệm vụ chính của UI. Đầu vào tốt nên gồm:

• màn hình hoặc component chính xác
• tác vụ chính của người dùng
• các vấn đề hiện tại, như quá nhiều hành động hoặc hệ thống phân cấp yếu
• các ràng buộc cứng, như compliance, control bắt buộc phải giữ, hoặc giới hạn kỹ thuật
• việc đơn giản hóa nên theo hướng bỏ bớt, gộp, ẩn hay progressive disclosure nội dung

Một đầu vào yếu:

• “Simplify this page.”

Một đầu vào tốt hơn:

• “Use distill on our analytics dashboard. The primary user goal is to spot traffic changes in under 10 seconds. Keep the date range picker and export action. We can remove secondary filters from the default view if needed. Current issues: too many cards, repeated metrics, heavy borders, and three competing CTAs.”

Cách biến một mục tiêu thô thành prompt hoàn chỉnh

Một cấu trúc prompt distill guide thực tế:

1. Nêu rõ target.
2. Xác định một mục tiêu người dùng quan trọng nhất.
3. Liệt kê các yếu tố bắt buộc phải giữ.
4. Liệt kê các hạng mục có thể bỏ hoặc ẩn.
5. Chỉ ra điều gì đang gây cảm giác lộn xộn.
6. Yêu cầu một kế hoạch đơn giản hóa trước khi đi tới redesign cuối cùng.

Ví dụ:

“Apply distill to the onboarding modal for first-time team admins. The one goal is helping them invite teammates. Must keep: email entry, role selector, skip option. Nice-to-have elements that can be deferred: tips carousel, template preview, feature badges. The current design feels crowded because it mixes setup, education, and marketing. First identify complexity sources, then propose what to remove, combine, or hide.”

Quy trình làm việc được khuyến nghị

Một workflow nhiều tín hiệu cho distill usage:

1. Thu thập ngữ cảnh qua /frontend-design.
2. Xác nhận mục tiêu người dùng chính là một mục tiêu duy nhất.
3. Chạy distill trên một màn hình, không phải cả sản phẩm.
4. Xem lại những gì skill đề xuất bỏ, gộp hoặc ẩn.
5. Kiểm tra xem có phần nào bị “loại bỏ” nhưng thực ra lại bắt buộc do policy, support hoặc business logic hay không.
6. Lặp lại với các ràng buộc sắc nét hơn.
7. Chỉ sau đó mới chuyển sang tinh chỉnh thị giác hoặc triển khai.

Thứ tự này quan trọng vì distill chủ yếu là công cụ ưu tiên hóa, không phải bước polish cuối cùng.

distill có xu hướng phân tích những gì

Dựa trên nội dung skill, distill sẽ tìm các vấn đề như:

• quá nhiều thành phần
• biến thiên thị giác quá mức
• quá tải thông tin
• nhiễu thị giác
• hệ thống phân cấp khó hiểu
• feature creep

Skill này cũng nhấn mạnh rõ việc xác định “20% mang lại 80% giá trị”. Nếu team của bạn thường khó cắt bớt phạm vi, thì chính cách đóng khung này là một trong những lý do đáng giá nhất để dùng skill.

Khi nào nên dừng lại để làm rõ thay vì tiếp tục đẩy tới

Hướng dẫn gốc nói rằng nên dừng lại và đặt câu hỏi nếu codebase hoặc prompt chưa làm rõ được các điểm sau:

• mục tiêu người dùng chính
• cái gì là cần thiết và cái gì chỉ là nice-to-have
• cái gì có thể bỏ, ẩn hoặc gộp

Đây là một ranh giới quan trọng. Nếu team của bạn còn chưa thống nhất được tác vụ cốt lõi của màn hình, distill sẽ phơi bày sự mơ hồ ở cấp sản phẩm đó chứ không thể tự động giải quyết hộ.

Target phù hợp nhất cho lần đầu dùng distill

Những target tốt để bắt đầu:

• một trang settings quá chật chội
• một dashboard có quá nhiều card
• một form hiển thị quá nhiều field tùy chọn cùng lúc
• một modal đang cố làm nhiều việc
• một section landing có nhiều CTA cạnh tranh nhau

Những target không lý tưởng để bắt đầu:

• workflow bị ràng buộc chặt bởi quy định, nơi việc bỏ bớt gần như không linh hoạt
• công việc ở mức design system mà chưa có màn hình cụ thể
• các màn hình vốn đã tối giản nhưng đang gặp vấn đề về tương tác

Có thể kỳ vọng gì ở đầu ra của distill

Hãy kỳ vọng distill skill phát huy tốt nhất khi nó tạo ra:

• chẩn đoán các nguồn gây phức tạp
• hệ thống phân cấp nội dung và hành động rõ ràng hơn
• đề xuất bỏ bớt, gộp hoặc áp dụng progressive disclosure
• một đường đi người dùng tập trung hơn

Đừng kỳ vọng riêng skill này sẽ tạo ra code transform, audit tự động hay component diff sẵn sàng để triển khai.

Câu hỏi thường gặp về distill skill

distill có tốt hơn một prompt đơn giản hóa thông thường không

Thường là có, nếu bạn cần một cách đơn giản hóa có cấu trúc thay vì chỉ dọn dẹp chung chung. Skill này cung cấp một lăng kính lặp lại được để tìm nguồn gốc độ phức tạp và buộc phải xác định một mục tiêu chính duy nhất. Prompt thông thường có thể nói “làm cho sạch hơn”, nhưng distill có xu hướng hỏi kỹ hơn xem điều gì thực sự nên biến mất.

distill có thân thiện với người mới bắt đầu không

Có, nhưng có một lưu ý. Cách diễn đạt của skill khá thẳng và repo cũng dễ kiểm tra vì hầu như chỉ có một file. Phần khó không nằm ở cài đặt, mà ở việc bạn có đủ ngữ cảnh UI để dùng skill cho đúng hay không. Người mới nên bắt đầu từ một màn hình duy nhất cùng các ràng buộc rõ ràng.

Tôi có cần toàn bộ repository impeccable không

Bạn không cần đọc hết cả repo trước khi thử distill install, nhưng nên tôn trọng phần phụ thuộc đã được ghi rõ vào /frontend-design và, khi cần, /teach-impeccable. Skill này được thiết kế để hoạt động trong hệ sinh thái đó, không phải để thay thế hoàn toàn nó.

Khi nào không nên dùng distill

Hãy bỏ qua distill khi vấn đề chính là:

• logic tương tác bị lỗi hơn là giao diện lộn xộn
• thiếu nghiên cứu người dùng
• chiến lược sản phẩm chưa rõ trên nhiều màn hình
• các vấn đề accessibility hoặc compliance cần bổ sung giải pháp, chứ không phải cắt bớt

Trong những trường hợp đó, chỉ đơn giản hóa thôi có thể khiến bạn đi sai hướng.

distill có dùng được cho tác vụ ngoài UI không

Những gì có thể thấy từ repository đều chỉ về use case UI và frontend design. Cách dùng từ ngữ, sự phụ thuộc vào /frontend-design và các nhóm phân tích đều xoay quanh việc đơn giản hóa giao diện. Nếu bạn muốn đơn giản hóa copy, hệ thống hoặc kiến trúc, hãy xem đây là nguồn cảm hứng hơn là một lựa chọn chắc chắn phù hợp.

Cách cải thiện distill skill

Hãy cho distill một màn hình và một mục tiêu

Cách nhanh nhất để cải thiện đầu ra của distill là thu hẹp phạm vi. “Simplify our app” là quá rộng. “Distill the billing settings page so users can update payment method faster” thì có thể hành động được. Skill này hoạt động tốt nhất khi target chỉ có một tác vụ nổi trội.

Tách bạch yếu tố bắt buộc giữ với yếu tố có thể thương lượng

Một prompt tốt nên phân biệt rõ:

• nội dung hoặc hành động bắt buộc
• các mục tùy chọn có thể ẩn hoặc bỏ
• các yếu tố trang trí có thể được lược bỏ trước

Nếu không làm rõ điều này, distill có thể đề xuất cắt bỏ thứ không thể thương lượng về mặt chính trị hoặc chức năng, làm tốn cả một vòng review.

Nói rõ bạn muốn distill đơn giản hóa theo kiểu nào

Không phải mọi kiểu đơn giản hóa đều là xóa bớt. Kết quả sẽ tốt hơn khi bạn chỉ rõ đòn bẩy ưu tiên:

• remove
• combine
• hide behind progressive disclosure
• downgrade visual emphasis
• sequence across steps instead of showing everything at once

Điều này biến distill usage từ kiểu “làm nó đơn giản hơn” thành một thao tác thiết kế sắc nét hơn.

Hãy nêu ra các triệu chứng phức tạp thực tế

Đừng chỉ nói màn hình trông lộn xộn. Hãy gọi tên sự lộn xộn:

• năm nút nằm above the fold
• metric bị lặp
• ba kiểu chữ khác nhau nhưng không mang ý nghĩa
• card vừa có shadow, vừa có border, vừa có nền tint cùng lúc
• settings phụ lại hiện ra trước khi người dùng hoàn tất bước chính

Các triệu chứng cụ thể sẽ giúp model đối chiếu tốt hơn với chính các nhóm độ phức tạp mà skill dùng.

Cẩn thận với kiểu thất bại phổ biến nhất của distill

Kiểu thất bại lớn nhất trong distill for UI Design là đơn giản hóa nhầm thứ không nên đơn giản hóa. Một màn hình có thể trông sạch hơn về thị giác nhưng lại khó dùng hơn nếu các ngữ cảnh quan trọng, tín hiệu tạo niềm tin hoặc control cho edge case bị biến mất. Sau lượt đầu tiên, hãy rà lại từng đề xuất loại bỏ dựa trên tác vụ người dùng thực tế.

Yêu cầu đầu ra theo từng giai đoạn

Một prompt tốt hơn là prompt yêu cầu đầu ra theo từng bước:

1. xác định nguồn gây phức tạp
2. định nghĩa tác vụ cốt lõi
3. liệt kê những gì nên bỏ, gộp và ẩn
4. đề xuất cấu trúc đã được đơn giản hóa

Cách làm theo giai đoạn này giúp distill guide dễ kiểm tra, dễ audit và dễ tinh chỉnh hơn so với việc yêu cầu redesign ngay lập tức.

Lặp lại với ràng buộc sau lượt đầu tiên

Nếu đầu ra đầu tiên quá mạnh tay hoặc quá dè dặt, hãy tinh chỉnh bằng các ràng buộc cụ thể:

• “Keep all legal disclosures visible.”
• “Do not add more steps.”
• “We can hide advanced filters behind an accordion.”
• “The primary CTA must remain above the fold.”

Đây là cách thực tế nhất để cải thiện kết quả từ distill skill mà không phải viết lại toàn bộ brief.

Kết hợp distill với bước review triển khai

Khi distill đã xác định được những gì nên cắt hoặc giảm nhấn mạnh, hãy đưa kết quả đó vào quy trình review frontend và sản phẩm thông thường của bạn. Skill này mạnh nhất ở việc đóng khung quyết định. Team của bạn vẫn cần xác thực state handling, accessibility, độ rõ của nội dung và các edge case trước khi phát hành.