Skip to content
Documentation
Skill

/readme-generator

为 GitHub 项目生成作品集级 README.md。适用于「帮我写 README」「生成 README」「优化 README」「README 最佳实践」「项目首页」「开源说明」「README 信息图」「README 封面」「用 Codex Image Gen / gpt-image-2 生成 README 图片」等请求。输出包括克制的 README 叙事、最多两张高质量视觉资产、压缩后的图片、MIT 许可证、GitHub Description 和 Topics 推荐、推荐星级,以及可选 gh CLI

From plugin
readme-generator
461 skill
Install
$ npx -y skills add geekjourneyx/readme-generator --skill readme-generator --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/readme-generator

Context preview

The summary Claude sees to decide when to auto-load this skill.

为 GitHub 项目生成作品集级 README.md。适用于「帮我写 README」「生成 README」「优化 README」「README 最佳实践」「项目首页」「开源说明」「README 信息图」「README 封面」「用 Codex Image Gen / gpt-image-2 生成 README 图片」等请求。输出包括克制的 README 叙事、最多两张高质量视觉资产、压缩后的图片、MIT 许可证、GitHub Description 和 Topics 推荐、推荐星级,以及可选 gh CLI

SKILL.md

readme-generator.SKILL.md
name: readme-generator
description: 为 GitHub 项目生成作品集级 README.md。适用于「帮我写 README」「生成 README」「优化 README」「README 最佳实践」「项目首页」「开源说明」「README 信息图」「README 封面」「用 Codex Image Gen / gpt-image-2 生成 README 图片」等请求。输出包括克制的 README 叙事、最多两张高质量视觉资产、压缩后的图片、MIT 许可证、GitHub Description 和 Topics 推荐、推荐星级,以及可选 gh CLI 更新建议。重点是帮项目讲清自己的故事,并基于项目类型判断视觉强度,避免套模板、堆信息和过度设计。

GitHub README Generator

README 是项目的第一张作品集页面。它不是说明书的目录,也不是功能清单的容器。它要在很短时间内回答三件事:

1. 这是什么。 2. 为什么值得看。 3. 我怎么开始使用。

本 Skill 的目标是生成 **100 分 README 作品**:清楚、有审美、克制、可信,能让项目像一个完整作品一样被理解。

---

第一性原理

README 是信任入口和路径入口,不是完整文档。它应该帮助第一次打开仓库的人做出快速判断:

1. 这个项目解决什么问题。 2. 它适不适合我。 3. 我是否能马上运行、安装或继续了解。

1w star 以上开源项目通常不是靠信息量取胜,而是靠清晰的首屏、直接的上手路径、可信的文档入口和克制的社区信息取胜。图片、徽章、作者信息和设计理念都只是辅助;一旦它们拖慢理解,就是噪音。

本 Skill 的核心取舍:README 先讲清项目,再做美化;视觉服务理解,不替代理解。

---

作品标准

用下面的评分表约束所有输出:

| 维度 | 分值 | 判断标准 | |------|------|----------| | 15 秒理解 | 25 | 首屏能看懂项目名、价值、适用对象 | | 项目故事 | 20 | 不是堆功能,而是讲清背景、动机和结果 | | 视觉表达 | 20 | 图片像作品,不像小字流程截图 | | 快速开始 | 15 | 安装和使用路径短、明确、可复制 | | 可信产物 | 10 | 展示真实输出、能力边界或结果 | | 克制降噪 | 10 | 去掉重复、口号、过度解释和装饰 |

低于 90 分的 README 不交付;先删噪音、放大重点、重排叙事。

高星项目基线

默认向高星开源项目学习这些结构:

  • 项目名 + 一句话价值主张。
  • 少量必要 badge,不堆状态装饰。
  • 快速开始或文档入口靠前。
  • 示例只在能降低上手成本时出现。
  • 贡献、社区、安全、许可证简洁清楚。
  • UI / 产品项目可放截图;库、SDK、基础设施项目少图或无图。

不要把 README 写成设计宣言、完整说明书、功能墙、社交名片或内部工作流报告。

---

设计原则

必须坚持

  • H1 必须是项目正式名称,紧跟一句价值主张。
  • README 开头先讲项目价值,再放安装细节。
  • 图片只表达一个重点,但应该承担项目名片功能:让读者一眼看到项目名和定位。
  • 默认最多两张图片:一张封面,一张核心能力或结果图。
  • GitHub 会缩小图片显示,图片里的主文案必须按海报字号设计。
  • 对功能的描述要具体,但不夸张;能用结果说明就不要自夸。
  • 对作者和许可证保持简洁,不做社交名片堆砌。

