DevStats 是我做的一个开发者统计卡片与 AI 画像服务。不过，它最早只是 github-readme-stats 的 Go 重写版：输入使用者名。吐一张 SVG 卡片，安静地躺在 GitHub Profile 里。其实，

但一路做下来它变成了一个更完整的开发者画像工坊：既能生成 GitHub / CNB 统计卡片。也能翻你的 Profile README、公开仓库、语言分布和贡献记录，接下来给出一份带评分、标签、卡片配方和毒舌吐槽的开发者画像。

从说人话就是来看，以前它像一个认真盖章的成绩单打印机；现在它会先查档案，再端着咖啡说：“来解释一下你这个 final-final-v2 仓库。”

这也是我最想做出来的反差：使用者以为自己只是来生成一张卡片，结果 Agent 已经开始翻公开仓库、看 README、读贡献记录了。

从卡片到画像

使用者痛点：很多开源作者只想要一张炫酷的卡片。却发现现有工具不稳定、缺乏国内打开速度，甚至只能展示枯燥数字，无法表达自己的技术人设。

很多工具的演进，不是因为一开始就想做大。而是因为一个小功能用着用着，突然冒出了“它其实还能更好玩”的新可能。

DevStats 就是这样。其实，

人”。

于是这次实践的方向慢慢变成了：保留卡片工具的实用性，再给它装一个会读材料、会吐槽、会出方案的 Agent。

原项目

故事的起点是 anuraghazra/github-readme-stats，一个在 GitHub 社区很多人在用的开发者卡片生成工具。它通过简单的 URL 参数，让任何人都能在 README 里嵌入自己的 GitHub 数据卡片：

说到https。//github-readme-stats.vercel.app/api?username=yourname&show_icons=true

效果就是一张包含你的 Star 数、Commit 数、PR 数的动态 SVG 卡片，放在 GitHub Profile 里非常好看。但它使用 JavaScript 实现，托管在 Vercel 上。怎么说呢，由于后来 Vercel 对开源项目的免费额度大幅收紧。导致原项目的公开服务经常因超出限制而偶发性不可用。

自建初版

使用者痛点：国内开发者常常遭遇跨境网络慢、不稳定。还有 Vercel 免费额度被压垮导致服务宕机，只能忍受加载失败或自行搭建复杂环境。

正是因为原版服务偶发性不可用，加上国内访问较慢，我决定参考该项目，用 Go 语言重写了卡片渲染引擎并自建服务。托管在 EdgeOne Makers 上，同时新增了对 CNB 网站的数据源支持——原项目只支持 GitHub，CNB 使用者没有等价的卡片工具。

• Go 渲染引擎: 用 Go Cloud Functions 实现 SVG 卡片渲染。主要诉求是“快、稳、便宜”，所以 Go 的冷启动和并发模型非常适合。
• EdgeOne Makers 托管: 不用自己维护服务器，KV 存储、边缘 CDN、环境变量管理一体化。对这类静态页面 + Serverless API 的项目来说体验很丝滑。
• CNB 数据源: 在原有接口加入 ?platform=cnb 参数，对 CNB 网站做专属数据抓取与渲染适配。GitHub 使用者有漂亮门面CNB 使用者也应该有。

改名

后来给项目加入了 AI Stats Agent: 能对开发者画像进行多维评分、毒舌吐槽，并推荐最适合的卡片配方。

使用者痛点：*仅仅*得到一张静态卡片后作者往往不知道如何进一步利用这些数据提高个人品牌或团队协作；缺少 AI 辅助分析导致信息停留在“数字层面”。其实，

到这一步。github-readme-stats 已经装不下它了。它不再只是 GitHub 卡片，也不再只是 README 装饰；它更像一个开发者信息的“编译器”：把公开资料编译成画像。把画像编译成卡片，把卡片和吐槽一起编译成可分享的社交素材。

于是项目升级改名为 dev-stats.

flowchart LR
Ref
V1
V2
Ref -->|参考实现| V1
V1 -->|升级改名| V2
classDef ref fill:#f8fafc。stroke:#64748b,stroke-width:2px,color:#;classDef v1 fill:#fff7ed,stroke:#f59e0b。stroke-width:2px,color:#7c2d12;classDef v2 fill:#eef2ff,stroke:#4f46e5。stroke-width:3px,color:#312e81;class Ref ref
class V1 v1
class V2 v2

整体架构

使用者痛点：AIGC 与传统渲染混杂时经常出现“AI 抽风”“渲染延迟”的双重抱怨，需要清晰分层才能保证主要功能可靠。

