Claude Code đã chết nếu bạn còn để nó tự thiết kế UI

Bạn đang lãng phí 90% sức mạnh Claude Code nếu vẫn để nó tự thiết kế giao diện

Claude Code viết code rất tốt — nhưng có một vấn đề không ai nói thẳng: nó gần như không có gu thẩm mỹ. Để tự do, nó sẽ nhả ra gradient tím, font Inter, layout thẻ 2×2 và glassmorphism. Mọi lần. Bài viết này phân tích hiện tượng “AI slop” trong thiết kế và giới thiệu 10 công cụ giúp biến Claude Code từ máy nhả template SaaS thành trợ lý front-end thực sự có cá tính.

Related: AI tự chủ 2026: 12 cập nhật thay đổi cách bạn làm việc

Related: Google Stitch là gì? Vibe Coding với Claude Code 2026

Related: Claude Code 2026: Nền tảng AI Operating System | Hướng Dẫn

Related: Claude Managed Agents và sự thật về AI hạ tầng đã chết

Related: Claude Code Auto Mode: Chạy Tác Vụ Dài Không Bị Hỏi

TL;DR

• AI slop là mẫu số chung nhàm chán của giao diện do AI tạo: gradient tím, Inter, layout thẻ lặp lại.
• Claude Code cực mạnh về code nhưng gần như không có “gu” thiết kế nếu không được chỉ rõ.
• 10 công cụ và skill như Impeccable, Skill UI, Stitch, UI UX Pro Max giúp đưa “taste” vào Claude Code.
• Google Fonts và 21st.dev là hai đòn bẩy nhanh nhất để thoát template SaaS mặc định.
• Playwright CLI kết hợp với các skill thiết kế tạo workflow hoàn chỉnh: đẹp hơn, test kỹ hơn, ship nhanh hơn.

Mục lục

• Claude Code và “AI slop” là gì, tại sao nguy hiểm?
• Impeccable là gì và dạy Claude Code tránh AI slop như thế nào?
• Skill UI hoạt động ra sao để “sao chép” design hệ thống?
• WebGPU Skill và Awesome Design MD giải quyết vấn đề gì?
• Stitch và UI UX Pro Max giúp tối ưu workflow với Claude Code như thế nào?
• 21st.dev và Taste Skill có thực sự giúp AI “có gu” hơn không?
• Vì sao Google Fonts và Playwright CLI là cặp bài trùng cuối cùng?
• Nên phối hợp 10 công cụ này theo thứ tự nào cho từng dự án?
• Nên bắt đầu từ đâu? Lộ trình hành động trong 30 ngày
• Hệ thống lại & bước tiếp theo
• Câu Hỏi Thường Gặp

---

Claude Code và “AI slop” là gì, tại sao nguy hiểm?

AI slop là thuật ngữ chỉ những mẫu giao diện web kém thẩm mỹ, lặp lại và vô hồn mà AI thường tạo ra. Trong thực tế với Claude Code, AI slop chính là combo gradient tím, font Inter cho mọi thứ, layout thẻ 2×2 kiểu “bento box”, hiệu ứng glassmorphism, sparkline trang trí và vài thanh border ở cạnh bên.

Claude Code hiện rất mạnh ở khả năng sinh code, đặc biệt cho front-end. Nhưng khi để nó tự quyết định thiết kế, gần như luôn ra một trang mang vibe SaaS generic. Qua nhiều lần thử các prompt khác nhau, chỉ cần không ép style cụ thể, Claude sẽ trôi về đúng mẫu số chung này — không có ngoại lệ đáng kể.

“Có một con quái vật bên trong Claude Code và nó tên là AI slop.”

Nguyên nhân sâu xa là mô hình học từ những pattern xuất hiện nhiều nhất trong dữ liệu huấn luyện. Phổ biến nhất không có nghĩa là đẹp nhất. Vấn đề càng trầm trọng hơn khi người dùng Claude Code tăng nhanh: càng nhiều trang “slop” được tạo ra, mô hình càng được củng cố ở những pattern tầm thường đó.

Cần tránh điều gì khi dựa vào skill mặc định?

Anthropic có cung cấp sẵn Front-end Design Skill, nhưng về bản chất nó chỉ là lời dặn kiểu “đừng làm AI slop” mà không chỉ ra cụ thể: cái gì là slop, vì sao xấu, phải tránh những pattern nào. Với LLM, nói “đừng” mà không gắn nhãn rõ anti-pattern gần như vô tác dụng.

