🔥

SVG Animations

🥉ĐỒNG
@supermemoryai >

Công cụ tạo hiệu ứng hoạt hình SVG - Thiết kế Icon & Hiệu ứng vẽ nét

★ 79,9735,4730Cập nhật 2 tháng trước
Sơ cấp⏱ 15 phút triển khaiTiếp thị⏱ Tiết kiệm ~60 - 180 phút mỗi lần dùng
Hoạt động với:
Claude CodeCursor

Cài đặt nhanh

Terminal
git clone https://github.com/supermemoryai/skills
Xem trên GitHub

Mục lục

🔥

@supermemoryai

Cần hỗ trợ?

Chúng tôi xây dựng các kỹ năng và quy trình tự động hóa AI tùy chỉnh cho doanh nghiệp B2B.

Liên hệ ngay →

Đang dùng kỹ năng này?

Khám phá xem các công cụ khác trong hệ thống của bạn kết nối với AI như thế nào.

Tổng quan

Về kỹ năng này

Kỹ năng này hướng dẫn lập trình các hiệu ứng hoạt họa SVG thủ công dành cho lập trình viên ở mọi cấp độ. Bạn sẽ nắm vững các nền tảng SVG bao gồm hệ tọa độ, các khối hình cơ bản, và thẻ path nâng cao kết hợp đường cong Bézier. Làm chủ 3 phương pháp làm ảnh động: hiệu ứng vẽ viền nét bằng CSS (stroke-dasharray), hoạt họa SMIL nhúng trực tiếp hoạt động được cả trong thẻ img, và thuộc tính d-path CSS hiện đại để biến đổi hình dạng (morphing). Tạo thanh tải dữ liệu (loading spinner), hình minh họa động và các icon chất lượng cao kết hợp mask, bộ lọc.

Trường hợp sử dụng

🎯

Thương mại điện tử

Trích xuất dữ liệu sản phẩm từ các trang thương mại điện tử để quản lý tồn kho và phân tích.

🎯

Xuất bản nội dung

Chuyển đổi nội dung blog thành định dạng markdown có cấu trúc để quản lý và xuất bản dễ dàng hơn.

🎯

Nghiên cứu đối thủ

Thu thập thông tin chiến dịch của đối thủ cạnh tranh từ nhiều nguồn để hỗ trợ ra quyết định chiến lược.

🎯

Đánh giá phản hồi

Thu thập đánh giá của người dùng từ nhiều nền tảng để cải thiện phân tích phản hồi sản phẩm.

Phù hợp nhất cho

Tiếp thịTăng trưởng

Thẻ

#animation#animations

Cài đặt & Cấu hình

Cài đặt nhanh

Sao chép lệnh cài đặt bên dưới và chạy trong terminal của bạn.

Terminal
git clone https://github.com/supermemoryai/skills

Cài đặt thay thế (Git Clone)

Terminal
git clone https://github.com/supermemoryai/skills

Yêu cầu hệ thống

  • ✓ Claude Code hoặc AI Agent tương thích
  • ✓ Hoạt động với: Claude Code, Cursor

Hướng dẫn nhanh

1

Cài đặt kỹ năng

Sao chép lệnh cài đặt ở trên và chạy trong terminal của bạn.

2

Mở AI Agent của bạn

Mở Claude Code, Cursor hoặc AI agent lập trình mà bạn muốn sử dụng.

3

Chạy thử

Sử dụng mẫu prompt hoặc ví dụ bên dưới để chạy thử kỹ năng.

4

Tùy biến

Tùy biến cấu hình kỹ năng phù hợp với quy trình làm việc của bạn.

Ví dụ sử dụng

Mẫu Prompt & Hướng dẫn

Hướng dẫn & Kịch bản
Tham khảo mã nguồn hoặc tài liệu đính kèm trên GitHub để xem các ví dụ minh họa chi tiết.

Công cụ tương thích

Kỹ năng này tương thích hoàn toàn với các trợ lý lập trình AI và môi trường sau:

🤖

Claude Code

Môi trường thực thi gốc

💻

Cursor & Windsurf

Tích hợp Agent biên tập

Máy chủ MCP

Kỹ năng này hỗ trợ Model Context Protocol (MCP), cho phép tích hợp trực tiếp như một dịch vụ MCP mở rộng tính năng cho AI Agent.

# Đăng ký trong cấu hình Claude Desktop của bạn:

{
  "mcpServers": {
    "svg animations": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-svg animations"]
    }
  }
}