5 món đồ nghề giúp Claude Code làm giao diện có gu

Claude Code viết code thì nhanh, nhưng giao diện nó tự nghĩ ra thường na ná nhau: nền trắng, chữ xám, nút bo tròn, khoảng cách đều đều. Nhìn thì sạch mà không có gu. 5 công cụ trong bài này chữa đúng chỗ đó, mỗi cái lo một khúc: dạy gu thẩm mỹ, soi lỗi giao diện, mượn nhận diện của các thương hiệu lớn, dựng ảnh mẫu trước khi code, và cho Claude tự mở trình duyệt xem lại thành quả.

Bài này đi từng cái một: nó là gì, cài bằng lệnh nào, dán vào đâu, nhắn câu gì để dùng, và chỗ nào hay vướng.

• Phân biệt được skill, công cụ dòng lệnh và file tham chiếu, ba thứ hay bị gọi lẫn lộn.
• Cài được cả bốn món cần cài bằng lệnh copy sẵn, không cần biết lập trình sâu.
• Biết nhắn câu gì để Claude thật sự dùng tới chúng.
• Biết cái nào miễn phí hẳn, cái nào có giới hạn lượt dùng.

Skill, CLI, file tham chiếu: Ba kiểu khác nhau

5 món dưới đây không cùng loại. Hiểu đúng loại thì lúc cài bạn biết ngay mình đang làm gì, và lúc hỏng cũng biết nhìn vào đâu.

Chuẩn bị máy và cách cài chung

4 trong 5 món cài bằng dòng lệnh, nên làm phần này một lần rồi khỏi lo nữa.

node -v

# cài cả bộ skill của một kho
npx skills add <tên-người>/<tên-kho>

# chỉ cài một skill trong kho đó
npx skills add <tên-người>/<tên-kho> --skill "tên-cài-của-skill"

# xem những skill đã cài
npx skills list

# cài cho riêng dự án đang mở (mặc định), vào .claude/skills/
npx skills add vercel-labs/agent-skills

# cài cho cả máy, vào ~/.claude/skills/
npx skills add vercel-labs/agent-skills -g

1. Taste Skill: 13 skill dạy gu cho Claude

Bộ skill dạy Claude cách bố cục, chọn chữ, chọn màu theo một gu rõ ràng, thay vì bày ra giao diện mặc định ai nhìn cũng thấy quen quen.

Tác giả gọi nó là “bộ khung chống hàng chợ”[1]. Điểm hay là nó không chỉ có một gu: kho có 13 skill, mỗi cái một tính cách khác nhau[2].

Cài cả bộ

Một lệnh là có hết 13 cái, sau đó Claude tự chọn cái hợp với việc bạn đang nhờ:

npx skills add Leonxlnx/taste-skill

# muốn dùng ở mọi dự án thì thêm -g
npx skills add Leonxlnx/taste-skill -g

Chỉ lấy một gu

Không muốn ôm hết thì gọi đúng tên cài của skill đó. Tên cài nằm ở dòng name: trong file SKILL.md, không phải tên thư mục:

# bản chính, chống giao diện hàng chợ
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# gu tối giản
npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-skill"

# sửa lại trang có sẵn
npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-skill"

Cách dùng

Skill tự kích hoạt khi bạn nhờ việc liên quan tới giao diện. Cứ nói việc mình cần, đừng gọi tên skill:

Làm trang giới thiệu cho tiệm cà phê của mình: một khúc đầu trang, một khúc menu,
một khúc đánh giá khách. Gu trầm, ít màu, chữ là nhân vật chính. Đừng dùng template.

Trang /pricing của mình nhìn nhạt quá. Rà lại rồi sửa cho ra chất riêng,
nhưng giữ nguyên nội dung chữ và cấu trúc dữ liệu.

Miễn phí, giấy phép MIT · Chạy được với Claude Code, Cursor, Codex, Gemini CLI · Kho mã nguồn

2. Web Design Guidelines: Người soi lỗi

Skill của Vercel, chuyên đọc lại code giao diện bạn vừa viết và chỉ ra chỗ sai về khả năng tiếp cận và trải nghiệm, kèm số dòng cụ thể[5].

Điểm đáng chú ý là nó không nhớ luật trong đầu. Mỗi lần chạy, skill tải bộ quy tắc mới nhất từ kho web-interface-guidelines về rồi mới soi[6]. Bộ quy tắc đó có hơn 100 điều, từ vùng bấm đủ lớn, thứ tự tab bàn phím, cho tới trạng thái rỗng và thông báo lỗi[4].

Cài

Skill này nằm trong bộ tám skill của Vercel. Lấy đúng một cái:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Hoặc lấy cả bộ, trong đó có react-best-practices và writing-guidelines cũng khá đáng dùng[4]:

npx skills add vercel-labs/agent-skills -g

Cách dùng

Nói rõ file hoặc thư mục cần soi, nếu không nó sẽ hỏi lại bạn muốn soi cái gì[5]:

Soi toàn bộ file trong thư mục app/ theo bộ quy tắc giao diện, liệt kê lỗi kèm số dòng,
xếp theo mức nghiêm trọng. Chưa sửa gì hết, để mình duyệt trước.