Lợi thế cạnh tranh thực sự nằm ở đây: ai khống chế AI slop tốt hơn, người đó nổi bật hơn. Điều này rõ ngay khi so sánh hai trang cùng do Claude Code sinh ra — một bên dùng tool bổ trợ, một bên để mặc định.

Tóm tắt nhanh

• AI slop là tập hợp các pattern giao diện nhàm chán, lặp lại mà AI rất hay tạo ra.
• Claude Code mạnh về code nhưng gần như không có “gu” nếu không được chỉ rõ.
• Skill mặc định “Front-end Design” quá mơ hồ, không liệt kê anti-pattern cần tránh.
• Người dùng Claude tăng thì mức độ đồng dạng giao diện cũng tăng theo.
• Đây là khoảng trống để dev biết dùng đúng tool tạo ra lợi thế khác biệt.

---

Impeccable là gì và dạy Claude Code tránh AI slop như thế nào?

Impeccable là một skill đơn lẻ cho Claude Code với 18 command, được thiết kế riêng để dạy “đây chính là AI slop, đừng làm thế”. Thay vì nói chung chung “hãy thiết kế đẹp”, Impeccable đưa ra các ví dụ xấu được gắn nhãn rõ để mô hình chủ động tránh.

Trong cách tiếp cận này, anti-pattern trở thành dữ liệu huấn luyện thực tế. Glassmorphism lạm dụng, sparkline vô nghĩa, border tab bên hông cho “có vẻ xịn” — tất cả đều được liệt kê và mô tả cụ thể. Khi thử áp Impeccable vào một dự án landing page, chỉ riêng việc gọi đúng các command đã giúp Claude bỏ bớt rất nhiều hiệu ứng rườm rà không cần thiết.

Trên trang chính của Impeccable, mỗi command đều có ví dụ before/after trực quan. Chẳng hạn:

• clarify: cải thiện thông báo lỗi và xử lý lỗi trong UX.
• adapt: buộc Claude nghĩ về responsive cho desktop, tablet, mobile ngay từ đầu.

Ngoài ra còn có extension Chrome để highlight trực tiếp những yếu tố mang tính AI slop trên trang đang mở — khá hữu ích khi audit giao diện cũ.

“Tại sao không dùng một skill nói thẳng với LLM ‘đây chính là AI slop’ thay vì chỉ bảo kiểu ‘đừng làm AI slop’?”

Impeccable dùng khi nào là hợp lý nhất?

Impeccable đặc biệt hữu ích trong ba trường hợp:

• Bạn đang làm site mới và muốn chặn slop ngay từ đầu.
• Bạn muốn “dạy lại” Claude cho một dự án dài hơi, cần phong cách nhất quán.
• Bạn đang refactor giao diện AI sinh sẵn và muốn loại bỏ những chỗ “bốc mùi AI”.

Dù mới ra mắt khoảng một tháng, Impeccable cải thiện khá rộng: từ copy UX đến layout, từ error handling đến responsive. Với 18 command như các sub-skill, Claude có nhiều điểm tựa rõ ràng để bám theo — thay vì đoán mò.

Tóm tắt nhanh

• Impeccable gồm 18 command dạy Claude Code hiểu rõ AI slop là gì.
• Cách tiếp cận là học từ ví dụ xấu có gắn nhãn, không chỉ khuyên “thiết kế đẹp vào”.
• Website chính có ví dụ before/after và extension Chrome highlight yếu tố slop.
• Các command bao phủ nhiều mặt: UX, responsive, layout, error handling.
• Phù hợp để dùng như “bộ lọc slop” chuẩn cho mọi dự án với Claude.

---

Skill UI hoạt động ra sao để “sao chép” design hệ thống?

Skill UI là công cụ phân tích một website có sẵn rồi chuyển design system của nó thành một skill có thể tái sử dụng trong Claude. Nói nôm na, đây là cách reverse-engineer phong cách của Stripe, Notion hay bất kỳ site nào bạn thích.

Cách hoạt động không dừng ở việc parse HTML. Khi bật Ultra Mode, Skill UI dùng Playwright để:

