GitHub Social Preview AI — AI skill for Claude Code

github-social-preview-ai — AI GitHub Social Preview / OG Image Generator (Agent Skill)

[](LICENSE) [](SKILL.md) [](https://github.com/liush2yuxjtu/github-social-preview-ai)

**Generate crisp GitHub social preview images (repo cover / Open Graph image, 1280×640) with text-free AI art + real-font HTML typography — an Agent Skill for Claude Code, Cursor, Codex and other coding agents.**

[English](#english) · [中文](#中文)


English

Why

• Image models garble text, so the background is text-free AI art and text is composed in HTML + headless Chrome with real fonts (excellent CJK support).
• Max 2 text layers (headline + repo name), readable at 320×160 thumbnail size; a .thumb.png is generated for checking.
• Reserved clean text zone + scrim so text never overlaps the art.
• Batch many repo covers from one covers.json.

Install

# Claude Code (personal skills)
git clone https://github.com/liush2yuxjtu/github-social-preview-ai ~/.claude/skills/github-social-preview-ai
# project-level: .claude/skills/  ·  other agents: .agents/skills/ or .cursor/skills/
# or: npx skills add liush2yuxjtu/github-social-preview-ai

Requirements: Python 3 + Pillow, Google Chrome / Chromium, a CJK font (e.g. Noto Sans CJK).

Usage

Ask your agent: *"Make a GitHub social preview for this repo"*. Or run directly:

python3 scripts/render.py examples/covers.json --out-dir out   # renders + verifies, exit 1 on FAIL
python3 scripts/verify.py out/my-repo.png                      # verify a single cover

{"defaults": {"art_shift": 60, "accent": ["#25f4ee", "#fe2