一套从 GitHub Trending 数据采集到图文内容全自动生成的端到端流水线
1、起因
我在刷小红书、即刻等社交平台时，总能看到「GitHub 每周充电」「开源项目推荐」之类的技术分享帖——精美的项目卡片配上一段简洁的文案，阅读量和互动都不错。所以我就在想：这些内容的素材来源无非是 GitHub Trending，卡片和文案的结构也相对固定，能不能借助 AI 把整个流程跑起来，定时自动生成图片和文案，直接拿来发布？
2、项目简介
github-trending-scraper 是一个自动化内容生产流水线，它能够：
- 抓取 GitHub Trending 页面的热门开源项目数据
- 校验 数据结构的完整性与合法性
- 渲染 精美的项目卡片图片（内置18套模板）
- 生成 便于社交媒体分享的文案
只需一条命令 pnpm start，即可完成从数据采集到内容产出的全部流程，并通过 GitHub Actions 实现每月定时执行与发布。
2.1 卡片模板一览
以下是项目内置的 18 套卡片模板渲染效果：
3、核心能力
| 能力 | 说明 |
|---|---|
| GitHub Trending 爬虫 | 支持按语言、时间维度（日/周/月）筛选，默认抓取 Top 10 |
| 数据校验 | 基于 Zod Schema 的运行时类型校验，确保数据质量 |
| 卡片渲染 | 18 套精心设计的 HTML 模板，通过 Playwright 截图生成 2x 高清 PNG |
| AI 文案生成 | 接入 Google Gemini API，流式输出技术文案 |
| 定时自动化 | GitHub Actions 每月 1 号自动执行，打包产物并创建 Release |
4、技术选型与考量
4.1 运行时与语言
| 技术 | 选择 | 理由 |
|---|---|---|
| 语言 | TypeScript | 完整的类型系统，编译期捕获错误，提升代码可维护性 |
| 运行时 | Node.js (ES2022) | 丰富的 npm 生态，异步 I/O 天然适合爬虫与网络请求场景 |
| 包管理 | pnpm | 更快的安装速度，节省磁盘空间的硬链接机制 |
4.2 数据采集层
| 技术 | 选择 | 理由 |
|---|---|---|
| HTTP 客户端 | Axios | 成熟稳定，支持拦截器、超时控制、自动 JSON 解析 |
| HTML 解析 | Cheerio | 轻量级 jQuery 式 API，无需启动浏览器，解析速度快 |
| 数据校验 | Zod | TypeScript-first 的运行时校验库，Schema 即类型 |
为什么不用 Puppeteer/Playwright 来爬取？ GitHub Trending 页面是服务端渲染的静态 HTML，不涉及 JavaScript 动态加载。使用 Cheerio 解析 HTML 字符串即可，无需启动完整浏览器，资源消耗极低。
4.3 渲染层
| 技术 | 选择 | 理由 |
|---|---|---|
| 浏览器引擎 | Playwright (Chromium) | 跨平台一致性好，API 现代化，截图质量高 |
| 模板方案 | 原生 HTML + CSS | 设计自由度高，不依赖额外模板引擎，所见即所得 |
为什么选择 Playwright 而非 Canvas/SVG？ 使用 HTML/CSS 模板配合浏览器截图，设计师可以直接用前端技术栈制作模板，修改样式只需调整 CSS，无需理解 Canvas API 或 SVG 规范。18 套不同风格的模板充分证明了这一方案的灵活性。
4.4 AI 内容生成层
| 技术 | 选择 | 理由 |
|---|---|---|
| LLM | Google Gemini (gemini-3-flash-preview) | 速度快、成本低，中文能力优秀 |
| 输出方式 | 流式生成 (Streaming) | 实时反馈，用户体验好；长文本生成不会超时 |
| Prompt 管理 | 独立 Markdown 文件 | 与代码解耦，非技术人员也能调整文案风格 |
4.5 测试与 CI/CD
| 技术 | 选择 | 理由 |
|---|---|---|
| 测试框架 | Vitest | 原生 ESM 支持，与 TypeScript 无缝集成，运行速度快 |
| CI/CD | GitHub Actions | 与代码仓库深度整合，支持定时触发和手动触发 |
5、架构设计
5.1 整体流水线
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ GitHub │ │ Cheerio │ │ Zod │
│ Trending │───▶│ HTML 解析 │───▶│ Schema 校验 │
│ (HTTP GET) │ │ │ │ │
└──────────────┘ └──────────────┘ └──────┬───────┘
│
┌──────────┴──────────┐
│ │
┌─────▼──────┐ ┌──────▼───────┐
│ Playwright │ │ Gemini LLM │
│ 卡片渲染 │ │ 文案生成 │
└─────┬──────┘ └──────┬───────┘
│ │
┌─────▼──────┐ ┌──────▼───────┐
│ PNG 图片 │ │ 文案 │
│ (18模板) │ │ (post.txt) │
└────────────┘ └──────────────┘
5.2 自动化流程
GitHub Actions 工作流实现全自动运行：
每月 1 号 12:00 (北京时间)
│
▼
拉取代码 → 安装依赖 → 执行 pnpm start
│
▼
生成 JSON + PNG 卡片 + 文案
│
▼
打包为 ZIP → 创建 GitHub Release（带版本号 vYYYY.MM）
支持 workflow_dispatch 手动触发，方便临时运行。
6、模板是怎么来的：用 Google Stitch 批量生成卡片模板
项目内置的 18 套卡片模板，全部由 AI 生成——使用的工具是 Google Labs 推出的 Stitch。
6.1 什么是 Google Stitch
Stitch 是 Google Labs 推出的 AI 辅助 UI/UX 设计工具，核心能力是 Text-to-UI：输入一段自然语言描述，即可自动生成包含布局、配色、组件和交互逻辑的完整界面设计。除了文字输入，还支持草图识别和截图参考等多模态输入方式。最关键的一点：Stitch 生成的不是图片，而是可运行的 HTML/CSS 代码，这正好满足了本项目「HTML 模板 + Playwright 截图」的渲染方案。
6.2 模板生成链路
需求描述（Prompt）
│
▼
Google Stitch（Text-to-UI）
│
▼
生成可运行的 HTML/CSS 代码
│
▼
AI微调样式 + 插入占位符（{{rank}}、{{name}} 等）
│
▼
保存为项目模板（src/renderer/templates/1~18.html）
具体流程：
- 向 Stitch 描述卡片需求：包括用途（GitHub 项目展示卡片）、尺寸（3:4 竖版，适配社交媒体）、需要展示的信息字段（项目名、描述、Star 数等），以及期望的视觉风格（如赛博朋克、毛玻璃、极简等）
- Stitch 生成 HTML/CSS：AI 自动输出完整的前端代码，包含布局结构和视觉样式
- AI微调与模板化：将生成代码中的具体数据替换为占位符（
{{rank}}、{{name}}、{{stars}}等），并对细节样式做适当调整 - 集成到项目：将最终模板放入
src/renderer/templates/目录，供 Playwright 渲染引擎使用
6.3 模板效果展示
以下是通过 Stitch 生成的部分模板预览：
18 套模板涵盖了赛博朋克、毛玻璃、蓝图、杂志、像素风、漫画风等多种视觉风格。
7、结尾
本项目中的代码与文档大部分由 AI 生成。如果大家对相关代码或 Prompt 写法感兴趣，欢迎关注或 Star 我的github仓库，包含开发过程中所有的prompt和文档。
GitHub: github.com/LittleBreak…
如果大家对具体生成的小红书文章感兴趣，可以去关注我的小红书账号，看下实际效果～
小红书文章: GitHub 本月最火 Top10，AI Coding 霸榜！
另外我也开放共享了卡片模板的 Stitch 项目，大家可以直接访问并做任意编辑，没任何限制