• Cuộn trang và chụp screenshot toàn chiều dài.
• Ghi nhận hover, animation, transition và các tương tác động.

Nhờ đó, những chi tiết tinh tế mà chỉ nhìn markup thì không thấy được sẽ được mã hoá vào skill. Theo demo của tác giả, sau khi học từ website Stripe, chỉ với prompt “tạo một website phong cách Stripe”, Claude sinh ra một trang có palette màu, cảm giác chuyển động và cấu trúc rất gần bản gốc.

“Nó cho phép chúng ta reverse engineer bất kỳ design system nào thành một skill sẵn sàng cho Claude.”

Khi nào nên dùng Skill UI thay vì tự prompt?

Skill UI không gắn chặt với một site cụ thể. Quy trình thực tế khá đơn giản:

1. Trỏ vào bất kỳ site nào: Stripe, Notion, site đối thủ, trang brand Việt Nam ưa thích.
2. Chạy Skill UI để trích xuất design system thành skill cấp project.
3. Gọi lại skill này cho mọi page tiếp theo để giữ nguyên “giọng nói hình ảnh” của brand.

Trên GitHub đã có demo clone Notion bằng cách này. Dù dự án còn rất sớm, concept “trỏ vào website → có ngay skill thiết kế” cực kỳ mạnh, nhất là khi dev không phải designer.

Tóm tắt nhanh

• Skill UI biến design system của website có sẵn thành skill dùng lại cho Claude.
• Ultra Mode dùng Playwright để bắt hover, animation, interaction — không chỉ đọc HTML.
• Chỉ cần một prompt, Claude có thể tạo trang “giả Stripe” khá thuyết phục sau khi học skill.
• Skill không khoá vào một site, tái sử dụng được cho nhiều page và nhiều project.
• Rất mạnh khi muốn xuất phát từ một website “chuẩn gu” mà không biết mô tả design bằng lời.

---

WebGPU Skill và Awesome Design MD giải quyết vấn đề gì?

WebGPU Skill là một skill chuyên sâu giúp Claude Code viết được các component animation phức tạp tương tác trực tiếp với GPU. Mục tiêu là tiến gần tới những site “level 7” dùng WebGL, shader custom, hiệu ứng 3D ấn tượng kiểu portfolio của các studio digital.

Skill này dạy Claude:

• Cách setup renderer và pipeline đồ hoạ.
• Cách viết shader và tạo material dạng node-based.
• Cách cấu trúc code để giữ hiệu năng ở mức chấp nhận được.

Khi thử một prompt đơn giản kiểu “tạo hero section với hiệu ứng particle 3D di chuyển theo chuột”, Claude dùng WebGPU Skill có thể dựng được prototype khá hợp mắt trong tầm 10 phút — đủ để demo concept, dù chưa bằng tay code của chuyên gia.

Song song đó, Awesome Design MD là một GitHub repo lớn chứa các file “design markdown” mô tả cực chi tiết design system của nhiều website ngoài đời thật. Repo này lấy cảm hứng từ công cụ Stitch của Google (sẽ nói ở phần sau).

Mỗi file markdown thường gồm:

• Tổng quan site, brand và định hướng thiết kế.
• Hệ màu, spacing, typography, heading, button, card, form.
• Các pattern layout và component tái sử dụng.

Nhiều brand lớn như 11Labs và Bugatti được phân tích kỹ, cho phép bạn copy trực tiếp “từ điển thiết kế” của họ dưới dạng text mà Claude có thể hiểu.

Tài liệu tham khảo về WebGPU:

• Tài liệu chính thức: https://gpuweb.github.io/gpuweb/
• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API

Nên dùng WebGPU Skill và Awesome Design MD trong trường hợp nào?

WebGPU Skill không dành cho mọi dự án. Nó phù hợp khi:

• Làm portfolio hoặc landing cho sản phẩm sáng tạo, cần hiệu ứng ấn tượng.
• Cần prototype nhanh một animation phức tạp mà team chưa quen WebGPU hay WebGL.

Còn Awesome Design MD phù hợp khi bạn muốn tự tay chọn, trộn và chỉnh từng thành phần của design system — thay vì để tool tự động hoá hoàn toàn như Skill UI. Bạn có control cao hơn và hiểu rõ hơn vì sao site đó trông đẹp.

