5 kỹ năng thiết kế web tốt nhất cho Claude (và cách tự tạo kỹ năng của riêng bạn)

Tại sao Claude mặc định tạo ra thiết kế chung chung, 5 kỹ năng khắc phục điều này trong thực tế, và hướng dẫn từng bước để xây dựng kỹ năng của riêng bạn khi không có cái nào phù hợp với thương hiệu của bạn.

Bạn đã biết cách nhận ra nó rồi. Gradient tím trên nền trắng, font Inter, đổ bóng mềm cho card, một emoji lạc lõng ở giữa section. Bạn nhìn vào và nghĩ: Claude làm cái này.

Đó không phải lỗi của mô hình. Đó là hành vi mặc định của nó.

Khi bạn yêu cầu "xây dựng một landing page" mà không có hướng dẫn thêm, mô hình sẽ không chọn phương án thú vị nhất. Nó sẽ chọn phương án có khả năng xảy ra cao nhất. Và phương án có khả năng xảy ra cao nhất là giá trị trung bình của mọi thứ nó thấy trong quá trình huấn luyện: hàng triệu trang web an toàn, chung chung, dễ bị lãng quên. Kết quả là một thiết kế trông giống thiết kế AI bởi vì nó đúng nghĩa đen là trung tâm thống kê của những gì tồn tại trên web.

Anthropic có một cái tên cho điều này, họ gọi nó là hội tụ phân phối. Trong thực tế, nó có nghĩa là một điều: nếu không có định hướng, Claude luôn rơi vào lối mòn.

Một kỹ năng là cách bạn đưa nó ra khỏi lối mòn đó.

Kỹ năng là gì, một cách nhanh chóng

Hãy nghĩ về một tệp markdown (văn bản) mà Claude đọc trước khi bắt đầu làm việc. Thay vì lặp lại sở thích, hệ thống thiết kế và giọng điệu của bạn trong mọi prompt, bạn viết nó một lần và nó tự động tải lên. Nó giống như một bản mô tả công việc bạn đưa ra trước khi giao nhiệm vụ.

Sự khác biệt trong đầu ra là rất lớn. Cùng một prompt, cùng một Claude, nhưng với kỹ năng phù hợp được tải, nó không còn là một nhà thiết kế chung chung nữa mà trở thành một cộng tác viên hiểu rõ công việc của bạn.

Tôi đã thử nghiệm một loạt các kỹ năng, với ảnh chụp trước và sau trên cùng một prompt để xem cái nào thực sự tạo ra khác biệt. Chúng ta có thể tách ra 5 kỹ năng thực sự thay đổi cục diện cho thiết kế web.

1. Thiết kế Frontend (bản chính thức từ Anthropic)

Đây là kỹ năng phổ biến nhất trong hệ sinh thái, và có lý do chính đáng: nó được chính Anthropic phát hành. Nó đã đạt 277.000 lượt cài đặt.

Bí quyết của nó không phải là dạy Claude cách vẽ đẹp; mà là dạy nó những gì không nên làm. Tệp này liệt kê rõ ràng những lối mòn cần tránh: các font chữ bị lạm dụng, các bảng màu thông thường, cấu trúc đổ bóng card mà ai cũng nhận ra. Đó là một bài học ngắn về gu thẩm mỹ được nhúng vào mô hình.

Trong bài kiểm tra trước và sau, điều này trở nên rõ ràng. Cùng một landing page từng ra với gradient tím và emoji biến thành một thứ gì đó mang tính biên tập, với sự kết hợp trang nhã giữa serif và sans-serif sạch sẽ, hiệu ứng cuộn mờ dần, và các trạng thái hover được chăm chút. Chỉ từ một prompt duy nhất.

Khi nào sử dụng: Bất cứ khi nào bạn bắt đầu một dự án từ đầu và muốn thoát khỏi thiết kế mặc định ngay lần thử đầu tiên. Đây là nền tảng của bạn.

Và nó không ép bạn vào phong cách của nó. Nếu bạn muốn các quy tắc còn lại nhưng chỉ dùng font sans-serif, chỉ cần chỉnh sửa tệp markdown và nói: "chỉ sử dụng Geist, Google Sans, hoặc DM Sans." Claude sẽ điều chỉnh tệp.

