Official编程与开发github.com

Slack GIF 创建助手

用于创建适用于 Slack 的动画 GIF 的知识和工具集,提供约束条件、验证工具和动画概念。当用户请求创建 Slack 动画 GIF 时使用。

Slack GIF 创建助手 是什么?

此技能提供了一套完整的工具和知识,用于创建针对 Slack 平台优化的动画 GIF。它详细说明了 Slack 对 GIF 的尺寸要求(如表情 GIF 为 128x128,消息 GIF 为 480x480)、帧率(10-30 FPS)和颜色数(48-128 色)等约束条件。核心工作流基于 GIFBuilder 构建器,支持从零绘制图形或处理用户上传的图片,并使用 PIL 库实现丰富的绘图功能(如椭圆、多边形、线条)。技能还提供了验证器(validate_gif)、缓动函数(easing)和帧助手(frame_composer)等实用工具,帮助用户实现震动、脉冲、弹跳、旋转、淡入淡出、滑动、缩放和粒子爆发等动画效果。最后还包含优化策略(减少帧数、颜色、尺寸或启用表情模式)以减小文件大小。该技能支持 Claude Code、Cursor 等 AI 代理平台,开发者可直接在其环境中调用 Python 代码生成高质量 GIF。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/slack-gif-creator

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Slack GIF 创建器

一个提供工具和知识的工具包,用于创建针对 Slack 优化的动画 GIF。

Slack 要求

尺寸:

  • 表情 GIF:128x128(推荐)
  • 消息 GIF:480x480

参数:

  • FPS:10-30(越低文件越小)
  • 颜色数:48-128(越少文件越小)
  • 时长:表情 GIF 保持在 3 秒以内

核心工作流程

from core.gif_builder import GIFBuilder
from PIL import Image, ImageDraw

# 1. 创建构建器
builder = GIFBuilder(width=128, height=128, fps=10)

# 2. 生成帧
for i in range(12):
    frame = Image.new('RGB', (128, 128), (240, 248, 255))
    draw = ImageDraw.Draw(frame)

    # 使用 PIL 原语绘制动画
    # (圆形、多边形、线条等)

    builder.add_frame(frame)

# 3. 保存并优化
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

绘制图形

处理用户上传的图片

如果用户上传了图片,请考虑他们是否希望:

  • 直接使用(例如,“让这个动起来”、“将其拆分为帧”)
  • 作为灵感(例如,“制作类似这样的东西”)

使用 PIL 加载和处理图片:

from PIL import Image

uploaded = Image.open('file.png')
# 直接使用,或仅作为颜色/风格参考

从零开始绘制

从零开始绘制图形时,使用 PIL ImageDraw 原语:

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

# 圆形/椭圆
draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

# 星形、三角形等任何多边形
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)

# 线条
draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)

# 矩形
draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

不要使用: 表情字体(跨平台不可靠)或假设此技能中预置了图形包。

让图形更美观

图形应看起来精致且有创意,而非基础简陋。以下是方法:

使用更粗的线条 - 始终将轮廓和线条的 width 设置为 2 或更高。细线条(width=1)看起来粗糙且业余。

增加视觉深度:

  • 使用渐变背景(create_gradient_background)
  • 叠加多个形状以增加复杂度(例如,内部带小星星的大星星)

让形状更有趣:

  • 不要只画一个普通的圆——添加高光、环或图案
  • 星星可以有辉光(在后面绘制更大的半透明版本)
  • 组合多个形状(星星 + 火花、圆圈 + 环)

注意颜色:

  • 使用鲜艳、互补的颜色
  • 增加对比度(浅色形状上深色轮廓,深色形状上浅色轮廓)
  • 考虑整体构图

对于复杂形状(心形、雪花等):

  • 使用多边形和椭圆的组合
  • 仔细计算点以实现对称
  • 添加细节(心形可以有高光曲线,雪花有复杂的树枝)

要富有创意和细节!一个好的 Slack GIF 看起来应精致,而非像占位图形。

可用工具

GIFBuilder(core.gif_builder)

组装帧并针对 Slack 优化:

builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame)  # 添加 PIL Image
builder.add_frames(frames)  # 添加帧列表
builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)

验证器(core.validators)

检查 GIF 是否满足 Slack 要求:

from core.validators import validate_gif, is_slack_ready

# 详细验证
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)

# 快速检查
if is_slack_ready('my.gif'):
    print("已就绪!")

缓动函数(core.easing)

实现平滑运动而非线性:

from core.easing import interpolate

# 从 0.0 到 1.0 的进度
t = i / (num_frames - 1)

# 应用缓动
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# 可用:linear, ease_in, ease_out, ease_in_out,
#           bounce_out, elastic_out, back_out

帧助手(core.frame_composer)

常用便捷函数:

from core.frame_composer import (
    create_blank_frame,         # 纯色背景
    create_gradient_background,  # 垂直渐变
    draw_circle,                # 画圆助手
    draw_text,                  # 简单文本渲染
    draw_star                   # 五角星
)

动画概念

震动/抖动

用振荡偏移对象位置:

  • 使用 math.sin() 或 math.cos() 配合帧索引
  • 添加小的随机变化以获得自然感
  • 应用于 x 和/或 y 位置

脉冲/心跳

按节奏缩放对象大小:

  • 使用 math.sin(t * frequency * 2 * math.pi) 实现平滑脉冲
  • 对于心跳:两次快速脉冲然后暂停(调整正弦波)
  • 在基础大小的 0.8 到 1.2 之间缩放

弹跳

物体下落并弹跳:

  • 落地时使用 easing='bounce_out' 的 interpolate()
  • 下落时使用 easing='ease_in'(加速)
  • 每帧增加 y 速度来模拟重力

旋转

绕中心旋转对象:

  • PIL:image.rotate(angle, resample=Image.BICUBIC)
  • 对于摇晃:对角度使用正弦波而非线性

淡入/淡出

逐渐出现或消失:

  • 创建 RGBA 图像,调整 alpha 通道
  • 或使用 Image.blend(image1, image2, alpha)
  • 淡入:alpha 从 0 到 1
  • 淡出:alpha 从 1 到 0

滑动

将对象从屏幕外移动到目标位置:

  • 起始位置:帧边界之外
  • 结束位置:目标位置
  • 使用 easing='ease_out' 的 interpolate() 实现平滑停止
  • 如需超调:使用 easing='back_out'

缩放

缩放和定位实现缩放效果:

  • 放大:从 0.1 缩放至 2.0,裁剪中心
  • 缩小:从 2.0 缩放至 1.0
  • 可添加运动模糊增加戏剧效果(PIL 滤镜)

爆炸/粒子爆发

创建向外辐射的粒子:

  • 生成具有随机角度和速度的粒子
  • 更新每个粒子:x += vx,y += vy
  • 添加重力:vy += gravity_constant
  • 随时间淡出粒子(降低 alpha)

优化策略

仅在要求减小文件大小时,实施以下部分方法:

  1. 更少帧 - 降低 FPS(10 而非 20)或缩短时长
  2. 更少颜色 - num_colors=48 而非 128
  3. 更小尺寸 - 128x128 而非 480x480
  4. 去除重复 - remove_duplicates=True(在 save() 中)
  5. 表情模式 - optimize_for_emoji=True 自动优化
# 表情最大优化
builder.save(
    'emoji.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

理念

此技能提供:

  • 知识:Slack 的要求和动画概念
  • 工具:GIFBuilder、验证器、缓动函数
  • 灵活性:使用 PIL 原语创建动画逻辑

它不提供:

  • 固定的动画模板或预制函数
  • 表情字体渲染(跨平台不可靠)
  • 技能内置的预打包图形库

关于用户上传的说明:此技能不包含预置图形,但如果用户上传了图片,使用 PIL 加载并处理——根据他们的请求判断是直接使用还是仅作为灵感。

要富有创意!组合概念(弹跳 + 旋转、脉冲 + 滑动等),并充分利用 PIL 的全部功能。

依赖项

pip install pillow imageio numpy

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

相关技能