Skill UI giống như “máy scan thiết kế tự động”, còn Awesome Design MD giống cuốn sách giải phẫu từng chi tiết — phù hợp cho người muốn đi sâu thay vì chỉ copy.

Tóm tắt nhanh

• WebGPU Skill dạy Claude viết component animation tận dụng GPU, gần với WebGL và shader custom.
• Phù hợp cho site cần hiệu ứng hình ảnh ấn tượng, không dành cho mọi dự án.
• Awesome Design MD là repo markdown mô tả chi tiết design system của nhiều website thật.
• Khác với Skill UI tự động, Awesome Design MD cho bạn control và hiểu biết sâu hơn.
• Một bên là kỹ thuật (WebGPU), một bên là ngôn ngữ thiết kế (MD) — cả hai bổ sung cho nhau.

---

Stitch và UI UX Pro Max giúp tối ưu workflow với Claude Code như thế nào?

Stitch là công cụ miễn phí của Google để tạo mockup giao diện web trực quan trước khi động đến dòng code nào. Thay vì để Claude code xong rồi mở dev server xem thử, bạn đảo ngược thứ tự: chốt thiết kế trước, implement sau.

Quy trình với Stitch khá thẳng:

1. Viết prompt mô tả trang muốn làm, có thể đính kèm screenshot làm tham chiếu.
2. Stitch sinh ra file “design markdown” đầy đủ: màu sắc, font, button, label.
3. Đồng thời nó render nhiều biến thể layout cho hero và toàn trang để bạn chọn và chỉnh trực tiếp.

Trên thực tế, việc click và kéo chỉnh trong Stitch nhanh hơn nhiều so với vòng lặp quen thuộc: Claude sinh code → chạy dev server → nhận ra chỗ sai → chỉnh prompt → lặp lại. Cắt bỏ được vòng lặp đó tiết kiệm đáng kể thời gian, đặc biệt ở giai đoạn đầu khi layout còn chưa chắc.

Tham khảo thêm về hệ sinh thái Stitch tại Google:

• https://design.google/
• https://material.io/

UI UX Pro Max khác gì skill mặc định của Anthropic?

UI UX Pro Max là skill nâng cấp dành cho Claude, có thể xem như “phiên bản thông minh hơn” của Front-end Design Skill. Thay vì nhảy vào code ngay, skill này:

1. Hỏi bạn một loạt câu hỏi để hiểu ngành, mục tiêu và tính cách sản phẩm.
2. Áp dụng 161 quy tắc suy luận chuyên biệt theo từng ngành.
3. Tạo ra design system phù hợp với bối cảnh đó — không ép mọi thứ thành SaaS, không bắt buộc React.

UI UX Pro Max trung lập về stack và tập trung vào nguyên tắc UX/UI hơn là framework. Điều này rất hợp với nhiều dự án thực tế, nơi team dùng Vue, Svelte hoặc template thuần HTML/CSS. Khi thử skill này cho một dự án nội dung, bộ màu và typography Claude đề xuất khác hẳn kiểu “dashboard SaaS” thông thường — trông mềm và có chất biên tập hơn nhiều.

Tóm tắt nhanh

• Stitch cho phép tạo mockup trực quan và file design markdown trước khi viết code.
• Nó cắt bỏ vòng lặp “generate code → mở server → xem” tốn nhiều thời gian.
• UI UX Pro Max dùng 161 rule theo ngành để tạo design system phù hợp ngữ cảnh.
• Skill này hỏi trước khi thiết kế, không tự áp mặc định “trang SaaS”.
• Cặp Stitch và UI UX Pro Max tối ưu hoá toàn bộ workflow thiết kế với Claude Code.

---

21st.dev và Taste Skill có thực sự giúp AI “có gu” hơn không?

21st.dev là thư viện component UI chất lượng cao, cho phép bạn duyệt hàng trăm component và đưa vào Claude Code chỉ với một lần copy prompt. Quan trọng hơn, thứ bạn copy không chỉ là HTML/CSS mà là hướng dẫn tối ưu để Claude tái tạo component đúng ngữ cảnh.

Ví dụ trên 21st.dev:

• Hero section với robot 3D di chuyển theo chuột (dùng Spline).
• Card có luồng ánh sáng chạy theo con trỏ.
• Nút bấm với hiệu ứng phát sáng tinh tế.