2. Impeccable (hộp công cụ)

Được tạo bởi Paul Bakaus, kỹ năng này nhanh chóng trở thành một trong những kỹ năng được yêu thích nhất trong cộng đồng, đạt 45,9k sao trên GitHub trong một thời gian ngắn. Và thật dễ hiểu tại sao.

Điểm thú vị của nó là các lệnh. Có lệnh /impeccable thuần túy, nhưng nó đi kèm với khoảng 20 lệnh con mà bạn gọi tùy theo ngữ cảnh:

• /impeccable animate thêm hoạt ảnh giới thiệu và chuyển động một cách mạch lạc, theo cách phù hợp với trang
• /impeccable quieter thực hiện kiểm tra "nhiễu" trên thiết kế (quá nhiều gradient, độ đậm font nặng trên mọi tiêu đề, emoji rải rác) và cắt bỏ phần thừa, mang lại sự thanh lịch thay vì sự ồn ào
• /impeccable audit thực hiện kiểm tra chất lượng và khả năng tiếp cận
• /impeccable document tạo ra một design.md ghi lại toàn bộ hệ thống thiết kế của bạn để bất kỳ agent nào có thể đọc sau này

Bên dưới, nó có 46 quy tắc xác định để phát hiện "slop" (thiết kế cẩu thả) — những quy tắc chạy mà không phụ thuộc vào việc mô hình phải phỏng đoán. Nó phát hiện chính xác các mẫu do AI tạo ra.

Khi nào sử dụng: Để lặp lại trên những gì bạn đã có. Có một trang đã sẵn sàng và muốn thuần hóa sự phóng đại? Sử dụng quieter. Thiếu sức sống? Sử dụng animate. Chỉ trong hai prompt, trang web sẽ thay đổi cấp độ.

Chi tiết vượt ra ngoài công cụ: Impeccable có một tab "slop" hiển thị các mẫu mà nó dạy AI tránh. Hãy tự xem danh sách này. Học cách nhận ra rằng một đường viền nhấn ở cạnh của card đã trở thành một lối mòn AI cũng giúp bạn thiết kế tốt hơn theo cách thủ công.

3. UIUX Pro Max (kỹ năng buộc Claude phải suy nghĩ)

Đây là một cơ sở dữ liệu thiết kế mạnh mẽ, và là kỹ năng có nhiều sao nhất trong danh sách: nó đã vượt qua 105k sao trên GitHub. Có 67 phong cách UI, 161 bảng màu, 57 cặp font, 99 hướng dẫn UX, và 16 tech stack để nó biết cách triển khai trong từng framework.

Mục đích của nó không phải là cung cấp cho bạn code nhanh; mà là ngược lại. Nó buộc Claude phải suy luận trước khi viết bất kỳ dòng code nào. Nó chạy bố cục của bạn qua một quá trình tìm kiếm song song trên năm lĩnh vực (sản phẩm, phong cách, màu sắc, landing, kiểu chữ), áp dụng các quy tắc suy luận, và chỉ sau đó mới trả về một hệ thống thiết kế hoàn chỉnh, với các phản mẫu cần tránh đã được đánh dấu sẵn.

https://x.com/nett0eth/status/2073490435066982554

Kết quả là các section có chủ đích, không phải là các section trang trí. Trong bài kiểm tra, nó đã làm những việc như chuyển đổi từ sáng sang tối ngay trong khối KPI, đặc biệt để làm nổi bật con số cần thu hút sự chú ý. Đó là kiểu quyết định bạn mong đợi từ một con người, không phải từ một máy tạo sinh.

Khi nào sử dụng: Khi bạn có sự rõ ràng về nội dung và muốn chiều sâu thiết kế. Và một mẹo đáng giá: bạn càng cụ thể về những gì bạn muốn trong mỗi section, kết quả càng tốt. Một kỹ năng không đọc được suy nghĩ của bạn; nó khuếch đại định hướng của bạn. Gửi "sử dụng kỹ năng và thực hiện một thiết kế lại mạnh mẽ hơn, khám phá các bảng màu và cặp font" sẽ thay đổi hoàn toàn những gì được trả về.

