SkillMap

Oct 28, 2026

用 beautify-github-readme 围绕项目本身重新设计 GitHub README

beautify-github-readme 是一个 2k 星标 MIT agent skill：先把真实仓库看懂，再按价值、证据、方法和首次使用的顺序重组 README——视觉用 SVG，可搜索的内容留在 Markdown——提供整份 README 优化和只生成视觉素材两种模式，未经明确授权绝不提交、推送或发布。

#tutorial#creative#markdown#developer-tools

大多数 README 缺的不是信息，而是顺序。beautify-github-readme 是与 oil-ui、oil-motion 发布在同一个 GitHub 账号下的 2k 星标 MIT agent skill，它从这个诊断出发：访客一上来看到的是内部术语、安装命令和目录结构，却还不知道这个项目是做什么的。

为什么这个 Skill 重要

按 README 的说法，这个 skill 会先把项目看懂，找出最清晰的价值和证据，然后才决定页面该长什么样。在整份 README 模式下，它同时处理三个层面——内容（删除重复表述，效果前置，把术语换成更好懂的话）、视觉（从项目本身找到配色、字体、构图和项目原生的图形语言，再设计首屏与配套模块）、工程（保持 GitHub 兼容、图片可访问、命令可复制、正文可搜索）。不同项目不会得到同一张模板：README 的例子是终端工具用命令节奏与光标，图标系统用网格与切片，研究项目用坐标、图表和证据标签。

这套方法把视觉层和内容层分开，因为 GitHub README 没有网站那样的排版自由。SVG 负责可编辑的首屏、章节过渡、比较、示意图和品牌感；混合式 SVG 构图把确定性的 SVG 排版与可选的 AI 生图和抠图素材结合；GIF 负责经过确认的动效，静态 SVG 保留为可编辑的降级版本——而且动效必须由用户主动选择，不会默认生成；PNG/WebP 负责截图、生成图片和复杂作品墙；Markdown 负责解释、命令、链接、配置和贡献说明。README 本身就是这套方法的实际示例，并列出了八个已经在使用这个 skill 的仓库。

安装

npx skills add oil-oil/beautify-github-readme

或者直接交给 Agent 安装：

Install this Skill: https://github.com/oil-oil/beautify-github-readme

实战：整份优化还是只做素材

这个 skill 有两种明确的模式。整份 README 优化会重组阅读顺序、文案层级、证据、Markdown 和完整的视觉系统，未经确认不会提交、推送或发布。只生成视觉素材会产出静态 SVG 首图、章节标题、流程图、徽章、示意图，或保留 SVG 源文件的 GitHub-safe GIF，不改 README 正文、顺序、图片引用或链接。

  1. 说明范围，skill 就直接执行。如果只说「美化这个仓库」或只贴一个仓库地址，Agent 会先问你要哪种模式；选只做素材时，还会问要哪些素材。
  2. 整份重新设计时，README 的提示词要求先给本地预览：
Use $beautify-github-readme to redesign this repository homepage around its real project theme.
Show me a local preview first and do not push anything.
  1. 只做素材时，保持 README 不动：
Use $beautify-github-readme to keep the README unchanged and create one animated GIF hero with its SVG source.
Derive the style from the existing project and show me the rendered preview first.
  1. 查看交付物。整份 README 模式交付本地预览、视觉素材和 README diff；只生成视觉素材的模式交付源文件、渲染预览、可选 GIF 衍生版本和嵌入代码。提交、推送、PR 和发布始终需要明确授权；在只做素材的模式下，把新素材嵌入 README 还需要另一次明确授权——Agent 为了理解项目读取了 README，不代表可以修改它。

第三种请求是只读审查，什么都不碰：

Use $beautify-github-readme to audit this README for clarity, hierarchy, trust, and maintenance cost. Do not edit files.

技巧

  • 可复用的制作规范以参考文件形式随 skill 一起提供：怎么从项目内容设计标题、README SVG 的写法、SVG 与 AI 生图的混合式构图、README 动效的制作方法。
  • README 的混合式案例（方块世界、Wolfcha）展示了 AI 生成素材适合用在什么地方：SVG 精确控制文字、网格和构图，ImageGen 加固定抠图流程负责难以稳定手绘的人物主体。
  • Markdown/SVG 本身无需账号或 API Key；按 README 的说法，生成 PNG/WebP 或采用 AI 生图时需要对应的渲染与已授权的生成工具。
  • 整个过程守着 README 明说的三件事：使用真实内容、不编造产品能力、没有确认就不推送——它不会伪造 star、性能、用户或品牌背书。

何时不用这个 Skill

README 的三条承诺划定了边界：这个 skill 使用真实的项目材料，不编造产品能力，也不伪造 star、性能、用户或品牌背书。另外，动效和 AI 生成的位图素材都要用户主动选择，并依赖 skill 之外的工具，所以 Markdown 加 SVG 的结果才是文档化的基线；超出这个范围的产出需要你先备好渲染和生成工具。

查看 排行榜 了解更多 skill。