AI 做页面总翻车?26 万星前端 skill 排行

同一句「做个落地页」，裸装的 agent 交回来的东西几乎一个模子：居中 hero 大图，下面三张等宽卡片，蓝紫渐变配色，圆角图标。换个 agent 再跑一次，结构照旧。多数人把这口锅扣给模型，重写 prompt、换模型、贴示例图，折腾一圈页面还是那张脸。

差距出在装备层。prompt 是每个项目都要重写的重复劳动，skill 是一次安装、长期生效的审美和流程约束，写进 skill 的设计决策从下一单开始自动生效。这篇按 GitHub Star 把前端出活用得上的 skill 排了一遍，只收高星和知名度经过社区验证的仓——skill 是要长期住进 agent 里的装备，几千星的无名小仓不进榜，出了问题都找不到人。Star 数截至 2026-09-27，来自 GitHub，每天在涨，仅作量级参考。

榜单和插件那篇有三个重合（Superpowers、karpathy、graphify），不是偷懒：这边按前端的活重新评估了一遍，每个都给前端场景的用法。

1. Superpowers · 约 26 万星

仓库：github.com/obra/superpowers

它是什么：agentic skills 框架加一整套软件开发方法论，一个环节一个 skill：brainstorm、设计、TDD、代码审查、调试、执行计划，跨 11 个 agent 平台，是整个 skill 生态里星最高的仓。

为什么值得装：前端活翻车多数不在写的那一刻，在开工前没人定方向。它的 brainstorm 和 design 两个 skill 管的就是这一段：需求先过一遍质疑和选项收敛，出一份方向清单再动手。「我想做个好看的落地页」这种只有一句的需求，经过这道工序会变成有取舍边界的设计简报，agent 拿到的输入质量完全不同。

怎么用：开工先跑 brainstorm 过需求，design 位出方向清单，确认后再进执行；其余 skill（验证门、代码审查）在写码阶段按流程自动接力。

安装（Claude Code 插件市场）：

2. karpathy-skills · 约 19.8 万星

仓库：github.com/multica-ai/andrej-karpathy-skills

它是什么：整个仓库就一个 CLAUDE.md，内容源自 Andrej Karpathy 对「LLM 写代码常踩哪些坑」的观察，把这些反模式直接写进 agent 的行为约束。

为什么值得装：榜单里最轻的一个，零成本、零依赖，却是新项目打底的默认选择。前端场景里它管的是那些不起眼但致命的毛病：静默删代码不改功能清单、自报完成没跑验证、改一处顺手重构十处。这些坑每个前端都踩过，写进 CLAUDE.md 之后 agent 有了一条避坑直觉。

怎么用：装完即生效，跨项目常驻；单项目也可以把那个文件直接合并进项目的 CLAUDE.md，按需删改条目。

安装（插件方式，推荐）：

3. frontend-design · anthropics/skills 官方仓，约 18 万星

仓库：github.com/anthropics/skills

它是什么：Anthropic 官方 Agent Skills 仓库里的前端设计 skill，skill 这个格式的定义者亲自下场写的前端位。装上之后 agent 做 UI 的动作会变：先定视觉方向，再挑字体和配色的组合，每个选择给出理由，最后必须冒一个能自圆其说的美学风险。它的开场白写得很直白：这个客户已经拒绝了所有看起来像模板的方案。

为什么值得装：模板脸的根源是 agent 不敢做选择，默认往最不会错的方向靠。这个 skill 给的是立场，逼 agent 在每个页面里回答「这个站为什么长这样」。官方 SKILL.md 全文不到一屏，就算不装，读一遍也是一份现成的设计自查清单。

怎么用：做 UI 任务时自动触发；也可以显式点名「按 frontend-design 给这个落地页定视觉方向」，让它先出方向提案再动手写码。

安装（Claude Code 插件市场，或通用安装器挑单个）：

注意仓库部分 skill 是 source-available 许可，个人使用没有限制，商用前看一眼 LICENSE。

4. graphify · 约 10 万星

仓库：github.com/Graphify-Labs/graphify

它是什么：把任意代码库转成可查询的知识图谱。本地确定性 AST 解析，每条边都可解释，不依赖向量库。注意 PyPI 包名是 graphifyy（双 y），CLI 命令才是 graphify。

为什么值得装：改存量页面是前端最日常的活，也是 agent 最容易翻车的活——上下文塞不下整个项目，看不全就乱改，改了个公共组件牵连三个页面。graphify 把代码库结构化成图谱，agent 查「这个组件谁在用」「改这行会碰到谁」都有了准头，不用把半个仓库读进上下文。项目越大越值钱，且本地解析、不调云。

怎么用：装好后 graphify install 把 /graphify skill 注册进 agent；改 UI 前先问一句「这个组件被哪些页面引用」，拿到图谱答案再动手。

安装：

5. awesome 索引 · 约 7.3 万星，只翻不装

仓库：github.com/ComposioHQ/awesome-claude-skills

它是什么：社区 skill 的 awesome 清单，按场景分类收录，前端区块挑得出几十个。

为什么只翻不装：字典放书架上随手查，不搬进脑子。索引的价值是遇到新需求先查一遍有没有现成的，查到合适的再单独装那一个，清单本身永远不进 agent。装一份清单进上下文，等于让 agent 每次干活都背着整本字典，加载的每一行都从你的上下文里扣。这也是它排在第五的原因：高星不等于该装。

怎么选：缺哪步补哪步

对着自己的产出找缺口，症状对号入座：

起手别贪多。skill 每次调用都要重新加载，装多了先吃自己的上下文。之前两篇写过 vibe coding 的提示词纪律和 12 个操作技巧（5 条提示词、12 招），这篇补的是装备层，提示词管单次任务，技巧管习惯，skill 管长期配置。

一个判断

prompt 管一次，skill 管一直。重写 prompt 是每个项目重复交的税，装对 skill 是一次性的投入：起手位给直觉，方向位给决策流程，品味位给立场，存量位给准头。如果只装一个，装官方 frontend-design，它改变的是 agent 做页面时的决策方式，这一层的差距 prompt 堆多长都补不上。星数是门槛，进门之后按缺口选位，五个全装只有一个效果：加载税先吃掉你半屏上下文。

往期关联

• 想让 AI 别再做玩具：装完 Claude Code 先别急着聊，5 条提示词决定做出来的是玩具还是产品
• 少返工、省 token、防误删：vibe coding 技巧 12 招
• 通用装备看这篇：你的 Claude Code 只用了三成功力，缺的是这 12 个插件