Design Critique với Claude Code

Claude Code không chỉ dùng để tạo prototype sản phẩm, mà còn có thể dùng để critique (đánh giá, phản biện) thiết kế. Trong bài viết này, mình sẽ chia sẻ mọi thứ bạn cần biết về việc critique thiết kế bằng Claude Code, kèm theo một bộ prompt cực kỳ thực tế mà bạn có thể dùng để đánh giá thiết kế của mình.

Những định dạng thiết kế bạn có thể đưa cho Claude Code để critique

Bạn có thể cung cấp thiết kế ở nhiều định dạng khác nhau, từ ảnh chụp màn hình UI cho đến mã nguồn dự án. Dưới đây là 3 định dạng phổ biến, kèm theo những chi tiết quan trọng về từng loại.

1. Ảnh chụp màn hình (Image screenshot)

Bạn có thể đính kèm ảnh chụp trang web hoặc màn hình của mình (hoặc một loạt ảnh chụp) vào Claude, rồi yêu cầu Claude critique thiết kế bằng prompt:

critique this design

Trong hầu hết trường hợp, Claude Code sẽ khởi chạy một skill chuyên dụng tên là /design:design-critique, cung cấp bản critique tổng quát cho thiết kế này, bao gồm Ấn tượng tổng thể (Overall Impression), Tính khả dụng (Usability), Phân cấp thị giác (Visual Hierarchy), và Khả năng tiếp cận (Accessibility). Ở cuối bản báo cáo mà Claude tạo cho bạn, nó còn đưa ra một danh sách các thay đổi được đề xuất.

2. Link Figma (Figma link)

Bạn có thể cung cấp link tới file Figma của mình, hoặc một vùng chọn cụ thể trong file đó (chẳng hạn một layout nhất định).

Dán link vào Claude Code và yêu cầu nó critique thiết kế cho bạn.

Định dạng output mà Claude tạo ra về cơ bản sẽ giống với ví dụ trước (dùng ảnh chụp màn hình), nhưng lần này Claude sẽ kích hoạt hai skill chuyên biệt (figma-use và design-critique). Và vì Claude có thể trích xuất thông tin thiết kế cụ thể hơn từ Figma, bạn có thể kỳ vọng nhận được output tinh chỉnh hơn.

3. Mã nguồn (Source code)

Đây là use case giá trị nhất, bởi khi Claude làm việc với Source code, nó nắm được sản phẩm của bạn rõ hơn nhiều so với chỉ có ảnh chụp màn hình và link Figma.

Khi làm việc với Source code, Claude sẽ tạo ra một bản preview thiết kế của bạn (với dự án web, đó sẽ là bản preview chạy trên localhost) và dùng bản preview này để critique thiết kế.

Khi critique mã nguồn của một dự án, Claude Code sẽ khởi chạy một bản preview của dự án đó.

Lưu ý quan trọng về /design:design-critique

Claude Code có sẵn một plugin native tên là /design, và plugin này đi kèm một skill design critique. Bạn có thể chạy nó bằng lệnh sau:

/design:design-critique

Chạy design-critique trong Claude Code bản desktop.

Như đã đề cập ở trên, skill design critique native tập trung vào một vài mảng chính, chẳng hạn Ấn tượng tổng thể, Tính khả dụng, Phân cấp thị giác, và Khả năng tiếp cận. Nếu bạn khởi chạy skill này và yêu cầu nó làm điều gì đó không thuộc phạm vi trên, skill sẽ đơn giản là bỏ qua lệnh đó.

5 use case yêu thích của mình khi critique thiết kế với Claude Code

Giờ mình muốn chia sẻ 5 cách mình dùng Claude Code để critique thiết kế, kèm các prompt sẵn dùng mà bạn có thể áp dụng vào dự án của mình.

Lưu ý: Prompt dưới đây không nên dùng chung với skill design-critique native (Claude sẽ tự động kích hoạt skill này khi cần).

1. Critique UI tổng thể (Overall UI critique)

Đây là phương án thay thế của mình cho skill design-critique native. Mình dùng prompt này khi critique một trang web hoặc một màn hình riêng lẻ và muốn có phần đánh giá thật tập trung. Việc yêu cầu AI đưa ra 5 vấn đề thiết kế quan trọng nhất giúp output cô đọng và dễ đọc hơn.

