mcpField
G
github-social

github-social

github.com/scottwater设计与 UI156 次安装1 周前更新
代码仓库

关于 github-social

用于制作 GitHub 仓库社交预览图的技能，面向准备仓库视觉素材的维护者，涵盖图像生成、检查、尺寸和 README.md 放置流程。

主要功能

  1. 01收集仓库与品牌信息
  2. 02生成 1280×640 PNG 预览图
  3. 03检查缩略图可读性和安全区域
  4. 04将预览图保存至 assets
  5. 05在 README.md 添加相对图片链接

适用场景

  1. 01为仓库制作社交预览图
  2. 02检查预览图在缩略尺寸下的可读性
  3. 03将生成的预览图放在 README.md 顶部

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/scottwater/skills --skill github-social

安装后在 Claude Code 中输入/github-social确认已加载。

附带文件agents/openai.yaml

详细介绍

GitHub 社交预览图

使用 repository-open-graph-template.png（位于此技能文件夹中）作为安全区域参考，为 GitHub 仓库创建一张 1280x640 的 PNG 社交预览图。

工作流程

  1. 根据请求和本地文件收集仓库信息：仓库名称、所有者/组织、README 标语、徽标或标记、品牌颜色、主要语言和受众。完成标准：提示词模板中的每个方括号都能填入内容。
  2. 根据以下模板起草提示词，并使用内置图像工具生成；如果可以选择模型，则指定 gpt-image-2——无需凭据，因此无需索取 API 密钥即可继续。若工具接受参考图像输入，则传入 repository-open-graph-template.png；否则遵循模板中的安全区域文字说明。
  3. 以原尺寸和约 320x160 的尺寸检查结果。反复生成或编辑，直到通过所有检查：仓库名称拼写正确且缩略图尺寸下清晰可读、所有关键内容均位于安全区域内、不含参考线、模板文字、水印或意外出现的徽标，并且视觉效果符合仓库的实际用途和风格。
  4. 保存至 assets/github-social-preview.png；如有需要则创建 assets/，除非用户指定了其他路径，或该文件名会与需要保留的文件冲突。
  5. 在 README.md 最顶部使用相对 Markdown 图片链接插入图片——置于任何徽章或徽标之前——除非用户选择不添加，或要求放在其他位置。若已有预览区块，则修改链接或替换该区块，不要再添加第二个。如果 README.md 不存在，先询问再创建。
![Repository social preview](assets/github-social-preview.png)

规格

  • 画布：精确为 1280x640、不透明 PNG——这是 GitHub“设置 > 社交预览图”上传器所需的尺寸。
  • 安全区域：所有关键文字、徽标、人脸和视觉焦点均须位于模板的内部矩形区域内（距每条边约 80px）；非必要背景纹理可以延伸至区域外。
  • 文字：醒目、精简、高对比度——仓库名称加至多一条简短描述。
  • 构图：一个鲜明概念，不要拼贴——项目标记与仓库名称和标语并列，或采用与仓库相关的抽象产品/代码主题。配色取自仓库品牌；仅当紫蓝渐变属于品牌风格时才使用通用紫蓝渐变。
  • 资源：提供了项目实际资源时使用；否则创作一个原创的简洁标记。除非用户明确要求采用 GitHub 品牌元素，否则不要使用第三方徽标或 GitHub 自身的标记。

提示词模板

Create a GitHub repository social preview image for [REPO_NAME].

Canvas and purpose:
1280x640 PNG, opaque background, designed for GitHub repository Settings > Social preview / Open Graph sharing.

Repository signal:
[OWNER_OR_ORG], [SHORT_DESCRIPTION], [LANGUAGE_OR_DOMAIN], [BRAND_COLORS_OR_VISUAL_MOOD].

Composition:
Keep all important details inside an 80px safe margin on every edge, matching the safe-area of the GitHub repository-open-graph-template reference. Use a bold, readable layout with one primary focal element and generous spacing. The image must still read clearly when reduced to 320x160.

Text:
Render exactly: "[REPO_NAME]"
Optional subtitle, if useful: "[TAGLINE]"
Use large, crisp, high-contrast typography. No extra words.

Style:
[DISTINCTIVE_STYLE_DIRECTION]. Polished production design, not a screenshot of GitHub settings, not a generic stock banner.

Constraints:
Do not include red guide lines, template labels, watermarks, tiny text, unrelated logos, or GitHub branding unless explicitly requested. Keep edges crop-safe.

推荐设置：

model: gpt-image-2
size: 1280x640
quality: high
background: opaque
output_format: png

评论

支持 Markdown