Skill frontend-design của Claude: cài rồi có tự chạy không? Thử thật 3 lần

Skill frontend-design là skill chính thức của Anthropic giúp Claude làm giao diện web có chủ đích, tránh kiểu trang "nhìn là biết AI làm". Bài này thử thật ba lần với cùng một câu lệnh làm landing page cho một quán cà phê. Kết quả đáng chú ý nhất: cài skill xong, Claude không tự dùng nó. Chỉ khi gọi tên skill trong câu lệnh, trang mới khác hẳn.

Thử nghiệm ngày 10/10/2026 với Claude Code 2.1.294 (model Opus 5.5, mức effort high) trên Linux, bật auto mode. Quán "Hiên Nhà" là quán giả định; giá, địa chỉ và số điện thoại trong các trang đều do AI tự đặt. Mỗi cách chỉ chạy một hai lần, nên đây là quan sát thực tế, không phải thống kê.

Xem video chạy thử thật: https://youtu.be/9_nXl0opjzw

Cách thử: ba lần, cùng một câu lệnh

Câu lệnh dùng cho cả ba lần:

Làm landing page cho quán cà phê Hiên Nhà ở Hà Nội (quán giả định): giới thiệu quán, thực đơn 6 món kèm giá, giờ mở cửa, địa chỉ, nút đặt bàn. Một file index.html duy nhất, HTML và CSS, không cần hỏi lại.

1. Lần 1, không skill: thư mục trống, chưa cài gì.
2. Lần 2, cài skill rồi gõ y nguyên câu lệnh.
3. Lần 3, gọi tên skill: câu lệnh mở đầu bằng "Dùng skill frontend-design."

Mỗi lần là một thư mục riêng và một phiên Claude Code mới, nên lần sau không thấy kết quả của lần trước.

Cài skill frontend-design

frontend-design nằm trong gói example-skills của kho anthropics/skills. Cài vào thư mục đang làm:

claude plugin install example-skills@anthropic-agent-skills --scope project

Chưa thêm kho này vào Claude Code thì chạy trước claude plugin marketplace add anthropics/skills. Chưa rõ skill là gì thì đọc bài Claude Skill là gì? Cài skill từ GitHub và dùng thử làm PowerPoint.

Lần 1: không skill, trang đẹp nhưng "đúng kiểu AI"

Claude nghĩ khoảng 1 phút 46 giây rồi viết file index.html dài 442 dòng: thanh menu, phần giới thiệu, thực đơn 6 món có giá, giờ mở cửa, địa chỉ, nút đặt bàn, ly cà phê vẽ bằng CSS. Nhìn qua thì khá đẹp.

Nhưng chính file SKILL.md của frontend-design liệt kê những đặc điểm mà trang do AI làm hay mắc. Trang lần 1 dính gần đủ:

• Nền kem, chữ có chân, màu cam đất: skill nêu cụ thể nền gần mã #F4F1EA. Trang lần 1 có nền #F7F1E8, tiêu đề font Lora (có chân), nút màu cam đất.
• Tô nghiêng hoặc đổi màu một cụm chữ trong tiêu đề: "một tách cà phê" in nghiêng, màu cam.
• Nhãn in hoa nhỏ phía trên tiêu đề, ngăn bằng dấu chấm giữa: "CÀ PHÊ PHỐ CỔ · HÀ NỘI".

Khung đỏ trong ảnh không vẽ tay: vị trí lấy từ chính các phần tử trên trang (chữ nghiêng hoặc khác màu trong tiêu đề, chữ in hoa cỡ nhỏ trong màn hình đầu).

Lần 2: cài skill rồi, Claude vẫn không dùng

Ở thư mục mới, cài example-skills, mở Claude Code và gõ y nguyên câu lệnh. Lần này Claude còn tự mở Chrome chụp trang ở bề ngang 1280 và 390 pixel, rồi giảm cỡ chữ tiêu đề. Nhưng cả phiên không có dòng nào nạp skill frontend-design.

Kết quả là cùng một khuôn với lần 1: nền #F6EFE3, tiêu đề Lora, cụm chữ "nghe phố chậm lại." in nghiêng màu cam, nhãn in hoa "CÀ PHÊ PHIN · PHỐ CỔ HÀ NỘI".

Trước đó mình đã chạy cảnh này ở một phiên riêng khác, kết quả giống hệt: skill đã cài, có trong danh sách, nhưng Claude không gọi. Claude tự quyết có dùng skill hay không, nên cài xong chưa chắc skill đã chạy.

Lần 3: gọi tên skill, trang khác hẳn

Câu lệnh mở đầu bằng "Dùng skill frontend-design." Terminal hiện ngay:

Skill(example-skills:frontend-design)
  ⎿  Successfully loaded skill

Lần này Claude nghĩ lâu hơn (khoảng 1 phút rưỡi) và chốt hướng thiết kế trước khi viết code, đúng quy trình skill yêu cầu: phong cách phố cổ Hà Nội với tường vàng, cửa chớp xanh, màu hồng hoa giấy, font Barlow Condensed và Literata, và một hiệu ứng mở cửa chớp duy nhất khi tải trang. File cuối cùng dài 555 dòng.

