我在优化 oil-ppt 仓库首页时，发现 GitHub README 虽然不能直接编写 CSS，但可以用 SVG 生成带有项目风格的标题。实际效果比我预期的好，于是我把这套方法整理成了一个 Skill：它可以根据仓库自身的字体、颜色和内容生成徽标，也可以继续整理整个 README。上线一天多，这个 Skill 已经有 400 个 Star。
可以先看一些示例。我拿 Kubernetes、PyTorch、PostgreSQL、Rust 这些热门社区仓库的信息，分别生成了徽标，每个徽标的字体、颜色和内容都来自项目本身。
加上徽标之后，仓库主页会更有设计感，README 里的小标题也可以用同样的方式生成。
从 oil-ppt 的 README 开始
当时我让 Codex 帮我优化 oil-ppt 的仓库页面，想要一种更合适的标题效果。Codex 告诉我，GitHub 的 README 里没法直接编写 CSS，但可以使用 SVG。SVG 通过代码描述图形，最后作为图片渲染，GitHub 允许在 README 里引用这种内容。
实际生成的效果比预期好。oil-ppt 的标题是用 SVG 写的，风格和它最终生成的 PPT 一致。
SVG 还可以和普通图片结合：顶部的标题用 SVG 写，底下放一张浏览器截图。README 里的小标题也可以同样处理，还可以生成不同颜色的版本。看到这些效果之后，我把这套做法抽成了一个 Skill。
把做法整理成可复用的 Skill
看到 oil-ppt 的效果之后，我把这套做法抽成了一个 Skill，并继续用在 Selector 和 oil-icon 仓库里。放上徽标之后，访客打开仓库就能更直观地看到项目是做什么的。
比如 oil-icon 是一个生成图标的库，徽标下面直接展示了生成好的示例图标，小标题也比原本的 Markdown 格式更好看。
这套 README 的核心原则是：通过第一个徽标的图，快速告诉大家这个仓库是干什么的。
Skill 保留了两种改动范围。一种是梳理整个 README，包括顶部徽标、内容顺序和小标题；另一种只生成单个徽标。已经比较成熟的开源仓库如果不希望大幅调整文档，可以只添加徽标，保留原来的 README 结构。
让真实仓库成为示例
使用这个 Skill 添加完徽标之后，它会问大家要不要给自己的仓库提一个 PR，把仓库链接加到它的示例列表里。通过之后，其他人可以从列表里直接跳转到你的仓库看实际效果。
比如这就是一个海外开发者提交的：他用这个 Skill 给自己的仓库生成了徽标，我们也有了一个反向链接展示在仓库上面。
安装和使用
仓库地址是 oil-oil/beautify-github-readme，安装命令是：
npx skills add oil-oil/beautify-github-readme
也可以把仓库地址发给自己的 Agent，让它帮忙安装。安装之后，在你的开源仓库里调用这个 Skill，它就会生成这样的徽标；效果不满意的话，可以让它重新生成。