必须避免

  • ASCII 艺术标题。
  • emoji 装饰标题或作者表格。
  • 大段“我们很专业”的空话。
  • 6 个以上小卡片堆在一张图里。
  • 流程图里塞满阶段、命令和小字说明。
  • 把第三张流程图当作默认产物;工作方式通常用正文讲更清楚。
  • 把 Image Gen 当作长文排版工具。
  • 把 README 写成完整产品手册;详细文档应放到 `docs/`。

---

总体流程

Phase 0    项目阅读和模式识别
Phase 1    项目故事提炼
Phase 2    视觉生成方式选择
Phase 3    作品级视觉资产生成
Phase 4    README 组装
Phase 5    GitHub 元信息建议
Phase 6    验证和交付

---

Phase 0: 项目阅读和模式识别

先读取项目,而不是直接写模板。

检查:

ls
find . -maxdepth 2 -type f | sed 's#^\./##' | sort | head -80

优先读取:

  • `README.md`
  • `package.json` / `pyproject.toml` / `go.mod` / `Cargo.toml`
  • `docs/`
  • 主要入口文件
  • 示例、截图、演示文件

判断场景和视觉预算:

| 场景 | 判断方式 | 策略 | 图片上限 | |------|----------|------|----------| | 新建 README | 没有 README,或 README 很短 | 完整生成,但保持短路径 | 1-2 | | 升级 README | 已有 README,有有效内容 | 保留独特内容,重写结构和首屏 | 0-2 | | 作品集强化 | 用户强调审美、故事、展示 | 优先做叙事和封面表现 | 2 | | 纯文档模式 | SDK、库、后端工具、基础设施 | 少图,重安装、API、文档入口 | 0-1 | | UI / 产品展示 | 有界面、截图、demo、视觉结果 | 用真实结果或封面辅助理解 | 1-2 |

升级现有 README 时,不要删除用户已有的关键内容。先提取可保留内容,再重排。

降噪审查

写 README 前先标记哪些内容应外移或删除:

| 内容 | 默认处理 | |------|----------| | 设计评分表、工作原则、内部方法论 | 放在 `SKILL.md` 或 `docs/`,不进 README | | 生成文件树、模板变量、脚本细节 | 只在用户需要开发文档时保留 | | 第三张流程图 | 删除,改成 2-4 行正文或简短列表 | | 过多社交链接 | 只留 GitHub / 主页等核心入口 | | 太泛的功能列表 | 合并成 3 个结果导向能力 | | 安装前的长背景 | 缩短,快速开始提前 |

---

Phase 1: 项目故事提炼

采集或推断 7 个字段:

| 字段 | 说明 | |------|------| | `project_name` | 项目正式名称 | | `tagline` | 一句话价值主张,短、有判断 | | `origin` | 项目出现的背景:为什么需要它 | | `audience` | 谁会用它 | | `promise` | 它帮用户得到什么结果 | | `proof` | 真实能力、截图、输出、示例、指标 | | `start` | 最短上手路径 |

不要问太多问题。能从项目里推断就直接推断;只有影响叙事准确性时才问用户。

推荐叙事结构

项目名
一句话价值主张
视觉封面(按项目类型决定是否需要)

这是什么
为什么需要它
你会得到什么
快速开始
示例或输出
工作方式(正文,不默认配图)
安装
许可证
作者

如果项目偏工具、库或基础设施,把“快速开始”提前到“为什么需要它”之后。README 的顺序要服务读者行动,不服务模板完整性。

---

Phase 2: 视觉生成方式选择

README 图片有两类:

1. **作品封面**:传达气质、主题、记忆点。 2. **结构说明图**:传达步骤、能力、对比、流程。

根据用户意图选择模式:

| 模式 | 适用场景 | 图片策略 | |------|----------|----------| | `portfolio` | 默认推荐,适合需要展示完整作品感的项目 | 1 张封面 + 1 张核心能力图 | | `clean-doc` | SDK、库、后端工具、严肃基础设施 | 0-1 张图,优先快速开始和示例 | | `visual-story` | AI 工具、设计工具、独立产品、作品展示 | 最多 2 张图,Codex Image Gen 负责记忆点 | | `structured` | 用户明确要信息图、对比图、流程图 | 1-2 张 HTML/CSS 海报,保证文字准确 |

默认先判断项目类型,不要强行套 `portfolio`。视觉资产生成优先级固定为:

1. **Codex Image Gen Skill**:优先用 Codex 内置图片生成能力生成视觉资产。 2. **轻量化**:README 展示图优先转成 WebP,再写入 README 引用路径。 3. **HTML to PNG fallback**:只有当 Image Gen 不可用、输出不符合要求、或用户明确要求结构化精确文字时,才退化到 HTML/CSS 模板截图。

不要把 HTML 截图当默认路径。它是可靠兜底,不是首选视觉方案。

---

Phase 3: 作品级视觉资产生成

默认输出使用两个稳定文件名:

assets/banner.webp
assets/features.webp

这样 README 引用路径稳定,不管图片来自 Codex Image Gen 还是 HTML 截图兜底。

图片职责

| 图片 | 目标 | 推荐方式 | |------|------|----------| | `banner.webp` | 项目名片,建立项目名、定位和记忆点 | Codex Image Gen 优先 | | `features.webp` | 核心能力、结果或必要流程的传播图 | Codex Image Gen 优先;文字精确时 HTML 兜底 |

不要默认生成 `workflow.png` 或 `workflow.webp`。如果用户明确要求流程图,把流程内容合并进 `features.webp` 或放到正文,不新增第三张图。

默认视觉风格

所有 README 视觉资产默认采用同一套风格:

黑底、极简、电影打光、高对比、大留白、低亮度、白/灰/暖金三色、高级杂志封面感。
画面质感:极深黑背景 #050505,纸张颗粒,浅景深,体积雾,细窄轮廓光,局部金属质感。
质量目标:出自 1w star 设计师水准作品。

设计约束:

  • 背景以 `#050505` 深黑为主。
  • 色彩只使用白、灰、暖金;不要引入彩虹渐变、紫蓝霓虹或高饱和装饰色。
  • 使用大留白和局部光,而不是堆元素。
  • 图片应该有少量高价值文字,承担传播和定位,不做长说明。
  • 文字越少越强:每张图只保留读者离开 README 后仍该记住的信息。
  • 不放段落、命令、表格、版本号堆叠和密集说明。

项目名片文字策略

默认使用「项目名片型图片」,不是纯氛围图。

| 图片 | 推荐文字 | 上限 | |------|----------|------| | `banner.webp` | 项目名 + 一句话定位 + 1-3 个短标签 | 18 个英文词或 28 个中文字 | | `features.webp` | 2-3 个结果短语,必要时加一个短标题 | 每个短语 2-5 个词 |

好文字应该像封面标题,不像说明书:

  • 项目名必须清楚,优先放在 `banner.webp`。
  • 定位句说结果,不说口号,例如 “Portfolio-grade README design for open source projects”。
  • 标签只放搜索和记忆价值最高的词,例如 `Story`、`Visual`、`Signal`。
  • 中文可以用,但要少;英文项目名、短英文标签通常更稳。
  • 如果 Image Gen 把文字写错,重试一次;仍不准确时,保留 Image Gen 视觉底图,用 HTML/CSS fallback 承载精确文字。
  • 不为了“全程 AI 生成”牺牲项目名和定位的准确性。

字号底线

按 1920×1080 设计时:

| 元素 | 最小字号 | |------|----------| | 主标题 | 92px | | 中文主标题 | 80px | | 大卡标题 | 48px | | 正文说明 | 28px | | 辅助标签 | 22px | | 页脚 | 20px |

不要使用 18px 以下文字。GitHub 缩放后会不可读。

Codex Image Gen 产物只要求保持 16:9 和足够清晰,不要为了凑 `1920×1080` 而把好图强行重采样。README 展示图优先保存为 WebP;`1920×1080` 是 HTML to PNG fallback 的模板尺寸。

HTML to PNG fallback

仅在 Image Gen 不可用、用户要求精确结构化文字、或 Image Gen 输出无法通过检查时使用:

node scripts/gen_infographic.mjs /tmp/readme-banner.html assets/banner.png 1920 1080
node scripts/gen_infographic.mjs /tmp/readme-features.html assets/features.png 1920 1080
node scripts/convert_webp_assets.mjs assets/banner.png assets/banner.webp assets/features.png assets/features.webp

模板来自:

templates/banner.html
templates/features.html

模板变量:

{{P
Read more
Ships withreadme-generator

把项目 README 做成一份可以展示的作品。

Get the whole plugin
Stats
46
Stars
1
Forks
Maintained
Maintenance
JavaScript
Language
MIT
License
3mo ago
Last commit
4mo ago
Created

Repo: geekjourneyx/readme-generator