Trang lần 3 có chữ tên quán to như biển hiệu trên nền xanh, hai cánh cửa chớp hai bên, thực đơn trên nền xanh đậm và một form đặt bàn có chọn ngày giờ. Không còn nền kem, không còn cụm chữ nghiêng nhấn màu, không còn nhãn in hoa.

Chưa hoàn hảo: vẫn phải tự xem lại

Chữ "Hiên Nhà" ở góc trên bên trái bị cánh cửa chớp đè lên, rất khó đọc. Claude vừa định chụp màn hình để tự kiểm thì phiên thử của mình kết thúc, nên lỗi này còn nguyên.

Bài học: skill giúp tránh kiểu mặc định, nhưng không thay được bước tự mở trang ra xem, nhất là trên điện thoại.

Bên trong skill frontend-design

File SKILL.md dài 71 dòng, viết như lời dặn cho trưởng nhóm thiết kế của một studio. Vài ý chính:

• Liệt kê kiểu mặc định của AI: nền kem với chữ có chân và màu cam đất; nền gần đen với một màu xanh chanh nổi; bố cục kiểu báo giấy; bộ thẻ bo góc giống nhau kiểu SaaS; nhãn in hoa, chuỗi ngăn bằng dấu chấm giữa, mũi tên "→" sau nút. Skill nói rõ: những kiểu này không sai, nhưng là mặc định chứ không phải lựa chọn.
• Làm hai lượt: trước tiên lên kế hoạch gồm 4–6 mã màu, font và vai trò, bố cục (có phác bằng ký tự), nguyên tắc riêng; tự soát xem kế hoạch có giống trang chung chung không, sửa rồi mới viết code.
• "Táo bạo ở một chỗ": chọn một điểm đáng nhớ, phần còn lại giữ gọn.
• Mức chất lượng tối thiểu: chạy tốt trên điện thoại, có viền focus khi dùng bàn phím, tôn trọng cài đặt giảm chuyển động.
• Chữ trên trang: viết theo người dùng, nút nói đúng việc sẽ xảy ra.

Cách dùng frontend-design cho đúng

1. Gọi tên skill trong câu lệnh: "Dùng skill frontend-design. …". Trong menu lệnh của Claude Code cũng có /example-skills:frontend-design.
2. Nói rõ đối tượng và chất liệu: skill dựa vào chủ đề để chọn màu, font. Câu lệnh càng có chi tiết thật (quán ở phố nào, khách là ai) thì trang càng riêng.
3. Tự mở trang ra xem trên máy tính và điện thoại trước khi dùng, như lỗi chữ bị đè ở trên.

Đưa trang lên mạng

File index.html mở trên máy chỉ mình bạn xem được. Muốn khách vào được, bạn cần:

• Hosting: chỗ đặt file để ai cũng mở được. Trang tĩnh một file như thế này chạy được trên gói web hosting rẻ nhất, hoặc trên dịch vụ trang tĩnh miễn phí như GitHub Pages nếu chỉ để thử.
• Tên miền: địa chỉ riêng như hiennha.vn để in lên menu, biển hiệu, và để dùng email theo tên miền.

Hosting và tên miền mua ở cùng một nơi thì đỡ phải trỏ tên miền qua lại; iNET bán cả hai, có trung tâm hỗ trợ tiếng Việt. Link trên là link đối tác: Dùng Gì có thể nhận hoa hồng khi bạn đăng ký hay mua qua link đó. Xem thêm giá và gói của Hostinger Web Hosting và tên miền iNET trên Dùng Gì.

Câu hỏi thường gặp

Skill frontend-design là gì?

Là skill chính thức của Anthropic trong kho anthropics/skills, hướng dẫn Claude thiết kế giao diện có chủ đích: chọn màu, font, bố cục theo đúng chủ đề thay vì kiểu mặc định, lên kế hoạch thiết kế trước rồi mới viết code. Cài bằng claude plugin install example-skills@anthropic-agent-skills.

Vì sao cài skill rồi mà Claude không dùng?

Claude tự quyết có dùng một skill hay không, dựa trên việc bạn nhờ và phần mô tả của skill. Trong hai phiên thử với câu lệnh "làm landing page", cả hai lần Claude đều không gọi frontend-design. Muốn chắc chắn, gọi tên skill ngay trong câu lệnh.

Không có skill thì Claude làm web có xấu không?

Không. Trong lần thử này, trang không có skill vẫn đầy đủ nội dung và nhìn khá đẹp. Khác biệt nằm ở chỗ nó rơi đúng vào kiểu mặc định mà nhiều trang AI cùng có, nên dễ bị nhận ra và khó gây ấn tượng riêng.

Có cần hosting để xem trang Claude làm không?

Không. Mở file index.html bằng trình duyệt là xem được trên máy của bạn. Chỉ khi muốn người khác vào xem bằng một địa chỉ web thì mới cần hosting và tên miền.