Tóm tắt nhanh: UI Craft là skill giúp agent giữ một hướng thiết kế thống nhất từ lúc lên ý tưởng tới lúc code và chụp màn hình kiểm tra. Bạn cài nguyên thư mục skill vào dự án, chạy validator, rồi gọi
$ui-craftvới một trong các chế độ build, redesign, audit hoặc study. Nó không thay framework hay bộ component bạn đang dùng, chỉ quyết định giao diện nên trông và hoạt động thế nào, rồi bắt agent chứng minh bằng ảnh chụp.
Khi nhờ agent làm giao diện, bạn dễ nhận về một trang bóng bẩy nhưng chung chung: hero lớn, ba thẻ tính năng, lưới bento, nút kêu gọi, đổi tên sản phẩm mà gần như không cần sửa thiết kế. Mình gọi đó là "AI slop": giao diện sinh nhanh, trông đủ đẹp, nhưng thiếu logic riêng của sản phẩm, dùng mẫu mặc định, nội dung không đáng tin hoặc chưa được kiểm trong trạng thái dùng thật.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%. AgentKit xuất hiện ở mục nguồn gốc bên dưới.
UI Craft chữa từ cách ra quyết định chứ không chỉ ở lớp trang trí. Skill chốt ý đồ thiết kế và yêu cầu agent đưa bằng chứng (ảnh chụp, kết quả test) trước khi báo xong. Mình sẽ giải thích lúc nào nên dùng, cách cài và kiểm tra, các chế độ kèm prompt mẫu, rồi tới quy trình agent làm theo và cách nâng cấp. Hành vi trong bài lấy theo tài liệu của skill.
Khi nào nên dùng
Dùng UI Craft khi bạn cần:
- Xây mới hoặc thiết kế lại một trang hay component.
- Kiểm định giao diện dựa trên cả mã nguồn lẫn giao diện đã hiển thị.
- Học "ADN thiết kế" từ ảnh chụp màn hình hoặc URL bạn đưa.
- So sánh đúng ba hướng thiết kế trước khi triển khai.
- Tạo một hướng
breakouttáo bạo nhưng vẫn dùng được.
Không cần dùng cho việc chỉ có backend, hoặc chỉnh CSS máy móc theo một bản đặc tả đã khoá.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "UI Craft: hướng dẫn từ cài đặt đến prompt đầu tiên" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ui-craft-getting-started". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 24/07/2026
- Giấy phép
- Subscriber-only; redistribution prohibited
- Slug
- ui-craft-getting-started