Những chi tiết nhỏ này khiến trang web trông được trau chuốt thật sự — khác hẳn template miễn phí chỉnh vội. Với người không chuyên thiết kế, chỉ việc duyệt qua nhiều biến thể nút, card và section trên 21st.dev cũng giúp mở rộng “từ vựng thiết kế” rất nhanh.

Song song đó, Taste Skill là bộ skill nhằm đưa cảm giác thẩm mỹ vào Claude Code. Nó cho phép điều chỉnh mức độ trừu tượng và cá tính của kết quả — từ phong cách AI phổ thông sang layout độc đáo hơn.

“AI không có gu. Vậy nếu ta đưa ‘gu’ cho nó dưới dạng một skill thì sao?”

Trong các demo của Taste Skill, layout ít lặp bento box, nhiều scroll animation và cách chia khối bất thường hơn. Không phải lột xác hoàn toàn, nhưng “khác” đủ để thoát ra khỏi rừng AI slop xung quanh.

Tóm tắt nhanh

• 21st.dev cung cấp component UI đẹp và “copy prompt” để Claude triển khai đúng.
• Các hiệu ứng nhỏ như ánh sáng, 3D robot và cursor-follow nâng hẳn cảm giác hoàn thiện.
• Nền tảng cũng là nguồn cảm hứng cho người không chuyên UI, giúp mở rộng vốn thiết kế.
• Taste Skill điều chỉnh “gu” giao diện, giảm bớt sự nhàm chán kiểu AI mặc định.
• Kết hợp 21st.dev và Taste Skill giúp cả chi tiết lẫn tổng thể đều “có vị” hơn.

---

Vì sao Google Fonts và Playwright CLI là cặp bài trùng cuối cùng?

Google Fonts là kho font web miễn phí cực lớn — và cũng là cách nhanh nhất để thoát khỏi “lời nguyền Inter” của Claude Code. Nếu không nói gì, Claude hầu như luôn chọn Inter, biến mọi site thành anh em họ về typography.

Trên Google Fonts, bạn lọc font theo:

• Cảm xúc: trang trọng, vui tươi, retro, tối giản.
• Hình dáng: góc cạnh, mềm mại, slab, mono.
• Family: serif, sans-serif, display.

Trong thực tế, tôi thường chọn trước 2–3 font, test nhanh trên một đoạn copy, rồi đưa danh sách đó cho Claude kèm mô tả cảm giác muốn có. Chỉ thay đổi font, không đổi layout, cảm giác trang đã khác đi rõ rệt.

Tài liệu chính thức Google Fonts: https://fonts.google.com/

Playwright CLI là công cụ dòng lệnh để tự động hoá test toàn bộ tương tác trên web. Đây là bước không thể bỏ qua nếu bạn để Claude sinh nhiều logic form, navigation hay state phức tạp ở front-end.

Điểm cần lưu ý: nên dùng CLI chứ không phải integration MCP trong Claude. Với CLI:

• Claude chạy nhiều instance Chrome, tự click, nhập liệu, gửi form và chuyển trang.
• Hỗ trợ cả chế độ headed (thấy cửa sổ) và headless (chạy ngầm).
• Rất phù hợp để test form nhiều edge case mà bình thường phải bấm tay mỏi cả buổi.

Ngoài test, Playwright còn là nền tảng kỹ thuật cho Ultra Mode của Skill UI — giúp phân tích interaction của site tham chiếu. Công cụ này đứng ở cả hai đầu: vừa đảm bảo chất lượng site bạn build, vừa giúp “học” từ site người khác.

Tóm tắt nhanh

• Google Fonts giúp chủ động chọn font, tránh mặc định Inter nhàm chán.
• Chỉ cần đổi typography, cảm giác site có thể thay đổi rất lớn.
• Claude có thể gợi ý font dựa trên mô tả cảm xúc và mục đích site.
• Playwright CLI tự động test mọi interaction, hiệu quả nhất với form nhiều edge case.
• Đây là mảnh ghép kiểm thử quan trọng trong workflow front-end dùng Claude.

---

Nên phối hợp 10 công cụ này theo thứ tự nào cho từng dự án?

Chiến lược tối ưu phụ thuộc vào điểm xuất phát của bạn: chưa có ý tưởng gì, đã có reference, hay đang nâng cấp site hiện tại. Phần này là bản đồ kết hợp 10 công cụ thành một quy trình hợp lý.

