mcpskills.net
技能MCP智能体提示词
mcpskills.net — A curated directory of AI agent Skills and MCP servers
TermsPrivacy
← 返回技能
Creative

Slack GIF 制作器

为 Slack 表情和回应创建自定义 GIF。当用户需要用于团队沟通的动画 GIF 时使用。

作者:Anthropic仓库 →来源 →

为 Slack 表情和回应创建自定义动画 GIF。

Slack 的 GIF 要求

技术规格

尺寸:

  • 推荐:128x128 像素
  • 最大:256x256 像素
  • 正方形宽高比

文件格式:

  • 必须为 GIF 格式
  • 支持动画 GIF
  • 文件大小:自定义表情需小于 256KB

动画:

  • 帧率:10-15 fps
  • 循环次数:无限
  • 时长:通常 1-3 秒

制作流程

1. 设计构思

定义 GIF:

  • 用途(回应、表情、插图)
  • 风格(极简、精细、卡通)
  • 动画类型(循环、单次播放、弹跳)

草拟创意:

  • 缩略图草图
  • 逐帧拆解
  • 节奏与韵律

2. 帧的制作

逐帧法:

// Create individual frames
const frames = [];

// Frame 1
frames.push(createFrame1());

// Frame 2
frames.push(createFrame2());

// Frame 3
frames.push(createFrame3());

洋葱皮(Onion Skinning):

  • 以降低的不透明度显示上一帧
  • 在各帧之间保持一致性
  • 平滑过渡

3. 动画组装

使用 Canvas:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 128;
canvas.height = 128;

// Draw each frame
frames.forEach((frame, index) => {
  setTimeout(() => {
    ctx.clearRect(0, 0, 128, 128);
    drawFrame(ctx, frame);
  }, index * 100); // 100ms per frame
});

4. 导出为 GIF

使用 gif.js:

const gif = new GIF({
  workers: 2,
  quality: 10,
  width: 128,
  height: 128
});

// Add frames
frames.forEach(frame => {
  gif.addFrame(frame, { delay: 100 });
});

gif.render();

Slack 常见的 GIF 类型

回应

  • 点赞/点踩
  • 鼓掌
  • 火焰
  • 爱心
  • 大笑/哭泣

情绪

  • 开心/兴奋
  • 难过/失望
  • 惊讶/震惊
  • 困惑/思考
  • 生气/烦躁

动作

  • 挥手
  • 击掌
  • 庆祝
  • 捂脸
  • 耸肩

最佳实践

  • 保持文件较小以便快速加载
  • 在小尺寸下采用简洁的设计
  • 确保动画循环流畅
  • 在最终定稿前先在 Slack 中测试
  • 考虑无障碍性(alt 文本)
  • 在整套表情中保持一致的风格