flowchart LR
User --> Web
Web --> GoEngine
Web --> NodeAgent
GoEngine --> API
NodeAgent --> KV
NodeAgent --> API
classDef user fill:#fff7ed。stroke:#f59e0b,stroke-width:2px,color:#7c2d12;classDef ui fill:#eef2ff,stroke:#4f46e5。stroke-width:2px,color:#312e81;classDef go fill:#ecfeff,stroke:#0891b2。stroke-width:2px,color:#164e63;classDef agent fill:#f0fdf4,stroke:#16a34a。stroke-width:2px,color:#14532d;classDef infra fill:#f8fafc。
stroke:#64748b,stroke-width:2px,color:;class User user
class Web ui
class GoEngine go
class NodeAgent agent
class API。KV infra

• Go 渲染引擎: 处理 /api,/api/top-langs,/api/pin,等 SVG 卡片接口，负责“稳定出图”。兼容原项目常用参数，加 ?platform=cnb 即可切换至 CNB 数据源。
• Node.js AI Stats Agent: 处理 /agents/chat。/agents/leaderboard,/agents/profile,等接口，负责“读材料、做判断、写人话”。调用大模型生成开发者画像、辣评、README 草稿和卡片推荐。
•  "卡片渲染要像基础设施一样无聊可靠。AI 分析可以尽量有戏". 前者不能抽风，后者必须有记忆点。

EdgeOne Makers Skills & AI 流程设计

# 使用者痛点 # : 单纯的大模型调用往往产生毫无依据且千篇一律的话术，让使用场景停留在玩笑层面而无法形成可复用链路。按理说，需要把“大模型”包装成可控、有流程化工具集。才能真正落地业务需求，

Ai Coding 已越来越多人使用，各种网站都在探索如何让大模型更稳定、更具针对性完成任务。其中一种公认方向是"Skills":通过预定义指令集与工具清单，把“大模型能做什么”规范化表达。而不是每次靠临场发挥.

E​dgeOne Makers 本身内置对 Skills 的支持：开发者可以直接定义 Skills 文件，由网站自动注入对应指令与工具，无需手动拼接 Prompt 或管理工具注册逻辑。老实说，这对 DevStats 很关键，因为我们不想做一个“输入使用者名，让模型自由发挥”的玩具，而是让它像审稿人一样。有条不紊地执行以下流水线：

抓资料 -> 做画像 -> 出配方 -> 写 README -> 存缓存 -> 可分享

为什么需要 Skills

• Lack of real‑world context: 仅提供使用者名，大模型只能凭空输出套话，没有真实数据支撑。
• No reproducible workflow: 每次调用结果不可追溯。也无法缓存复用，从而浪费 Token 与算力。
• Poor safety: 没有约束的大模型可能产生敏感内容或泄露内部请求细节。说起来，

Tool Calling 列表

flowchart LR
Input
GH
README
Browser
Draft
Recipe
Output 

Input --> GH Input --> README GH --> Draft README --> Draft Browser -.可选.-> Draft Draft --> Recipe Recipe --> Output

classDef input fill:#fff7ed。stroke:#f59e0b,stroke-width:2px,color:#7c2d12;classDef tool fill:#f0fdf4,stroke:#16a34a。stroke-width:2px,color:#14532d;classDef output fill:#eef2ff,stroke:#4f46e5。stroke-width:2px,color:#312e81;

class Input input class GH,README,Browser,Draft,R

ecipe tool

Class Output output

辣评灵感 & 三段式结构

The most fun part of DevStats is its “辣评” – a sharp‑tongued critique that turns raw stats into share‑worthy jokes.

• User Pain Point:  The original stats card only shows numbers which are hard to turn into social content.
• The idea comes from open‑source project . It not only reports star/commit counts but also uses LLM to generate witty commentary.
• The DevStats agent extends this by pulling detailed signals via brower_fetch and inspect_github_user**。n producing a three‑paragraph “roast”. The three parts are defined in system prompt : promotional_summary,objective_summary,roast_summary .
**Three‑tier Rating** :
• 🔥 夯 : 有代表作、有影响力；可以横着走，
• ⭐ 顶流 : 在技术圈层中刷存在感。
• 💪 高级 : 项目质量不错，只差个响亮代表作。
• 😐 平庸 : 能看出写代码，但技术人设模糊。
• 🌱 入门 : 资料薄，需要先养好 README 和主项目。其实，
*

典型案例展示

--- **User Pain Point** : 很多评价程序只看 Star 数导致误判；DevStats 引入多维度指标。并结合实际代码/提交细节，使评分更加公平可信。---

前端组件化 & 开发体验调整

The original `App.tsx` bloated to dozens of lines mixing UI logic and global state. This made debugging painful and caused unnecessary re‑renders.