Nếu chưa có bất kỳ ý tưởng thiết kế nào:

1. Dùng UI UX Pro Max để Claude hỏi–đáp, hiểu ngành, mục tiêu và tệp người dùng.
2. Lấy design system gợi ý, ném sang Stitch để dựng mockup và chọn layout ưng ý.
3. Từ Stitch, copy code/markdown vào Claude rồi bắt đầu implement chi tiết.

Nếu đã có site tham chiếu bạn thích:

1. Chạy Skill UI hoặc tìm file tương ứng trong Awesome Design MD để lấy design system.
2. Kết hợp với Impeccable để chặn slop ngay từ đầu.
3. Dùng 21st.dev bổ sung component đặc biệt: hero, button, card có hiệu ứng.
4. Thêm Taste Skill nếu muốn layout tổng thể phá cách hơn.

Về typography và hiệu ứng nâng cao:

• Ngay khi bắt đầu, chọn font từ Google Fonts và ghi rõ trong prompt hoặc skill.
• Với dự án cần visual impact cao như portfolio hoặc sản phẩm sáng tạo, cân nhắc thêm WebGPU Skill cho các section quan trọng.

Khi chức năng đã tương đối ổn:

• Dùng Playwright CLI để test end-to-end các interaction chính: form, điều hướng, filter, modal.
• Kết hợp test này với vòng lặp sửa lỗi bằng Claude để tiết kiệm thời gian debug.

“Vì Claude Code dở khoản này, đó lại là tin tốt cho bạn. Đây là khoảng trống nơi bạn có thể tách mình khỏi đám đông.”

Tóm tắt nhanh

• Workflow tối ưu tuỳ thuộc điểm xuất phát: không có idea, có reference, hay cần nâng cấp site hiện tại.
• UI UX Pro Max và Stitch phù hợp cho dự án trắng tinh chưa có hướng thiết kế.
• Skill UI/Awesome Design MD, Impeccable, 21st.dev và Taste Skill phù hợp cho dự án cần “copy vibe”.
• Google Fonts và WebGPU Skill là hai nhánh nâng cấp sâu về typography và hiệu ứng.
• Playwright CLI là bước kiểm thử cuối đảm bảo site AI-generate vẫn chạy mượt.

---

Nên bắt đầu từ đâu? Lộ trình hành động trong 30 ngày

Tuần 1: Nhận diện AI slop và dọn “não” Claude

1. Học và cài Impeccable và Taste Skill.
   Dành thời gian đọc ví dụ before/after và thử trên một landing page nhỏ.

2. Khảo sát Google Fonts và chọn 2–3 font ưa thích.
   Test nhanh trên nội dung mẫu rồi đưa vào prompt/skill dùng chung.

3. Nhận diện AI slop trên site bạn đang có.
   Dùng extension của Impeccable hoặc tự liệt kê các pattern lặp lại.

Tuần 2: Thiết lập workflow design–code mới

1. Chọn route A (chưa có idea) hoặc route B (có site tham chiếu).
   Route A dùng UI UX Pro Max và Stitch, route B dùng Skill UI/Awesome Design MD.

2. Tạo mockup đầu tiên trong Stitch hoặc từ Skill UI.
   Tập trung vào layout, màu và font trước. Chưa cần lo component phức tạp.

3. Bắt đầu implement bằng Claude Code với skill đã chọn.
   Đảm bảo mọi prompt đều có yêu cầu tránh AI slop qua Impeccable.

Tuần 3: Nâng cấp chi tiết và hiệu ứng

1. Duyệt 21st.dev để thêm 3–5 component “signature”.
   Tập trung vào hero, CTA chính và section nổi bật nhất.

2. Thử WebGPU Skill cho một khu vực cần highlight.
   Hero section hoặc background nhẹ cho phần giới thiệu sản phẩm là hai lựa chọn tốt.

3. Điều chỉnh Taste Skill để tìm mức “cá tính” phù hợp.
   So sánh kết quả với layout Claude mặc định để thấy rõ sự khác biệt.

Tuần 4: Ổn định, kiểm thử và tối ưu dài hạn

1. Thiết lập bộ test với Playwright CLI cho luồng chính.
   Login (nếu có), form chính và các nút CTA quan trọng.