4. Hướng dẫn Thiết kế Web (người kiểm toán, từ Vercel Labs)

Kỹ năng này dành cho giai đoạn cuối của dự án, không phải đầu dự án. Nó đến từ Vercel Labs, có 29k sao trên GitHub, và kiểm toán code của bạn dựa trên danh sách các hướng dẫn giao diện web của Vercel, với hơn 100 quy tắc: focus bàn phím hoạt động, không bao giờ vô hiệu hóa zoom, không chặn paste, chỉ báo tải trên nút, thứ bậc tiêu đề, ARIA, v.v.

Và nó có một mẹo mà tôi thích: bạn có thể yêu cầu Claude chú thích các vấn đề trực tiếp trên màn hình xem trước. Thay vì đọc một danh sách, bạn thấy trên trang web, bằng màu cam, nơi nào thiếu aria-label, nơi nào điều hướng bàn phím bị hỏng, nơi nào CTA thiếu focus. Nó trở nên trực quan.

Khi nào sử dụng: Khi thiết kế đã tốt và bạn muốn đảm bảo nó có thể truy cập được và không gây khó khăn cho bất kỳ ai sử dụng bàn phím hoặc trình đọc màn hình. Đây là bước QA trước khi đưa lên mạng.

5. Astryx (hệ thống thiết kế sẵn sàng cho agent, từ Meta)

https://x.com/nett0eth/status/2073826299789889884

Kỹ năng thứ năm thuộc một thể loại khác: nó không phải là kỹ năng về gu thẩm mỹ, mà là một hệ thống thiết kế hoàn chỉnh. 4 kỹ năng trên dạy Claude thiết kế tốt hơn, từng màn hình một. Meta đặt cược vào con đường ngược lại và mở mã nguồn Astryx, hệ thống thiết kế đã phát triển nội bộ trong 8 năm, trở thành hệ thống lớn nhất và được sử dụng nhiều nhất trong công ty, và chạy trên hơn 13.000 ứng dụng. Bây giờ nó là mã nguồn mở và, chi tiết quan trọng ở đây, đã sẵn sàng cho agent.

Điểm mấu chốt là thế này: thay vì hy vọng mô hình có đủ hiểu biết thông thường cho mọi thành phần, bạn cung cấp cho nó một hệ thống nơi mọi thứ đã được sinh ra với khả năng truy cập và nhất quán. Có hơn 150 thành phần, 7 chủ đề có sẵn, chế độ tối, và một CLI mà cả con người và agent đều sử dụng theo cùng một cách, đọc cùng một tài liệu. Thậm chí còn có một tệp CLAUDE.md trong kho lưu trữ để Claude hiểu về ngôi nhà trước khi viết dòng code đầu tiên.

Nó chạy trên React và StyleX, đang trong giai đoạn beta, và đã có 8,2k sao.

Khi nào sử dụng: Khi bạn muốn sự nhất quán của hệ thống, không chỉ là một màn hình đẹp. Các kỹ năng tinh chỉnh gu thẩm mỹ của mô hình; Astryx đảm bảo nền tảng đã vững chắc trước bất kỳ prompt nào. Cả hai bổ sung cho nhau.

Nơi tìm thêm các kỹ năng

5 kỹ năng này bao phủ khoảng 90% những gì một nhà thiết kế web làm trong Claude. Nhưng nếu bạn muốn khám phá thêm, có những thư mục tốt:

• UI Skills tập trung vào các kỹ sư thiết kế nhưng cũng phục vụ cho thiết kế web. Nó liệt kê một số kỹ năng trong số 4 kỹ năng này và có các thứ liên quan đến khả năng tiếp cận và Shadcn.
• Type UI là yêu thích của tôi dành cho những ai ưu tiên hình ảnh trước. Bạn cuộn và xem trước từng phong cách thẩm mỹ (tối giản, tân-brutalism, doanh nghiệp tinh tế) và gọi cái bạn muốn mà không cần viết một đoạn hướng dẫn.
• MCP Market là một kho lưu trữ cộng đồng lớn; vào Agent Skills > Categories > Design Tools và có một danh sách vô tận.
• skills.sh là nơi Vercel và những người khác xuất bản chính thức, tốt để lấy trực tiếp từ nguồn.

