Native-hero GitHub README · workspace preview

把 README 首屏从命令堆变成一眼看得懂的项目页

beautify-readme 让你已经登录的 coding agent 先读你的仓库——README、代码、示例、真实产物—— 再从项目本身推导 palette / typography / motif,产出一张属于这个项目自己的 hero、几张章节转场、一版重排后的 README 和 diff。whole-README 一次改完首页,asset-only 只出资源包不动 README 一个字节。

01 · Hero + Case Wall

同一个 Skill,不同项目就该有不同的视觉方向

左:Skill 在 beautify-github-readme 自己仓库上跑出的 hero——REPOSITORY · FIRST IMPRESSION 作为定位, 三张斜倚 motion card 作为 motif,深墨底 + 珊瑚红 accent。右:同一 Skill 在六种项目类型(dev tool / AI product / design resource / data research / creator / OSS library)上产出的六张 hero,palette 和 motif 各自不同—— 不是给每个仓库套一份「AI 紫 + 黄铜暖米」默认样。

项目原生 hero SVG:beautify-github-readme
hero.svg · 1200 宽 viewBox · 深墨底 #121827 + 珊瑚红 #FF7458 + 薄荷 #63D3BE + 系统字。motif 是三张不同产品语言的 motion card,从项目自身内容(dev tool / design system / AI product)来。 你会拿到的第一张图就是这种「换掉项目名就不成立」的原生 hero。
Case wall:六种项目类型六种视觉方向
theme-wall.svg · 同一 Skill 在六种项目类型上产出的对照 wall。dev tool 用深墨 + 单条命令;AI product 用薄雾紫 + 输入/输出 flow;design resource 用暖黄 + 组件方块;data 用素白 + 折线;creator 用珊瑚 + 头像;OSS library 用清薄荷 + 三段示例。QA 会照这张 wall 判「反默认调色板」是否命中。
02 · Section transitions

章节转场共享同一 palette · motif · typography

章节转场不是装饰条,它们是 README 里 why / how / use 三个信息位的视觉承接。每张 SVG 都写了具体 caption 说明它承接的是什么,palette / motif / 字号权重全在一套系统里。你会在自己的仓库拿到相同结构的一组。

section-why 章节转场
section-why.svg · 承接「为什么这门 Skill 存在」——READ THE PROJECT 作为动作 eyebrow, 编号 01 做右下角 typographic anchor,与 hero 共享同一深墨 + 珊瑚色板。
section-method 章节转场
section-method.svg · 承接「怎么做」——DESIGN THE PAGE。同一 typographic scale, 编号 02 保持连贯节奏;motif 与 hero 里的 motion card 保持形状语言一致。
section-use 章节转场
section-use.svg · 承接「怎么用」——CHECK THE RESULT。三段式节奏收尾,编号 03; 共享同一 palette,让 README 首屏和后面的段落连成一条视觉线。
03 · Same Skill on real projects

四个真实项目 → 四种视觉方向

Skill 在四个大家都认得的公开仓库上做完 read-first pass 后各自锁定的 palette / motif。QA 判「反默认」用的就是这类 对照——同一个 Skill,PyTorch 不应该和 Rust 长得像。

PyTorch 案例 hero
pytorch · 深紫 #3F1F73 + 火橘 #EE4C2C,motif 是研究模型的坐标轴节点。
Rust 案例 hero
rust · 焦糖 #D66200 + 深墨底,motif 是齿轮 + 编译 flow,带 CLI 铁气。
PostgreSQL 案例 hero
postgresql · 蓝黑 #0B1E3F + 大象蓝,motif 是三段式 SQL 语句 + 数据行。
Kubernetes 案例 hero
kubernetes · 靛蓝 #326CE5 + 白网格,motif 是七边形舵轮 + pod 阵列。
04 · README before / after

信息顺序被重排:先讲用途 · 再放示例 · 再讲原理 · 最后是安装

同一仓库的 README 首屏对比——左边是常见的「标题一句 + 一段命令堆 + 目录树」,右边是 Skill 跑完 whole-README 后的重排:hero 到位、proof 挪到前面、install 挪到 first use 附近、CTA 只留三个 label。

BEFORE · README.md

project-name

a small tool for developers.

# Installation
npm install project-name

# Usage
npx project-name --help

# Structure
src/
  cli.ts
  runner.ts
tests/
  cli.test.ts
package.json
LICENSE

# Contributing
PRs welcome.

# License
MIT
  • 没有一句话讲清楚它做什么
  • 安装排在最前面,示例没有出现
  • 目录树抢在 first-use 之前
  • 看完首屏依然不知道要不要装
AFTER · README.md
REPOSITORY · FIRST IMPRESSION
project-name
让每次 git push 之后的 README 首屏都能一眼说清楚项目在做什么。
read the projectdesign the pagecheck the result
  • hero 到位——项目名 + 一句话价值 + 项目原生 motif;换个仓库就不成立
  • proof 挪到前面——先给一段真实运行截图或 output,再讲原理
  • first use 一步——npx / one-line install 出现在示例旁,不再单独一屏
  • 清掉重复承诺——不再有三个「简单易用」,只留一句真话
看效果 了解方法 开始使用
diff · Skill 产出的 README 会用 `git diff` 或 side-by-side 形式交给你 review。Agent 默认 不 commit / 不 push / 不 open PR;你自己确认 diff 之后再决定是否落盘。asset-only 模式下这一屏 右侧不会出现——README.md 字节级别不变,只有 assets/readme/*.svg 是新的。
Powered by oil-oil/beautify-github-readme · MIT Case-wall SVGs © upstream skill authors, embedded under MIT for course demonstration Course: clawvard.school/courses/beautify-readme