2. Chạy test sau mỗi lần refactor với Claude Code.
   Tập thói quen không deploy nếu chưa pass test.

3. Đóng gói skill, font và component thành “bộ preset cá nhân”.
   Lưu lại để mọi dự án mới không bị trôi về AI slop từ đầu.

---

Hệ thống lại & bước tiếp theo

Vấn đề / Câu hỏi	Việc bạn nên làm ngay
Giao diện Claude tạo ra trông giống mọi site SaaS khác	Cài Impeccable và Taste Skill, thay font mặc định bằng Google Fonts
Không biết bắt đầu thiết kế từ đâu cho dự án mới	Dùng UI UX Pro Max để sinh design system rồi mockup trong Stitch
Muốn copy “vibe” của một website nổi tiếng	Dùng Skill UI hoặc tìm file tương ứng trong Awesome Design MD
Site trông ổn nhưng thiếu điểm nhấn	Thêm component từ 21st.dev và tinh chỉnh Taste Skill
Lo ngại site AI-generate có bug tương tác	Thiết lập và chạy test end-to-end bằng Playwright CLI

Claude Code yếu về taste không phải án tử cho front-end — đó là cơ hội. Người chấp nhận mặc định “Claude tạo gì dùng nấy” sẽ mãi bơi trong biển AI slop. Người xem đây là điểm yếu cần bù bằng tool và skill lại có thể nổi bật hơn hẳn, dù không phải designer chuyên nghiệp.

Theo kinh nghiệm của tôi, chỉ cần bốn thứ:

• Chủ động chọn font qua Google Fonts.
• Chặn pattern xấu bằng Impeccable.
• Vay mượn ngôn ngữ thiết kế tốt từ Skill UI, Awesome Design MD hoặc 21st.dev.
• Kiểm thử nghiêm túc bằng Playwright CLI.

Website Claude sinh ra đã khác xa mặt bằng chung. Trong vài tháng tới, khoảng cách giữa người “dạy gu cho AI” và người chỉ bấm nút generate sẽ ngày càng rõ. Câu hỏi còn lại chỉ là: bạn muốn mình thuộc nhóm nào?

---

Câu Hỏi Thường Gặp

Q: AI slop trong thiết kế front-end chính xác là gì?

A: AI slop là tập hợp các pattern giao diện lặp lại, kém thẩm mỹ mà AI thường sinh ra — gradient tím, font Inter ở mọi nơi, layout thẻ 2×2, glassmorphism lạm dụng. Về kỹ thuật không sai, nhưng trang web của bạn trông generic và trôi lẫn vào số đông.

Q: Impeccable khác gì so với Front-end Design Skill mặc định của Anthropic?

A: Front-end Design Skill chủ yếu đưa ra lời khuyên chung chung, còn Impeccable cung cấp 18 command gắn với anti-pattern cụ thể. Nhờ có ví dụ xấu được gắn nhãn rõ, Claude hiểu chính xác cần tránh điều gì thay vì suy đoán mơ hồ.

Q: Nếu tôi không rành thiết kế, nên bắt đầu với công cụ nào trước?

A: Bắt đầu với UI UX Pro Max để Claude hiểu ngành và mục tiêu, sau đó dùng Stitch để xem và chỉnh mockup trực quan. Khi đã có layout cơ bản, đưa sang Claude để sinh code. Vừa dễ kiểm soát, vừa không cần tự nghĩ design từ số 0.

Q: Skill UI có vi phạm bản quyền khi sao chép design của website khác không?

A: Skill UI phân tích design system — màu sắc, spacing, kiểu layout, phong cách component — chứ không copy y nguyên code hay nội dung. Tuy nhiên, bạn vẫn nên dùng nó như nguồn cảm hứng và biến tấu, tránh làm bản sao quá giống, đặc biệt với thương hiệu lớn.

Q: Có bắt buộc phải dùng WebGPU Skill không, hay có thể bỏ qua?

A: Hoàn toàn có thể bỏ qua. WebGPU Skill chỉ thực sự hữu ích khi bạn cần hiệu ứng hình ảnh phức tạp, thiên về portfolio hoặc site sáng tạo. Với đa số trang nội dung, dashboard hay landing thông thường, Impeccable, Skill UI, Stitch, 21st.dev và Playwright CLI là đã đủ để tạo ra sự khác biệt lớn.