GitHub README 不是简介是店面：5 条主页设计规则

IT加油站2026-10-08 10:15126分钟

原文：https://dev.to/akhourianmolkumar/your-github-readme-isnt-a-profile-its-a-storefront-here-are-the-5-rules-i-used-57jm（作者 @akhourianmolkumar）
我不再装饰我的 GitHub 个人主页，而是把它当成产品页来发布：四个应用，四个下载按钮，零小组件。

📌 GitHub 个人主页整体效果（图，点击查看）

我不再把自己的 GitHub 个人主页当成简历来经营，而是把它变成了一个产品页。现在，陌生访客点进主页，还没读完我的名字，就已经能下载到我四个应用中的某一个。

实际效果：github.com/Akhouri-Anmol-Kumar

📌 主页布局细节（图，点击查看）

致谢：推动我把主页从"堆徽章"更进一步的想法，来自 Giorgi Kobaidze 那篇用贡献数据造出一座城市的赛博朋克控制台主页，推荐去读一读。

所有"炫酷主页"的通病

随手打开十个热门的个人主页 README，你会看到同样的东西：

一整墙的徽章
一张展示 commit 数量的统计卡片
一行"嗨，我是某某"的开场白
一条正在吃掉你贡献图的贪吃蛇

它们都是装饰品，没有一个回答得了每位访客在头三秒里都有的那个问题：

"我现在就能从这个人这里得到什么？"

我做的是桌面应用：ATLOCK、APIC、ANOTE 和 ACALCU。于是我换了个问题问自己：

如果我的 README 像应用商店的商品页那样工作，会怎样？

店面式 README 的 5 条规则

规则一：3 秒下载测试

如果访客落地后 3 秒内还下载不到你最好的作品，这个页面就是失败的。

所以我的每个应用都有一张自己的卡片，每张卡片正下方就是一个下载按钮，直接指向真实的 .zip 发布包。没有"去 releases 页面看看"，也不用四处翻找。

<td align="center">
  <a href="https://github.com/USER/APP">
    <img src="assets/app_card.svg" width="408" alt="APP">
  </a><br>
  <a href="https://github.com/USER/APP/releases/download/TAG/APP.zip">
    <img src="https://img.shields.io/badge/⬇%20DOWNLOAD%20APP-B8935F?style=for-the-badge&labelColor=8a6c3f&logo=windows&logoColor=white" height="38">
  </a>
</td>

卡片在上，动作在下。和应用商店的商品页是同一个套路。

规则二：选定一种主色，绝不离开

我的主色是金色：亮部用 #B8935F，暗部用 #8a6c3f。

环形灯 logo、各节标题、按钮、卡片描边，全部用这套颜色。正因为每个元素共用同一套配色，整个页面看起来是"设计出来的"，而不是"拼凑出来的"。

徽章显得廉价，正是因为它们把所有颜色同时都用上了。

规则三：所有图片统一宽度

我主页上每一张通栏图片都是 830px 宽。这就是我全部的布局系统。

没有任何一张图比旁边的略宽或略窄，于是整页读起来是整齐的一列，而不是一堆零散的小组件。应用卡片是 408px——正好是在 830 里放下两张卡片外加一个间距。

如果这篇文章你只打算照搬一条规则，就照搬这条。

规则四：像路径一样给栏目命名

我的标题不叫"关于我"和"项目"，而是：

~/links
~/apps
~/status
~/stack

这几乎零成本，却能在半秒之内告诉同行：页面背后这个人常驻终端。它同时让页面更好扫读，因为每个标题长得一样、位置也一致。

规则五：把宣言做成设计元素，而不是一段文字

我在页面正中央放了一条横幅：

零遥测。零云端。零订阅。零广告。

它不是一句个人简介，而是整套产品理念，被做成了一张通栏图片。页面收尾也只有一句话：

你的机器。你的数据。你的掌控。

访客记不住要点列表，但记得住一句能跟着复述的话。

"零小组件"的决定

我下过一个硬决心：页面上所有视觉素材都存放在我自己的仓库里。

没有架在别人服务器上的统计卡片，没有免费服务一打盹就变白的连续打卡计数器，没有第三方一改 URL 就凭空消失的图片。

我的卡片、标题、头图和页脚全是 /assets 目录下的 SVG，唯一来自外部的东西是那个下载徽章。（哪天连它也要去掉，我换成自己的 SVG 就是了。）

两个值得在意的细节：

图片全部使用 `raw.githubusercontent.com` 的绝对链接，这样 README 即使被复制、被镜像或放到别处预览，也照样能正常渲染。
所有图片都写了替代文本（alt text），宣言横幅也不例外，读屏用户和图片加载失败的用户同样能获取完整内容。

整体结构一览

[ ring-light logo ]
[ hero: whoami ]
[ ~/links  → Website · Blog · LinkedIn · Peerlist · Instagram ]
[ ~/apps   → 2×2 grid of cards, each with a DOWNLOAD button ]
[ ~/status → ZERO telemetry banner ]
[ ~/stack  → tech stack ]
[ footer   → "Your machine. Your data. Your control." ]

一共只有六个区块，每个应用只留一个动作入口。页面上没有任何东西是为了凑空间而存在的。

最后留一个挑战。你的个人主页只有一个核心任务。找到它，然后把这个任务做成一个按钮。