Báo cáo critique thiết kế UI.

Review this screen and identify the 5 most important design issues.
Focus on visual hierarchy, spacing, typography, color, consistency,
and overall polish. Prioritize issues by impact.

(Rà soát màn hình này và chỉ ra 5 vấn đề thiết kế quan trọng nhất. Tập trung vào phân cấp thị giác, khoảng cách (spacing), typography, màu sắc, tính nhất quán và độ trau chuốt tổng thể. Sắp xếp ưu tiên các vấn đề theo mức độ tác động.)

2. Critique UX

Critique UI tổng quát chủ yếu tập trung vào thiết kế giao diện, nhưng nếu bạn muốn critique UX, tốt nhất nên yêu cầu AI tập trung vào UX.

Báo cáo critique thiết kế UX.

Evaluate this experience from a UX perspective. Identify usability
issues, unclear interactions, unnecessary friction, and places where
users may hesitate or make mistakes.

(Đánh giá trải nghiệm này dưới góc nhìn UX. Xác định các vấn đề về khả năng sử dụng, các tương tác chưa rõ ràng, các friction không cần thiết, và những chỗ người dùng có thể do dự hoặc mắc lỗi.)

3. Critique chuyển đổi (Conversion critique)

Bạn cần bản critique này nếu đang xây dựng một landing page cho doanh nghiệp. Nó sẽ làm nổi bật những khu vực có thể tác động đến tỷ lệ chuyển đổi.

Báo cáo critique conversion.

Critique this landing page for conversion. Evaluate the value
proposition, information hierarchy, CTA visibility, trust signals,
cognitive load, and anything that could prevent users from converting.

(Critique landing page này về mặt chuyển đổi. Đánh giá value proposition, phân cấp thông tin, độ nổi bật của CTA, các tín hiệu tạo niềm tin (trust signals), tải nhận thức (cognitive load), và bất cứ điều gì có thể cản trở người dùng chuyển đổi.)

4. Critique onboarding

Onboarding là một phần không thể thiếu trong trải nghiệm sản phẩm. Onboarding được thiết kế càng tốt, người dùng càng ít khả năng rời bỏ trong quá trình dùng thử sản phẩm.

Báo cáo critique thiết kế onboarding.

Critique this onboarding flow. Identify unnecessary steps, unclear
instructions, premature requests for information, weak motivation,
missing feedback, and opportunities to reduce time-to-value.

(Critique luồng onboarding này. Xác định các bước không cần thiết, hướng dẫn chưa rõ ràng, các yêu cầu cung cấp thông tin quá sớm, động lực yếu, phản hồi (feedback) còn thiếu, và các cơ hội để rút ngắn time-to-value.)

5. So sánh với một bản tham chiếu (Compare against a reference)

Một cách hay để cải thiện thiết kế là đưa cho Claude Code một hình ảnh tham chiếu (ảnh chụp màn hình hoặc trang ở định dạng PNG hoặc JPEG) và yêu cầu nó critique thiết kế của bạn dựa trên bản tham chiếu này.

Báo cáo so sánh với bản tham chiếu.

Compare this design with the provided reference. Identify where my
design is weaker in hierarchy, layout, typography, spacing, visual
rhythm, interaction patterns, and overall quality. Do not suggest to
blindly copy the reference.

(So sánh thiết kế này với bản tham chiếu được cung cấp. Chỉ ra những chỗ thiết kế của tôi yếu hơn về phân cấp, bố cục, typography, spacing, nhịp điệu thị giác (visual rhythm), các pattern tương tác, và chất lượng tổng thể. Đừng gợi ý sao chép bản tham chiếu một cách máy móc.)

Muốn thành thạo Claude Code?

Hãy tham khảo hướng dẫn đầy đủ của mình về Claude Code, đầy ắp những insight cực kỳ thực tế về cách bạn có thể tích hợp nó vào quy trình thiết kế. Hướng dẫn này được cập nhật hàng tuần, nên bạn luôn có được thông tin mới nhất về Claude Code.