Cách tạo kỹ năng của riêng bạn

Khi không có kỹ năng nào phù hợp 100% với thương hiệu hoặc stack của bạn. Đó là lúc bạn tự tạo ra kỹ năng của mình.

Trong ứng dụng Claude hoặc Claude Code, vào Customize > Skills > Create Skill > Create with Claude. Nó bắt đầu bằng cách hỏi bạn kỹ năng nên làm gì.

Phần tạo nên sự khác biệt giữa một kỹ năng hữu ích và một kỹ năng vô dụng là mức độ cụ thể bạn đưa ra ở đây. Thay vì "tạo thiết kế đẹp," hãy đưa ra các quy tắc suy luận. Ví dụ:

• Luôn xác định loại sản phẩm trước (dashboard, landing, app), bởi vì thiết kế thay đổi theo ngữ cảnh.
• Luôn suy luận mục tiêu của màn hình trước khi vẽ: hành động nào quan trọng nhất và người dùng nên chú ý điều gì đầu tiên.
• Mặc định sử dụng một bảng màu hạn chế, nền và bề mặt trung tính hơn.
• Một font chữ chính cho nội dung và, nếu cần, một font chữ hiển thị cho các tiêu đề lớn.

Claude bắt đầu một cuộc trò chuyện và hỏi về stack của bạn (ví dụ: token Tailwind), tỷ lệ khoảng cách của bạn, giới hạn bố cục của bạn. Hãy chi tiết; đó là điều làm cho kỹ năng trở nên đáng giá. Cuối cùng, nó đóng gói mọi thứ vào một tệp .md với các thư mục tham khảo, và bạn truy cập nó thông qua lệnh gạch chéo của riêng mình.

Nhưng tạo kỹ năng là phần dễ. Phần khó là đảm bảo nó không bị hỏng trong phiên làm việc tiếp theo, và đó là nơi mà trục mà nhiều người bỏ qua xuất hiện. Tôi đã phân tích khung 8 bước của Matt Pocock để viết các kỹ năng tự duy trì (kích hoạt, cấu trúc, định hướng, cắt tỉa) trong một bài viết riêng, và nó đáng giá hơn bất kỳ kỹ năng thiết kế nào bạn cài đặt:

https://x.com/nett0eth/status/2075976597513830727

Thật đáng để đọc cùng nhau; đó là cùng một lý luận về "đưa cho mô hình cây thước đúng" được áp dụng ở một cấp độ cao hơn. Hướng dẫn chính thức của Anthropic, Hướng dẫn Toàn diện về Xây dựng Kỹ năng cho Claude, cũng phân tích các nguyên tắc.

Điều còn lại

Claude không phải là một nhà thiết kế ấn tượng theo mặc định. Điều này không có gì mới đối với bất kỳ ai đã từng yêu cầu một landing page và nhận được gradient tím quen thuộc.

Kỹ năng là cách bạn thu hẹp khoảng cách này. Không phải vì mô hình trở nên thông minh hơn, mà bởi vì bạn đã đưa cho nó cây thước mà một nhà thiết kế thực thụ mang trong đầu. Mô hình ít quan trọng hơn vòng lặp bạn xây dựng xung quanh nó.

Cấu hình nó một lần. Sự khác biệt trong đầu ra đủ lớn để bạn sẽ không muốn làm việc mà không có nó nữa.

Câu hỏi vẫn còn đó: có bao nhiêu dự án của bạn vẫn đang ra với gradient tím quen thuộc chỉ vì bạn chưa bao giờ tải một kỹ năng trước khi yêu cầu? Lưu và chia sẻ 👍

Nguồn / liên kết:

• Thiết kế Frontend (Anthropic)
• Impeccable (Paul Bakaus)
• Hướng dẫn Thiết kế Web (Vercel Labs)
• UIUX Pro Max
• Astryx (hệ thống thiết kế sẵn sàng cho agent, từ Meta)
• Hướng dẫn Toàn diện về Xây dựng Kỹ năng cho Claude
• Bài viết trước của tôi (khung 8 bước để tạo kỹ năng):