Tóm tắt nhanh:
ak-frontend-designnhận yêu cầu, ảnh chụp, video hoặc URL, chọn đường đi theo ý định, viết brief thiết kế 7 dòng rồi dựng từ token. Nó chấm chính trang đã render ở 375, 768, 1440px và sửa tới khi đạt; với URL thì nó audit UX và chỉ sửa khi bạn yêu cầu. Nó không bịa số liệu hay lời khen khách hàng, và không gõ mật khẩu khi audit.
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%.
Tóm tắt
Dùng khi bạn cần một landing page, một màn hình sản phẩm, một trang dựng lại từ ảnh, một bản mô tả thiết kế cho người khác dựng, hoặc muốn soi UX của sản phẩm đang chạy. Không cần chạy đủ 3 vòng chấm khi bạn chỉ muốn thử nhanh một component: đường prototype nhanh vẫn có brief rút gọn và một vòng chấm.
flowchart LR
A["Yêu cầu, ảnh, video hoặc URL"] --> B["ak-frontend-design"]
B --> C["Giao diện chạy được + bảng điểm"]
B --> D["Bản mô tả thiết kế, không code"]
B --> E["Báo cáo audit UX"]
E --> F["Sửa khi bạn yêu cầu"]Bốn khái niệm cần nắm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Đường đi | Bạn muốn giữ giao diện cũ, làm mới, làm lại theo mẫu, hay soi một sản phẩm đang chạy? | Có sẵn design system thì nó đọc token và component cũ trước. Đưa ảnh chụp thì ảnh quyết định bố cục. Đưa URL để audit thì nó đi qua từng trang. |
| Bản brief thiết kế | Giao diện này cho ai, dùng ở đâu, theo hướng nào và vì sao? | Scene: lễ tân phòng khám, máy bàn dùng chung, đèn huỳnh quang, bị gián đoạn liên tục dẫn tới nền sáng, mật độ cao. 7 dòng gồm Register, Scene, Direction, Color, Type, Signature, Dials, giữ cố định qua mọi vòng sửa. |
| Brand hay Product | Đây là trang để gây ấn tượng hay công cụ để làm việc hằng ngày? | Landing page là Brand: núm variance/motion/density mặc định 7/5/3, cặp font tương phản, một hiệu ứng vào trang. Dashboard là Product: 3/2/6, một họ font, màu nhấn chỉ cho hành động chính, trạng thái chọn, focus. |
| Tự chấm trên trang đã render | Trang thật trông thế nào, không phải code "lẽ ra" trông thế nào? | Script chụp trang ở 375, 768, 1440px và in báo cáo chữ: tràn ngang, chữ bị cắt, tương phản thấp, nút chạm nhỏ. Rồi nó chấm 12 mục, mỗi mục 0 đến 2 điểm, nhắm từ 20/24 trở lên và không mục nào dưới 1. |
Yêu cầu của bạn, tài sản thương hiệu và design system sẵn có luôn thắng các mặc định của skill; mặc định chỉ dùng khi brief im lặng để kết quả không chung chung.
Prompt mẫu cho một landing page mới:
/ak-frontend-design Làm landing page cho <tên sản phẩm>, một app đặt lịch
cho tiệm sửa xe nhỏ. Người xem: chủ tiệm, xem trên điện thoại giữa giờ làm.
Ràng buộc: dùng logo và màu cam có sẵn trong thư mục brand/.
Không bịa số liệu hay lời khen của khách.Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 6 tình huống kèm prompt, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
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 "ak-frontend-design: dựng giao diện có gu và tự chấm trên trang thật" 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 "ak-frontend-design". 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
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-frontend-design
