Xiaoyaoclaw Beautify GitHub Readme — Documentation skill for Claude Code

OpenClaw Beautify Github Readme 🎨

把 GitHub README 从「信息堆」变成项目的视觉门面——先让人看懂，再谈视觉。 Turn a repository homepage into a project-native visual story with GitHub-safe SVG.

**基于上游升级**：本项目由 [oil-oil/beautify-github-readme](https://github.com/oil-oil/beautify-github-readme)（MIT，1.7k★）本地升级而来，完整保留上游工作流与设计规范，并补强**渲染级验证自动化、Windows / 中文字体适配、深浅双主题安全**。致谢上游作者。


为什么需要它

很多仓库的信息其实已经够了，只是没人愿意看。访客一上来看到内部术语、安装命令和目录树，却还不知道这个项目是做什么的。想改，又踩这些坑：

• ❌ 顺序混乱：功能藏在第 5 屏，价值要靠猜——README 是门面，却劝退访客
• ❌ 模板感：套同一个 hero 模板换皮，配色字体跟项目毫无关系，换掉名字哪都能用
• ❌ GitHub 限制：不能像网页那样用 CSS/动画/远程字体；SVG 不吃 prefers-color-scheme，深浅主题下可能直接看不清
• ❌ 预览靠猜：SVG 文字不换行、溢出、对比度不足——不渲染出来根本看不见，纯静态检查抓不到
• ❌ 中文失配：字体栈没有微软雅黑，Windows 渲染回退宋体，中英混排字宽全乱

这个技能把 README 当**内容 + 视觉两层**来做：Markdown 管内容（可搜索、可复制、可维护），SVG 管视觉（可编辑、可缩放、GitHub-safe），并内置渲染级验证，杜绝「图看起来挺好、一上 GitHub 就翻车」。

特性

• 🏠 双模式：整份 README 优化（重排信息 + 建立视觉系统）/ asset-only（只做 hero、章节标题、流程图、徽章等素材，README 一字不动）
• 🎨 项目原生：先读懂仓库，再定配色/字体/图形语言——每个项目一套视觉，不是一份模板打天下
• 🧩 三种实现：纯 SVG（确定性、可编辑）/ Hybrid SVG 构图（SVG 排版 + AI 生图抠图素材）/ GitHub-safe GIF（动效须明确选择，SVG 保留为源文件）
• 🛡️ 渲染级验证自动化（升级点）：scripts/visual_verify.py 用 Chrome/Edge 无头渲染每张 SVG → WCAG 文字对比度检查 → 边缘贴边检测 → 输出 PNG 供复核，跨平台一条命令
• 🌏 Windows / 中文字体适配（升级点）：字体栈内置微软雅黑（Windows 不再回退宋体），中英混排字宽指导（CJK ≈1em / 拉丁 ≈0.5em）
• 🌗 深浅双主题安全规则（升级点）：SVG 无法自适应主题 → 不透明容器 or 透明底双端对比度硬规则，杜绝「深色图在浅色页看不清」
• 🔍 只读审计：不动文件，先告诉你 README 哪里难懂、哪里缺证据
• 🤝 归因可选：满意后可选加「README MADE WITH」项目原生签名，纯自愿不捆绑

它能做出什么

同一套方法，在不同项目上长出完全不同的视觉——终端工具用命令节奏与光标，图标系统用网格与切片，研究项目用坐标与证据标签：

Related Skills