Claude viết landing page kiểu gì thì ai dùng rồi cũng biết: bố cục na ná nhau, hero toàn gradient tím xanh, chữ căn giữa, nút bo góc. MotionSites vừa đẩy lên GitHub một skill miễn phí nhắm thẳng vào chỗ đó. Tên repo là Motionsites-AI/claude-skill, mô tả ngắn gọn: “make Claude build award-level, cinematic landing pages”.
Repo này làm gì, giải quyết vấn đề gì
README của skill tự chỉ ra ba lý do khiến web do AI dựng trông giống nhau: brief mơ hồ, không có media thật, và không ai kiểm tra lại kết quả. Skill này đánh vào cả ba.
Cụ thể, khi bạn nhờ Claude làm một trang, skill sẽ khiến nó đọc 2 đến 3 trong số 40 example prompt có sẵn (những prompt được like nhiều nhất trên MotionSites) để bắt đúng mức độ chi tiết. Sau đó nó chọn media từ một “media shelf” gồm hơn 50 video hero dạng cinematic, 30 cut-out 3D nền trong suốt và 29 ảnh, tất cả hiển thị trên contact sheet đánh số để Claude chọn bằng mắt thay vì đoán tên file. Tiếp theo là viết một build spec rõ ràng trước khi gõ code. Cuối cùng, Claude chụp ảnh màn hình sản phẩm của chính nó, chạy QA script kiểm tra asset hỏng, tràn layout trên mobile, font, video phát được hay không, rồi sửa cho tới khi đạt ngưỡng điểm.
Cái hay nằm ở chỗ “look-and-fix loop”. Hầu hết workflow AI code hiện nay dừng ở “sinh ra file HTML”, còn chất lượng thị giác thì mặc kệ. Việc tự screenshot rồi chấm điểm là vòng lặp feedback đóng, khác hẳn một lần generate.
Bên trong còn 55+ technique recipe kèm code chạy được: video loop liền mạch, liquid glass, headline mờ dần từng chữ, video tua bằng chuột, spotlight reveal, depth carousel, scroll story, 3D model thật bằng Three.js. Kèm theo là bộ rule về typography với con số cụ thể (type scale, tracking, spacing, màu, timing animation).
Vì sao nó đang hot
Repo mới tạo ngày 26/10/2026 và đã có 508 sao. Với một repo chưa có topics, chưa có release lâu năm, con số đó đến trong thời gian rất ngắn. Lý do dễ hiểu: nhu cầu “web trông không giống web AI” đang rất thật. Dân làm freelance, indie hacker, người bán template đều gặp cùng một vấn đề khi giao landing page cho khách: trông giống đồ mẫu.
Điểm khác biệt so với mấy repo prompt collection thông thường là skill này không chỉ đưa prompt. Nó đưa media thật, đưa spec template, đưa vòng QA. Và nó có chế độ “prompt mode”: thay vì xin code, bạn xin một prompt đã tinh chỉnh cho Lovable, Bolt, v0, Cursor, Manus, Google AI Studio hoặc Kimi. Đây là nước đi khôn, vì nhiều người không dùng Claude để build mà dùng Claude để viết prompt cho tool khác.
Cài đặt và dùng thử nhanh
Với Claude.ai và Claude desktop: tải file motionsites-web-builder.zip từ release mới nhất, vào Customize → Skills → + → Create skill → Upload a skill, chọn zip và bật skill lên. Nhớ bật code execution trong Settings → Capabilities.
Với Claude Code dạng plugin:
/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsitesNếu không có GitHub SSH key thì dùng đường dẫn đầy đủ:
/plugin marketplace add https://github.com/Motionsites-AI/claude-skill.gitCài thủ công thì copy thư mục plugins/motionsites-web-builder/skills/motionsites-web-builder vào ~/.claude/skills/.
Để vòng look-and-fix chạy tốt nhất, cài Playwright:
pip install playwright && python -m playwright install chromiumSau đó chỉ cần nhờ Claude làm web, skill tự kích hoạt. Vài brief mẫu trong README:
- “Build a landing page hero for a luxury sleep-tracking ring.”
- “Make a portfolio homepage for an architectural photographer in Lisbon. Editorial and quiet.”
- “Write a Lovable prompt for a waitlist page for my AI travel app.”
- “Here’s my current site: make it look award-winning.”
Ai nên dùng, dùng vào việc gì
Freelancer làm landing page cho khách hàng là nhóm hưởng lợi rõ nhất. Brief mơ hồ kiểu “làm sao cho nó xịn” giờ có thể biến thành spec cụ thể, cộng thêm bước QA tự động bắt lỗi tràn layout mobile, thứ mà dân làm nhanh hay bỏ qua.
Indie hacker cần dựng trang waitlist trong buổi chiều cũng hợp. Chế độ prompt mode đặc biệt hữu ích nếu bạn đang dùng Lovable hoặc v0 làm công cụ chính, vì nó sinh prompt thay vì code.
Còn nếu bạn đã có design system riêng, đội design riêng, thì skill này ít giá trị. Nó kéo bạn về gu thẩm mỹ của MotionSites, không phải gu của bạn.
Điểm cần cân nhắc
License ghi là “không rõ” trên trang repo, nhưng README nói rõ: phần instruction và code của skill là MIT, còn example prompt và media vẫn thuộc bản quyền MotionSites. Bạn được dùng chúng trong site build bằng skill này. Đọc kỹ chỗ này trước khi mang đi bán template.
Repo mới toanh, tạo và cập nhật cùng ngày 26/10/2026, chưa có topics, chưa có lịch sử issue để đánh giá độ ổn định. Đây là điểm trừ thực tế: bạn đang dùng đồ mới, lỗi vặt là chuyện bình thường.
Media shelf chỉ là bản sample miễn phí. Bản đầy đủ (500+ prompt, animated hero background, section prompt, 40+ template Lovable, MotionSites MCP) nằm sau sản phẩm trả tiền MotionSites Unlimited. Skill miễn phí, nhưng hệ sinh thái xung quanh thì không. Không có gì sai, chỉ cần biết trước.
Một chi tiết nhỏ: 40 example design đi kèm mỗi cái đều được show cạnh video gốc mà nó dựng trên. Cách trình bày này giúp Claude học được mối liên hệ giữa media và layout, thứ mà prompt text thuần không truyền đạt được.
Nếu bạn đang chán cảnh mở landing page do AI làm ra và nhận ra nó giống hệt cái landing page AI làm tuần trước, thử skill này trước khi tự viết prompt từ đầu. 508 sao trong ngày đầu là tín hiệu đủ để bỏ 15 phút cài thử. Repo ở đây: Motionsites-AI/claude-skill.
Câu hỏi thường gặp
Claude skill Motionsites-AI/claude-skill là gì và có miễn phí không?
Đây là một skill miễn phí trên GitHub giúp Claude dựng landing page kiểu cinematic thay vì các trang na ná nhau. Repo tên Motionsites-AI/claude-skill, mô tả là “make Claude build award-level, cinematic landing pages”, và mới tạo ngày 26/10/2026 đã đạt 508 sao.
Cách cài skill này cho Claude.ai và Claude Code như thế nào?
Với Claude.ai và Claude desktop, bạn tải file motionsites-web-builder.zip từ release mới nhất rồi vào Customize → Skills → + → Create skill → Upload a skill, nhớ bật code execution trong Settings → Capabilities. Với Claude Code, chạy /plugin marketplace add Motionsites-AI/claude-skill rồi /plugin install motionsites-web-builder@motionsites.
Skill này có dùng được cho Lovable, Bolt hay v0 không?
Có. Skill có chế độ “prompt mode” cho phép bạn xin một prompt đã tinh chỉnh cho Lovable, Bolt, v0, Cursor, Manus, Google AI Studio hoặc Kimi thay vì xin code. Ví dụ brief mẫu trong README: “Write a Lovable prompt for a waitlist page for my AI travel app.”
