Câu lệnh cơ bản
Câu lệnh mẫu trong hướng dẫn của WebMotion.
Dùng skill webmotion làm web giới thiệu sản phẩm [tên sản phẩm], style tùy chọnWebMotion
Plugin cho Claude Code dựng trang giới thiệu một sản phẩm: khối 3D xoay được (Three.js), cuộn mượt (GSAP ScrollTrigger và Lenis), hình minh họa sinh bằng AI, hướng thẩm mỹ chọn từ các style gợi ý theo ngành và có bước tự kiểm tra trước khi bàn giao.
Thay phần trong ngoặc vuông bằng nội dung thực tế trước khi gửi.
Kèm brief đầy đủ
Năm dòng brief theo bước 1 trong quy trình của WebMotion.
Dùng skill webmotion làm web giới thiệu sản phẩm [tên sản phẩm].
Người xem: [đối tượng khách hàng].
Cảm xúc cần tạo: [ví dụ: tin cậy, cao cấp].
Thông số có nguồn: [thông số và đường dẫn nguồn].
Câu chuyện 4 tới 6 nhịp cuộn: [liệt kê các nhịp].
Style: [tên style].Dùng thẻ style với AI khác
Chưa cài plugin: chép thẻ style trên trang WebMotion rồi dán vào công cụ AI bất kỳ.
Dựa trên thẻ style dưới đây, dựng một trang giới thiệu sản phẩm [tên sản phẩm] bằng HTML, CSS và JavaScript trong một file.
[Dán nội dung thẻ style]Mỗi style ghi rõ ngành phù hợp. Bấm vào ảnh để đọc thẻ style đầy đủ trên GitHub.
Điện ảnh tối
01_dien-anh-toiNhư ngồi trong rạp khi đèn vừa tắt: nền gần đen, một chùm sáng rơi lên sản phẩm, mọi thứ còn lại lùi vào bóng tối. Người xem thấy mạnh, bí ẩn, đáng khao khát, nên hợp đồ uống, ô tô, game, nơi cảm giác quan trọng hơn thông số.
Tối giản Thụy Sĩ, lưới chặt
02_toi-gian-thuy-siNhư một cuốn catalogue được sắp bằng thước kẻ: mọi thứ thẳng hàng, nền sáng, chữ đậm rõ, ảnh sản phẩm là điểm duy nhất có màu. Người xem thấy thông minh, có trật tự, đáng tin, nên hợp nội thất, kiến trúc, phần mềm B2B nơi sản phẩm tự nói chuyện.
Tạp chí sang, chữ có chân
03_tap-chi-sangNhư lật trang một tạp chí thời trang dày giấy: chữ có chân thanh lịch, ảnh lớn thở rộng, câu chữ ít mà chọn lọc. Người xem thấy tinh tế, hiếm, đáng giữ lại, nên hợp mỹ phẩm, trang sức, khách sạn nơi cảm giác sang quan trọng hơn lời chào hàng.
Pop khối màu neo-brutalism
04_pop-khoi-mauNhư một tấm sticker khổ lớn dán lên trang: màu phẳng chói, viền đen dày, bóng đổ cứng không nhòe, mọi thứ như đang la lên "nhìn tôi". Người xem thấy vui, thẳng thắn, trẻ, nên hợp app, đồ ăn vặt, startup cần nổi bật ngay giây đầu.
Poster retro thập niên 70
05_poster-retro-70Như tấm poster hòa nhạc hay bao bì soda thập niên 70 vẫn còn thơm mùi giấy cũ: màu cam cháy, mù tạt, nâu đất, chữ có chân tròn mập, họa tiết sóng và vòng cung. Người xem thấy ấm, vui, hoài niệm, nên hợp bia, cà phê, thời trang đường phố nơi thương hiệu muốn có "chất riêng".
Hữu cơ tự nhiên
06_huu-co-tu-nhienNhư bước vào vườn lúc sáng sớm: màu rêu, đất, kem; chất liệu giấy, vải, lá; hình khối mềm không góc cạnh. Người xem thấy yên, thật, thuộc về đất, nên hợp nông sản, trà, mỹ phẩm thiên nhiên nơi câu chuyện nguồn gốc là điểm bán.
Lưới bento công nghệ
07_bento-cong-ngheNhư hộp cơm bento: mỗi ngăn một món, ngăn to ngăn nhỏ xếp khít nhau thành một bức tranh gọn. Người xem quét một lượt là nắm được tính năng, thấy hiện đại, ngăn nắp, nên hợp SaaS, thiết bị điện tử nơi cần giới thiệu nhiều điểm mạnh mà không rối.
Vẽ tay vui nhộn
08_ve-tay-vui-nhonNhư mở hộp bút màu của con: nét vẽ lệch nhẹ, màu kẹo, mọi thứ hơi nghiêng và biết nhún nhảy. Người xem (bố mẹ lẫn bé) thấy an toàn và muốn chạm vào. Hợp đồ trẻ em, mẹ và bé, ăn vặt vì hình vẽ tay làm sản phẩm bớt "công nghiệp".
Y tế sạch, đáng tin
09_y-te-sachNhư bước vào phòng khám sạch, sáng, nhân viên nói chậm và rõ. Người xem thấy yên tâm, không bị ép mua. Hợp ngành y tế, dược, bảo hiểm vì tin cậy quan trọng hơn gây choáng.
Tài chính vững chãi
10_tai-chinh-vung-chaiNhư bước vào sảnh ngân hàng lâu đời: tường đá, ánh đèn ấm, giọng nói điềm đạm. Người xem thấy tiền của mình an toàn và người phía sau biết mình đang làm gì. Hợp ngân hàng, đầu tư vì cảm giác kiểm soát và thận trọng là thứ họ mua.
Kỹ thuật bản vẽ blueprint
11_ky-thuat-ban-veNhư mở bản vẽ kỹ sư: nét mảnh chính xác, kích thước ghi rõ, mọi bộ phận đều có tên. Người xem thấy sản phẩm được tính toán kỹ, đáng tiền. Hợp máy móc, thiết bị gia dụng, phụ tùng vì khách muốn biết "bên trong có gì" trước khi mua.
Kiến trúc ánh sáng
12_kien-truc-anh-sangNhư đứng trong một tòa nhà lúc nắng xiên qua khe cửa: ánh sáng, bóng đổ và vật liệu là nhân vật chính, chữ chỉ thì thầm. Người xem hình dung mình đang sống hoặc nghỉ ở đó. Hợp bất động sản, resort vì thứ bán là không gian và cảm giác.
Ẩm thực ấm cúng
13_am-thuc-am-cungNhư mở cửa tiệm bánh lúc sáng sớm: mùi bột nướng, đèn vàng, bàn gỗ, người làm bánh chào bằng nụ cười. Người xem thấy đói và thấy được chào đón. Hợp nhà hàng, tiệm bánh vì thứ bán là cảm giác ngồi xuống và ăn.
Thể thao năng lượng
14_the-thao-nang-luongNhư tiếng còi xuất phát: tim đập nhanh, chữ to, hình cắt sát. Người xem thấy muốn đứng dậy và tập ngay. Hợp giày, gym, nước thể thao vì thứ bán là động lực và tốc độ.
Thời trang thể nghiệm
15_thoi-trang-the-nghiemNgười xem thấy như lật một tạp chí nghệ thuật in lỗi có chủ ý: chữ rất to, chồng lên ảnh, cắt ngang sản phẩm, lúc thì thầm lúc thì hét. Hợp thời trang và nghệ thuật vì chính chữ cũng là một món đồ thiết kế, không chỉ là chú thích.
Di sản Á Đông, văn hóa Việt
16_di-san-a-dongNgười xem thấy chậm lại, trang nghiêm mà ấm: như bước vào một gian trưng bày nhỏ có mùi trà và gỗ cũ. Hợp hàng thủ công và quà tặng vì kể được câu chuyện nghề, người làm, chất liệu, chứ không chỉ khoe món đồ.
Tương lai Y2K, ánh chrome
17_tuong-lai-y2kNgười xem thấy như đầu những năm 2000 tưởng tượng về tương lai: kim loại bóng, bong bóng, ngôi sao bốn cánh, giao diện trong suốt. Hợp âm nhạc, sự kiện, đồ công nghệ giới trẻ vì vừa hoài niệm vừa sáng, và chrome phản chiếu rất ăn với 3D.
Xanh bền vững
18_xanh-ben-vungNgười xem thấy sạch, nhẹ, có hy vọng và đáng tin: công nghệ đứng cạnh thiên nhiên chứ không đè lên nó. Hợp xe điện và năng lượng sạch vì cần vừa hiện đại vừa chứng minh được con số, không chỉ nói đẹp.
Phiêu lưu, bản đồ địa hình
19_phieu-luu-dia-hinhNgười xem thấy như cầm cuốn sổ tay thám hiểm và tấm bản đồ giấy sắp đi đâu đó: háo hức, bụi đường, đáng tin. Hợp tour và đồ dã ngoại vì sản phẩm gắn với địa điểm, độ cao, thời tiết; đường đồng mức và tọa độ kể điều đó rất tự nhiên.
Học tập thân thiện
20_hoc-tap-than-thienNgười xem thấy được chào đón, không bị phán xét, và tin là mình học được. Hợp khóa học và edtech vì phụ huynh, người đi làm cần cảm giác an toàn, dễ bắt đầu; lộ trình, tiến độ, người thật cần hiện ra rõ.
Yêu cầu
- Claude Code
- Python 3.10 trở lên (cho bước tách nền, dựng khối)
Cách 1: Cài trong Claude Code
- Thêm kho plugin
/plugin marketplace add andyluu98/WebMotion - Cài plugin
/plugin install webmotion@webmotion
Cách 2: Cài bằng dòng lệnh
- Thêm kho plugin
claude plugin marketplace add andyluu98/WebMotion - Cài plugin
claude plugin install webmotion@webmotion - Gói Python cho bước tách nền, dựng khối
Chạy trong thư mục plugin WebMotion.
pip install -r skills/webmotion/scripts/requirements.txt
TA-Assistant
System Online