jpskill.com
🎨 デザイン コミュニティ 🟡 少し慣れが必要 👤 デザイナー・Web制作者

🎨 Magic Animator

magic-animator

ロゴやUI、SNS用素材に動きを与えるアニメーションをAIが自動生成するSkill。

⚡ ⏱ Figma → 本番コード変換 1日 → 30分

📺 まず動画で見る(YouTube)

▶ Claude Codeで業務自動化を完全攻略!AIエージェントを使いこなす技術と実践デモ ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ロゴやUI、SNS用素材に動きを与えるアニメーションをAIが自動生成するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › Magic Animator を使って、ブランドカラーに沿ったデザイン案を3つ
  • › Magic Animator で、既存のデザインをモダンにリフレッシュ
  • › Magic Animator を使って、レイアウトを整えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Magic Animator Skill

Magic Animator enables designers to add life to static designs in seconds using AI-driven motion, transforming flat UX into premium, dynamic experiences.

Context

This skill is essential for improving UX and engagement through high-quality motion. It works best for animating brand assets, interface elements, and micro-interactions.

When to Use

Trigger this skill when:

  • Adding life to a static logo or brand mark to make it memorable.
  • Enhancing website/app UI with loaders, animated widgets, or smooth transitions.
  • Animating icons or micro-interactions to guide user behavior with flair.

Execution Workflow

  1. Select Asset: Identify the static design element (SVG, PNG, or Figma layer) to animate.
  2. Choose Preset/Category: Select the appropriate domain (Logos, UI, Icons, Social Media) to ensure the motion curves match the context.
  3. Animate: Use the AI Animation Assistant via chat-based prompts to request specific, premium motion (e.g., "Make it feel like a high-end luxury brand reveal" or "Give it a kinetic, elastic pop").
  4. Refine: If available, edit keyframes for further polish, ensuring easing curves feel natural and high-end.
  5. Export & Integrate: Export the final animation as Lottie (JSON) for web/mobile performance, or GIF/MP4 for social.

Strict Rules

  • ABSOLUTE MANDATE: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT rely on basic, linear animations. Use motion to create a "wow" factor.
  • Purposeful Motion: Every animation must feel deliberate and premium. Avoid chaotic or overly fast motion that distracts from the core UX.
  • Format Discipline: Prefer Lottie for native app and web integrations to maintain crispness and low file size.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.