Tóm tắt nhanh:
ak-motion-designlà cố vấn nguyên tắc: nó chốt cảm xúc, tính cách, thời lượng, easing và thứ tự các phần tử, rồi trả lại một brief chuyển động. Phần thực thi chuyển choak-frontend-design,ak-banner-design,ak-videohoặcak-design-system. Nó không viết code, không làm asset, không render.
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 nút, một modal, một hero hay một quảng cáo chuyển động cho ra hồn nhưng chưa biết nên nhanh hay chậm, nảy hay êm, hoặc khi một chuyển động đã có trông cứng. Không cần khi bạn đã có nguyên tắc và chỉ cần code hay file: nói thẳng là nó chuyển việc cho skill thực thi.
flowchart LR
A["Mô tả phần tử hoặc tương tác"] --> B["ak-motion-design"]
B --> C["Brief chuyển động"]
C --> D["ak-frontend-design viết code UI"]
C --> E["ak-banner-design, ak-video làm asset"]
C --> F["ak-design-system lưu thành token"]
C --> G["Dừng, chỉ cần nguyên tắc"]Bốn khái niệm cần nắm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Làm mới hay sửa một chỗ | Bạn đang dựng chuyển động mới, hay chỉnh một chuyển động đã có? | Dựng màn chào mới thì đi đủ 8 bước, từ cảm xúc tới luật 1/3. Chỉ sửa modal đóng bị giật thì nó giữ tính cách và timing sẵn có, chỉ soi đúng tương tác đó. |
| Tính cách chuyển động | Thương hiệu của bạn nên "chuyển động" như thế nào? | Playful nhanh và nảy (150-300ms, vượt đích 10-20%), Premium chậm và không nảy (350-600ms), Corporate gọn (200-400ms), Energetic rất nhanh và nảy mạnh. Không nói gì thì UI mặc định Corporate, hình minh hoạ mặc định Playful. |
| Thời lượng và easing | Chuyển động kéo dài bao lâu, tăng tốc hay giảm tốc? | Nút bấm 120-180ms, modal 300-400ms, chuyển trang 400-600ms. Vào thì giảm tốc dần (ease-out), ra thì tăng tốc (ease-in), và lúc vào dài hơn lúc ra 30-50%. Các con số là mức khởi đầu, chỉnh theo quãng đường, thiết bị, số lần người dùng thấy. |
| Ai làm phần thực thi | Khi đã có nguyên tắc, ai viết code hay làm file? | Code React hay CSS thì ak-frontend-design, banner tĩnh thì ak-banner-design, video thì ak-video, token thì ak-design-system. Skill đó chưa cài thì nó báo thiếu, không tự làm thay. |
Prompt mẫu cho nút CTA trên landing page:
/ak-motion-design Thiết kế phản hồi cho nút CTA "Đăng ký" trên landing page của <tên sản phẩm>:
hover, bấm, gửi thành công và gửi lỗi.
Tính cách: Corporate. Không đổi màu thương hiệu.
Xong khi: có brief thời lượng, easing cho từng trạng thái và bản reduced motion.Skill này không có cờ.
Phần dưới đây là bản chi tiết: luồng chạy, 5 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-motion-design: chốt nguyên tắc chuyển động trước khi viết code" 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-motion-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-motion-design