Sửa giúp mình các lỗi mức cao trong danh sách vừa rồi, mỗi lần sửa một file.

Miễn phí · Do Vercel làm · Cần mạng lúc chạy để tải bộ quy tắc · Kho mã nguồn

3. Awesome DESIGN.md: Hơn 70 bộ nhận diện

Bộ sưu tập hơn 70 file DESIGN.md rút ra từ website của các thương hiệu lớn, để Claude dựng giao diện theo đúng chất của họ[8].

Mỗi file là một bản mô tả bằng chữ: bảng màu kèm vai trò của từng màu, thứ bậc kiểu chữ, cách tạo nút và thẻ, nguyên tắc bố cục, độ nổi khối và đổ bóng, những điều nên tránh, cách co giãn trên điện thoại. Có Claude, Linear, Notion, Figma, Stripe, Vercel, Cursor, Tesla, cho tới mấy bộ hoài cổ kiểu Dell năm 1996[8].

git clone https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md/design-md
ls

Đọc file DESIGN.md ở thư mục gốc rồi dựng trang chủ theo đúng bảng màu, kiểu chữ
và cách tạo nút mô tả trong đó. Chỗ nào file không nói thì hỏi mình, đừng tự chế.

Miễn phí · hơn 70 bộ, mỗi bộ kèm 2 file xem trước · Kho mã nguồn

4. Image to Code: Vẽ ảnh trước, code sau

Đảo ngược thứ tự quen thuộc: bắt Claude vẽ ảnh mẫu cho từng khúc trang, phân tích kỹ cái ảnh đó, rồi mới viết code bám theo[7].

Lý do của cách làm này khá dễ hiểu. Khi code thẳng, AI phải vừa nghĩ bố cục vừa nghĩ cú pháp, nên hay ra thứ an toàn và nhạt. Có ảnh mẫu trước thì phần thẩm mỹ đã chốt xong, bước code chỉ còn là dịch lại cho đúng.

Ba nguyên tắc skill này bắt tuân theo

• Mỗi khúc trang một ảnh riêng, khổ lớn. Bốn khúc thì bốn ảnh, không nhồi hết vào một tấm cho nhỏ xíu rồi đoán.
• Phân tích ảnh có hệ thống: kiểu chữ, khoảng cách, màu, nút, bố cục, và lấy đúng chữ đang hiện trong ảnh ra dùng.
• Khúc đầu trang phải thoáng, đọc được, nhìn vừa màn hình laptop nhỏ. Không lồng khung trong khung, không rải chi tiết vụn.

Cài

Skill này nằm chung kho với Taste Skill, nên nếu bạn đã cài cả bộ ở mục 1 thì có sẵn rồi. Lấy riêng thì gõ:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"

Cách dùng

Skill chỉ có ích khi phần mềm bạn đang dùng sinh được ảnh. Claude Code bản thường chưa sinh ảnh, nên hoặc bạn gắn thêm một MCP sinh ảnh, hoặc tự tạo ảnh ở chỗ khác rồi kéo vào khung chat[7].

Làm trang bán khoá học gồm bốn khúc: đầu trang, lợi ích, giảng viên, bảng giá.
Vẽ trước bốn ảnh mẫu riêng cho bốn khúc, khổ lớn, mỗi khúc một tấm.
Phân tích từng ảnh về kiểu chữ, khoảng cách, màu và bố cục, rồi mới code theo đúng ảnh đó.

Miễn phí, nằm trong kho taste-skill · Cần công cụ sinh ảnh đi kèm · Xem nội dung skill

5. Playwright CLI: Cho Claude tự mở web xem

Công cụ dòng lệnh của Microsoft, cho Claude mở trình duyệt thật, bấm nút, chụp màn hình và đọc log, mà không phải nuốt cả trang web vào bộ nhớ[9].

Đây là mảnh ghép cuối của quy trình làm giao diện: sửa xong thì phải nhìn lại kết quả. Không có nó, Claude sửa CSS trong bóng tối rồi hỏi bạn “trông ổn chưa”.

npm install -g @playwright/cli@latest
playwright-cli --help

playwright-cli install --skills

# mở một trang, thêm --headed để thấy cửa sổ trình duyệt
playwright-cli open https://cuongmeai.com --headed

# chụp màn hình ra file
playwright-cli screenshot --filename=trang-chu.png

# lấy ảnh chụp cấu trúc trang, nhẹ hơn ảnh thật, hợp cho AI đọc
playwright-cli snapshot

# đọc log trong console của trang
playwright-cli console

Cách dùng

Mở http://localhost:3000, chụp màn hình ở bề ngang 390px và 1440px,
rồi nói xem khúc đầu trang có bị tràn ngang hay chữ bị cắt cụt chỗ nào không.

Bấm thử nút Đăng ký trên trang, xem console có báo lỗi gì không rồi kể lại cho mình.

Miễn phí, nguồn mở · Cần Node.js 18 trở lên · Hơn 70 lệnh chia 11 nhóm · Kho mã nguồn

Ghép cả 5 thành một quy trình

Cài đủ rồi thì đừng dùng rời rạc. Thứ tự dưới đây là cách 5 món ăn khớp với nhau trong một lần làm trang:

Lỗi thường gặp và cách xử lý