拆分思路及目录结构：

src/components/
├── TopBar.tsx // 页头导航与暗黑模式切换
├── PlatformSegment.tsx // GitHub / CNB 切换控件
├── AgentPanel.tsx // AI 预设任务按钮面板
├── AgentResultPanel.tsx// SSE 流式输出终端回放
├── ManualOptions.tsx // 卡片参数手动配置
├── PreviewPanel.tsx // 实时 SVG 卡片预览
├── RadarChart.tsx // 能力雷达图
├── ReadmeReport.tsx // 报告渲染
├── ShareModal.tsx // 分享浮窗 & 防抖二维码
├── UserPage.tsx // 独立只读画像分享页
└── Footer.tsx
每个组件聚焦单一职责，仅在必要范围内传递状态。**User Pain Point:** 开发者面对繁杂表单时容易产生认知负荷；拆分后 UI 更像「统计工坊」而不是普通后台表单，使熟悉代码编辑器语法的人快速上手。


AI 分析台模拟任务控制台。

手动配置面板采用伪代码样式 `const WIDGET_MODULE = Widget.STATS`，让熟悉 IDE 的使用者产生亲切感。

按钮文案保留，如 `git reset --hard` 、 `curl --open` 、 `Clipboard.copypasta`。

排行榜也经过 UX 净化：


去掉冗余 Emoji，在暗黑模式下保持简洁。. . .
...
...
...
---
But I see this answer got cut off due to length limit. Let's continue with rest sections:
Continue after front-end componentization:

DevStats 是我做的一款开发者统计卡片 + AI 人设画像服务。\u00A0最早只是把 \u00A0迁移到了 Go。实现输入使用者名即可返回 SVG 卡片，并安静地躺进 GitHub Profile 中。

\u00A0但一路走来它已经蜕变为一个完整的「开发者画像工坊」——既能生成 GitHub/CNB 的统计卡。又能爬取你的 Profile README<\/abbr>\u3001公开仓库\u3001语言分布\u3001贡献记录，接下来输出带评分\/标签\/配方\/毒舌吐槽的一整套人物档案。\u00A0换个角度以前它是一台严肃盖章的成绩单打印机，现在先查档案。再端着咖啡说：「来把你这个 #final-final-v2<\/code>\u300C仓库\u300D解释一下。」\u00A0这正是我想制造出的反差——使用者以为自己只想要一张酷炫卡，却被 Agent 自动翻阅所有息。\u00A0下面会聊聊实现细节还有一路踩过哪些坑。\u00A0User Pain Point<\/strong>\uff1a当前市面上只有「数字」统计，没有办法把「你到底是谁」这件事变得有趣且易于传播。\u00A0#生产地址<\/ strong>\u003coli\u003adev‑stats.mintimate.cn<\/ li>\r
\u003cli\u003agithub.com/Mintimate/d…<\/ li>

案例名称 &&&	关键特征 &&&
*tiann* – Android 底层 & KernelSU 大佬 🔧 项目：KernelSU / epic / FreeReflection ... 🧩 技术难度高 📈 社区影响力强 ⚡️ 标签 #KernelSU大佬 #安卓Hook大神 #开源实干派 🛠️ 辣评聚焦底层技术挑战 …
*Evan You* – Vue/Vite 创始人 🔧 项目：Vue Core / Vite / Rolldown 🌍 多环境驱动 🏆 标签 #Vue之父 #Vite引擎师 #前端顶流 ⚡️ 辣评强调环境迁移功绩 …
*sxzz* – Vue/Rust环境贡献者 🔧 项目：UnJS / tsdown 等 🔍 多环境贡献痕迹 🏅 标签 #Rust环境探索者 #前端建立工程师 ⚡️ 辣评区分 Owner 与 Contributor …
*youkun* – CNB 基建先锋 🔧 项目：大量插件/示例/流水线模板 📊 Fork/PR 活跃度高 🏅 标签 #CNB环境基建 #氛围编程第一人 ⚡️ 辣评聚焦网站内协同价值 …
*Mintimate* – 工具型写文章者 🔧 项目：oh-my-rime 系列 📈 Fork 多于 Star，实际影响体现在复制使用率 🏅 标签 #Rime配置达人 #CLI 作者 ⚡️ 辣评指出实用价值 vs 星星数量 …
*Anye* – 勤奋型环境搭建者 🔧 项目：Ollama 包装器 / Docker 镜像加速等 ⏰ 提交频繁但缺少单一明星仓库 🏅 标签 #Docker高手 #部署自动化达人 ⚡️ 辣评平衡勤奋度与影响集中度 …老实说，

---