Cursor on 拾光集

CodexBar：在 macOS 菜单栏统一查看 AI 编程工具额度

Tue, 28 Jul 2026 20:22:00 +0800

同时使用 Codex、Claude、Cursor、Gemini 和 GitHub Copilot 时，最麻烦的事情之一，就是不知道每个平台还剩多少额度，以及下一次什么时候重置。

CodexBar 是一款免费开源的 macOS 菜单栏应用，可以把多个 AI 编程工具的使用额度、重置倒计时、余额和服务状态集中显示在桌面顶部。

不用反复打开不同网站，抬眼看一下菜单栏，就能了解当前 AI 工具的使用情况。

CodexBar 能做什么？

CodexBar 主要解决三个问题：

查看不同 AI 服务的当前使用额度
显示会话、每周或每月额度的重置时间
提醒用户某个服务是否出现故障或额度不足

部分服务还可以显示：

剩余积分或账户余额
API 调用费用
Token 使用量
最近一段时间的使用趋势
服务故障和运行状态

具体能够显示哪些数据，取决于对应服务是否提供相关接口。

支持哪些 AI 工具？

CodexBar 官方目前列出了 63 个服务提供商，常见的包括：

OpenAI Codex
OpenAI API
Claude
Cursor
Gemini
GitHub Copilot
Grok
GroqCloud
OpenRouter
LiteLLM
DeepSeek
ElevenLabs
Deepgram
MiniMax
Kiro
Zed
Vertex AI
AWS Bedrock

不同服务的连接方式并不完全相同，可能需要使用 OAuth、API Key、浏览器登录状态、本地 CLI 或应用配置文件。

两种菜单栏显示方式

CodexBar 提供两种主要显示模式。

独立图标模式

每个 AI 服务在菜单栏中显示一个独立状态项。

这种方式适合只使用两三个 AI 工具的用户，可以直接看到每个平台的剩余额度。

合并图标模式

将多个服务合并到一个菜单栏图标中，再通过提供商切换器查看不同平台。

当启用的 AI 工具较多时，这种模式可以减少菜单栏占用空间。

CodexBar 本身没有 Dock 图标，主要通过菜单栏运行，界面比较简洁。

动态条形图标有什么用？

CodexBar 会使用动态条形图标表示当前额度。

用户不需要每次点击菜单，就能通过图标大致判断：

当前额度是否充足
使用量是否接近上限
是否需要等待下一次重置
服务是否出现异常

对于长时间使用 AI 编程助手的开发者，这种显示方式比频繁检查网页控制台更方便。

如何安装 CodexBar？

CodexBar 桌面应用要求：

macOS 14 Sonoma 或更高版本

使用 Homebrew 安装：

`1`	`brew install --cask codexbar`

也可以前往 GitHub Releases 页面下载安装包。

安装完成后，打开：

`1`	`Settings → Providers`

启用自己正在使用的 AI 服务，并根据提示完成登录或授权。

使用时需要注意什么？

CodexBar 会复用已有的 OAuth 登录、浏览器 Cookie、API Key、本地 CLI 登录状态或配置文件，不会要求用户把所有平台密码直接保存到应用中。

不过，部分功能可能需要：

访问浏览器 Cookie
读取钥匙串信息
读取本地项目或日志文件
配置 API Key
开启文件访问权限

因此，在启用某个提供商之前，建议先查看该服务对应的数据来源和权限说明。

此外，不同 AI 平台开放的数据并不一致，所以并不是所有提供商都能同时显示额度、费用、Token 和重置时间。

CodexBar 适合哪些人？

CodexBar 比较适合以下用户：

同时使用多个 AI 编程助手
经常遇到 Codex 或 Claude 额度限制
需要管理多个 API 账户
希望提前安排高消耗编程任务
不想频繁打开不同平台的控制台
想在菜单栏快速查看 AI 服务状态

如果你只偶尔使用一个 AI 工具，CodexBar 的作用可能不明显。

但对于每天同时使用 Codex、Claude、Cursor、Gemini 等工具的人来说，它可以减少检查额度和切换网页的时间。

总结

CodexBar 并不会增加 AI 工具的额度，它真正解决的是“额度不可见”的问题。

它把分散在不同平台中的使用限制、重置倒计时、账户余额和服务状态集中到 macOS 菜单栏，让用户能够更合理地安排 AI 编程任务。

项目免费开源，采用 MIT 许可证，支持 Homebrew 安装，也提供适用于 macOS 和 Linux 的命令行工具。

项目地址

GitHub：https://github.com/steipete/CodexBar
官方网站：https://codexbar.app/
Releases：https://github.com/steipete/CodexBar/releases

UI/UX Pro Max：让 AI 生成的界面摆脱模板感

Mon, 27 Jul 2026 21:55:00 +0800

使用 AI 编程工具生成网页时，很多人都会遇到同一个问题：

代码可以运行，但界面一眼就能看出是 AI 做的。

页面通常拥有相似的渐变背景、圆角卡片、超大标题和玻璃效果。无论开发的是企业官网、后台管理系统，还是医疗、金融类产品，AI 都可能套用相近的视觉风格。

这种问题并不完全是 AI 不会写前端，而是它在生成代码之前，缺少一套针对具体业务场景的设计判断。

开源项目 UI/UX Pro Max，就是为了解决这个问题而出现的。

UI/UX Pro Max 是什么？

UI/UX Pro Max 是一个面向 AI 编程助手的设计智能 Skill。

它不是一套固定的网页模板，也不是简单收集几十种配色方案，而是将 UI 风格、颜色、字体、用户体验规范、图表设计和技术栈规则整理成一个可检索的设计知识库。

当 AI 接到页面开发任务后，可以先根据产品类型、行业属性和使用场景检索合适的设计规则，再生成完整的设计系统，最后进入代码实现阶段。

官方项目资料显示，目前的规则库包含：

84 种 UI 风格
192 套配色方案
74 组字体搭配
98 条 UX 指南
25 种图表类型
22 种技术栈规则

项目采用 MIT License，并支持 Claude Code、Cursor、Windsurf、GitHub Copilot、Codex CLI、Gemini CLI、OpenCode 等多种 AI 编程助手。

AI 生成的 UI 为什么容易出现“模板感”？

普通 AI 编程助手接到这样的需求：

帮我设计一个现代化的 SaaS 产品首页。

它往往会直接进入代码生成阶段。

由于缺少行业、用户和品牌信息，AI 只能调用训练数据中出现频率较高的设计模式，例如：

蓝紫色渐变背景
大量圆角卡片
玻璃拟态效果
居中的超大标题
三列功能介绍
缺少差异化的信息架构
动效很多，但没有明确作用

这些设计本身并不一定错误。

真正的问题是，AI 没有先判断：

这是什么类型的产品？
页面主要面向谁？
用户进入页面后最需要完成什么任务？
这个行业适合什么视觉语言？
哪些设计会削弱专业感和可信度？
当前技术栈适合采用哪些组件和交互方式？

当所有项目都使用相同的设计套路时，页面自然会出现明显的“AI 味”。

UI/UX Pro Max 如何改善 AI 生成界面？

UI/UX Pro Max 的核心价值，不是为 AI 增加更多模板，而是改变 AI 的工作顺序。

普通工作流程通常是：

用户提出需求
→ AI 直接写代码
→ 生成页面
→ 再反复修改样式

接入 UI/UX Pro Max 后，流程会变成：

用户提出需求
→ 分析产品类型与使用场景
→ 检索设计规则
→ 生成设计系统
→ 编写页面代码
→ 检查常见 UI/UX 反模式

官方说明中也明确列出了这套过程：AI 会先理解需求，生成设计系统，推荐合适的样式、颜色和字体，再进行代码实现，并在交付前检查常见的 UI/UX 问题。

换句话说，它试图让 AI 从“直接写页面”，转变为：

先完成设计判断，再进行前端实现。

它能提供哪些设计判断？

1. 页面结构与用户流程

不同类型的产品，需要不同的信息结构。

例如：

SaaS 首页需要突出价值主张、功能、使用案例和转化入口
电商页面需要突出商品、价格、评价和购买路径
后台系统需要重视信息密度、筛选效率和操作反馈
医疗产品需要强调可信度、清晰度和无障碍体验
金融产品需要避免轻浮视觉，并突出安全感和数据准确性

UI/UX Pro Max 会根据产品类型，帮助 AI 选择更合理的页面结构，而不是机械套用统一模板。

2. UI 风格、配色与字体

项目内置了多种 UI 风格、配色方案和字体组合。

AI 可以根据行业和品牌定位，选择更适合的视觉语言。例如：

科技产品可采用克制、清晰的现代风格
奢侈品网站可使用更高留白比例与精细字体
儿童产品可使用更友好、活泼的颜色
企业后台应优先保证清晰度和信息效率
医疗和金融产品应避免过于娱乐化的视觉效果

重点并不是“哪套颜色更漂亮”，而是“哪套设计更符合业务场景”。

3. 交互规范与动效建议

AI 很容易为了让页面看起来高级，而加入过多动画。

但真正专业的动效，应该帮助用户理解状态变化，例如：

按钮点击后的反馈
表单提交中的加载状态
页面切换时的层级变化
错误信息出现的位置
弹窗打开与关闭的过渡
数据刷新后的视觉提示

UI/UX Pro Max 会引导 AI 使用有明确目的的动效，而不是为了炫技而增加动画。

4. 行业规则与设计反模式

这个项目还会检查一些常见的 UI/UX 问题，例如：

正文文字对比度过低
按钮颜色与背景接近
点击区域过小
页面缺少加载状态
表单错误提示不清楚
移动端布局没有适配
图标风格不统一
重要操作缺少确认机制
动画时间过长
内容层级不明确

对于医疗、金融、企业服务等需要建立信任的行业，这类检查往往比增加视觉特效更重要。

支持哪些前端技术栈？

UI/UX Pro Max 不只提供通用设计建议，还包含针对不同开发框架的规则。

官方列出的技术栈包括：

类型	支持的技术栈
Web	HTML、Tailwind CSS
React 生态	React、Next.js、shadcn/ui
Vue 生态	Vue、Nuxt.js、Nuxt UI
其他 Web 框架	Angular、Svelte、Astro、Three.js
PHP	Laravel、Blade、Livewire、Inertia.js
移动端	SwiftUI、Jetpack Compose
跨平台	React Native、Flutter
桌面端	JavaFX、WPF、WinUI 3、Avalonia 等

没有指定技术栈时，项目默认可以按照 HTML 和 Tailwind CSS 提供建议。

UI/UX Pro Max 安装方法

环境要求

安装前需要准备：

Node.js 与 npm
Python 3.x
已安装并可以正常使用的 AI 编程助手

项目中的设计搜索脚本需要 Python 3.x，但只使用 Python 标准库，不会额外安装依赖，也不需要联网运行。

第一步：安装命令行工具

`1`	`npm install -g ui-ux-pro-max-cli`

需要注意：

当前 npm 包名称是 ui-ux-pro-max-cli
安装完成后使用的命令是 uipro
旧的 uipro-cli 包已经过时，不建议继续使用

不想进行全局安装，也可以直接使用：

`1`	`npx ui-ux-pro-max-cli init --ai claude`

第二步：进入项目目录

`1`	`cd /path/to/your/project`

Windows 用户可以使用自己的实际项目路径，例如：

`1`	`cd D:\Projects\my-web`

第三步：为 AI 助手初始化

Codex CLI

`1`	`uipro init --ai codex`

Claude Code

`1`	`uipro init --ai claude`

Cursor

`1`	`uipro init --ai cursor`

Windsurf

`1`	`uipro init --ai windsurf`

Gemini CLI

`1`	`uipro init --ai gemini`

同时安装到所有支持的平台

`1`	`uipro init --ai all`

官方 CLI 还支持 GitHub Copilot、Kiro、Roo Code、Qoder、OpenCode、Continue、CodeBuddy、Warp、Augment 等工具。

安装后如何使用？

对于支持 Skill 自动触发的 AI 助手，安装完成后通常不需要记忆复杂命令。

可以直接输入类似需求：

请使用 UI/UX Pro Max，为一家面向欧洲客户的纺织品贸易公司设计官网首页。

先分析目标客户、品牌定位和用户访问目的，再输出完整设计系统，包括：

1. 页面信息架构
2. 主色与辅助色
3. 字体与字号层级
4. 栅格与间距规则
5. 按钮、卡片和表单规范
6. 响应式布局方案
7. 动效建议
8. 需要避免的设计反模式

设计系统确认后，再使用 Next.js、Tailwind CSS 和 shadcn/ui 编写代码。

相比只说“帮我做一个高级官网”，这样的提示词提供了更明确的业务信息，也更容易发挥 UI/UX Pro Max 的价值。

一个更实用的使用思路

在实际项目中，可以把 UI/UX Pro Max 分成三个阶段使用。

阶段一：生成设计系统

先让 AI 输出：

产品类型
目标用户
页面目标
信息架构
颜色系统
字体系统
间距系统
组件规范
动效规则
无障碍要求
避坑清单

阶段二：生成页面代码

设计规则确认后，再让 AI 编写：

首页
登录页
仪表盘
产品详情页
表单页面
移动端页面

这样可以减少不同页面之间颜色、字体、按钮和间距不一致的问题。

阶段三：检查已有页面

它也可以用于审核现有项目。

例如：

请使用 UI/UX Pro Max 检查当前页面。

重点检查：

- 信息层级是否清楚
- 配色对比度是否合格
- 字体和间距是否统一
- 移动端是否容易操作
- 表单是否有完整反馈
- 是否存在过度设计
- 是否有明显的 AI 模板感

请先列出问题和修改建议，再修改代码。

使用时需要注意什么？

UI/UX Pro Max 可以改善 AI 的设计判断，但它不能完全替代产品经理和专业设计师。

它无法自动知道：

企业真实的品牌规范
用户调研结果
产品的核心商业目标
哪些功能最影响转化
客户所在市场的审美差异
企业内部的合规要求

因此，在向 AI 提需求时，仍然需要补充具体信息。

相比下面这种模糊表达：

`1`	`帮我设计一个高级、现代、科技感的网站。`

更推荐这样描述：

1
2
3

为一家面向欧洲中高端男装品牌的面料供应商设计官网。

目标用户是品牌采购经理和设计师，页面需要突出面料开发能力、产品分类、认证信息、合作流程和联系方式。整体应专业、克制、有纺织行业质感，避免蓝紫渐变、玻璃拟态、过度动画和互联网 SaaS 模板风格。

输入的信息越具体，AI 越容易生成符合真实业务需求的界面。

总结

UI/UX Pro Max 解决的并不是“AI 不会写 CSS”，而是 AI 在编写前端代码之前，往往没有进行足够的设计分析。

它通过可检索的 UI/UX 知识库，把设计判断前置到代码生成之前，使 AI 能够按照下面的流程工作：

理解业务
→ 分析用户
→ 建立设计系统
→ 选择技术方案
→ 编写代码
→ 检查设计问题

对于没有专职设计师的个人开发者、小团队和 AI 编程用户来说，这种工作方式可以减少反复修改，也能让不同页面保持更统一的视觉和交互规范。

它不会让 AI 自动变成资深设计师，但能明显降低 AI 直接套用通用模板的概率。

项目信息

项目名称：UI/UX Pro Max
开发者：NextLevelBuilder
开源协议：MIT License
GitHub 项目：nextlevelbuilder/ui-ux-pro-max-skill

Headroom：最高减少 92% Token，用 AI 编程时别再把钱浪费在无效上下文上

Mon, 27 Jul 2026 20:09:00 +0800

使用 Claude Code、Codex、Cursor 等 AI 编程工具时，真正消耗 Token 的往往不只是你输入的提示词。

代码搜索结果、终端日志、报错堆栈、GitHub Issue、历史对话和 RAG 检索内容，都会被不断塞进上下文。随着任务持续进行，上下文越来越长，每次请求的成本和等待时间也会随之增加。

最近发现的开源项目 Headroom，就是专门解决这个问题的。

它会在日志、代码、文件和工具输出发送给大模型之前，先识别内容类型并压缩其中的重复信息和低价值内容，让模型尽量只接收真正需要的信息。

根据项目公开测试，部分场景可以减少约 47%—92% 的输入 Token。

Headroom 是什么？

Headroom 是一个面向 AI Agent 和 AI 编程工具的上下文压缩层。

简单理解，它位于 AI 工具与大模型 API 之间：

Claude Code / Codex / Cursor
            ↓
         Headroom
     压缩日志、代码和历史上下文
            ↓
   OpenAI / Anthropic 等模型

它并不是简单粗暴地删除历史消息，而是根据内容类型选择不同的压缩方式。

例如：

JSON 数据使用结构化压缩
源代码按照 AST 语法结构处理
普通文本使用专门的压缩模型
重复日志、无关字段和冗余搜索结果会被优先精简
原始内容可保存在本地，需要时仍可重新获取

Headroom 默认在本地运行，项目说明中表示，处理的数据可以保留在本机，而不需要额外上传到第三方压缩服务。

实际能节省多少 Token？

Headroom 项目给出了几组真实 Agent 工作负载测试数据：

使用场景	压缩前	压缩后	Token 减少
代码搜索，返回 100 条结果	17,765	1,408	92%
SRE 事故日志排查	65,694	5,118	92%
GitHub Issue 分类	54,174	14,761	73%
大型代码库探索	78,502	41,254	47%

这组数据说明，Headroom 最适合处理大量结构化数据、搜索结果和重复日志。

如果只是几句话的简单问答，压缩空间通常不会特别明显；但在大型代码仓库、持续调试或多 Agent 工作流中，每次节省的 Token 会不断累积。

压缩后会不会影响回答质量？

这是使用上下文压缩工具时最需要关注的问题。

Headroom 项目公开了 GSM8K、TruthfulQA、SQuAD v2 和 BFCL 等测试结果：

测试项目	原始结果	使用 Headroom	变化
GSM8K 数学推理	0.870	0.870	无变化
TruthfulQA 事实问答	0.530	0.560	小幅提升
SQuAD v2 问答	—	97%	19% 压缩率
BFCL 工具调用	—	97%	32% 压缩率

从项目公布的数据看，压缩后没有出现明显的准确率下降，部分测试结果甚至略有提高。

不过需要注意，这些结果主要来自项目方自己的测试环境，并不能代表所有代码库和业务场景。更稳妥的做法，是先在自己的项目中运行一段时间，对比压缩前后的回答质量和 Token 消耗，再决定是否长期启用。

Headroom 支持哪些 AI 编程工具？

Headroom 已经适配多种常见 AI 编程工具，包括：

Claude Code
OpenAI Codex
Cursor
Aider
GitHub Copilot CLI
OpenCode
Cline
Continue
Goose
OpenHands
Grok CLI
Kimi CLI

对于 Claude Code、Codex 和 Aider 等工具，可以直接通过 headroom wrap 启动。

Cursor 目前主要采用手动配置代理地址的方式接入。

此外，Headroom 也支持 Python、TypeScript、LangChain、Agno、LiteLLM、Vercel AI SDK 和 MCP 客户端，适合接入已有的 AI 应用或 Agent 系统。

最简单的安装方法

Headroom 要求 Python 3.10 或以上版本。

推荐使用 uv 进行隔离安装：

`1`	`uv tool install --python 3.13 "headroom-ai[all]"`

也可以直接使用 pip：

`1`	`pip install "headroom-ai[all]"`

安装完成后检查版本：

`1`	`headroom --version`

需要注意，npm 版本只是 TypeScript SDK，并不包含 headroom 命令行工具：

`1`	`npm install headroom-ai`

因此，想直接使用 headroom wrap、代理服务或 MCP 功能，应该优先安装 Python 版本。

在 Claude Code 中使用

安装完成后执行：

`1`	`headroom wrap claude`

Headroom 会启动本地代理，并通过代理启动 Claude Code。

之后，Claude Code 读取代码、运行命令或分析日志时，相关上下文会先经过 Headroom 处理，再发送给模型。

可以使用以下命令检查运行状态：

`1`	`headroom doctor`

查看压缩性能：

`1`	`headroom perf`

打开节省统计面板：

`1`	`headroom dashboard`

在 Codex 中使用

Codex 可以通过下面的命令启动：

`1`	`headroom wrap codex`

如果 Codex 无法识别终端里的 headroom 命令，可以先查询完整路径：

`1`	`command -v headroom`

然后把返回的绝对路径写入 Codex 的 MCP 配置：

1
2
3

[mcp_servers.headroom]
command = "/你的绝对路径/headroom"
args = ["mcp", "serve"]

这种情况通常不是 Headroom 安装失败，而是 Codex 启动时没有继承当前终端的 PATH 环境变量。

跨 Agent 共享记忆

Headroom 不只是压缩工具，还提供跨 Agent 共享上下文的能力。

例如，你可以让 Claude Code 和 Codex 使用同一个本地记忆存储：

1
2

headroom wrap claude --memory
headroom wrap codex --memory

这样，在 Claude Code 中已经分析过的项目内容，可以被压缩、去重后继续提供给 Codex 使用，减少不同 AI 工具重复读取同一批文件。

Headroom 还提供 headroom learn 功能，可以分析失败的历史会话，并把修正经验写入：

CLAUDE.local.md
CLAUDE.md
AGENTS.md
GEMINI.md
GROK.md

这类功能适合长期维护同一个代码库，但自动生成的规则仍然需要人工检查，避免错误经验被持续复用。

Headroom 适合哪些人？

Headroom 更适合以下场景：

经常使用 Claude Code、Codex 或 Cursor
需要分析大量终端日志和报错信息
经常进行大型代码库搜索
使用 API 按 Token 付费
同时使用多个 AI Agent
RAG 检索结果较长且重复内容较多
希望降低上下文成本和请求延迟

下面这些情况则不一定需要安装：

只是偶尔使用网页版 AI 聊天
每次任务都很短，上下文内容很少
使用的环境不允许启动本地代理
已经完全依赖模型厂商自带的上下文压缩
项目涉及敏感业务，但尚未完成安全审查

使用前需要注意什么？

1. 最高 92% 不代表每次都能省 92%

92% 是代码搜索和事故排查等特定测试场景的数据。

根据任务类型不同，实际压缩效果可能只有 20%、40%，也可能在结构化日志中达到更高比例。

2. 先在测试项目中验证

代码上下文可能包含函数签名、错误细节、配置字段和依赖版本。

即使 Headroom 支持可逆压缩，也建议先在非关键项目中测试，确认不会遗漏影响判断的重要信息。

3. 本地运行不等于没有安全风险

Headroom 会位于 AI 工具与模型服务之间，能够接触请求内容。

在公司项目或敏感代码环境中使用前，应检查项目源码、依赖、日志保存方式和代理配置。

4. 定期查看节省数据

可以通过以下命令检查实际收益：

1
2

headroom perf
headroom dashboard

不要只因为项目宣传中的最高数字就长期启用。真正有价值的是，它在你的工作流中能否稳定降低 Token，同时保持结果可靠。

总结

Headroom 解决的不是“提示词写得不够好”，而是 AI Agent 工作过程中产生了太多无效上下文。

代码搜索结果、构建日志、历史对话、RAG 数据和工具返回内容，会不断占用上下文窗口，也会增加 API 成本。

Headroom 在这些内容进入模型前进行结构化压缩，并提供可逆内容检索、跨 Agent 记忆和失败经验学习等功能。对于频繁使用 Claude Code、Codex、Cursor 或其他 AI 编程工具的人，它确实值得测试。

但更准确的说法不是“安装后一定节省 92%”，而是：

在日志、搜索结果和大型代码库等高冗余场景中，Headroom 有机会显著减少 Token；最终效果应以自己的项目测试结果为准。

项目地址

GitHub：https://github.com/headroomlabs-ai/headroom
开源协议：Apache License 2.0
当前 GitHub Stars：约 62.7K，数据会持续变化

Codex 效率倍增：5 个值得关注的开源工具

Mon, 27 Jul 2026 19:40:00 +0800

同样使用 Codex，为什么有些人写代码更快、更稳，还能让 AI 自动查文档、理解大型项目，甚至操作浏览器和电脑？

原因并不只是模型更强，而是他们给 Codex 配置了更完整的工具链。

Codex 本身已经可以阅读代码、修改文件、运行命令和修复 Bug，但在实际使用中，仍然容易遇到以下问题：

没有理解完整需求，就直接开始写代码；
使用过时的技术文档，生成已经失效的 API；
一个简单功能引入大量依赖，代码越来越复杂；
项目文件太多，AI 反复搜索代码，消耗大量 Token；
AI 能分析问题，却无法操作浏览器或桌面软件。

下面介绍 5 个值得关注的开源项目。它们分别从开发流程、网页数据、代码精简、项目理解和电脑自动化五个方向，补足 Codex 的能力。

本文中的 GitHub Star 数量会随时间变化，因此不再使用固定数字作为主要判断标准。是否值得安装，还应结合项目更新频率、Issue、许可证和实际需求综合判断。

5 个工具分别解决什么问题？

工具名称	核心功能	主要解决的问题
Superpowers	为 AI 加入需求分析、开发计划、测试和代码审查流程	AI 没想清楚就直接写代码
Firecrawl	抓取网页并转换为 Markdown 或结构化数据	AI 使用过时文档或无法读取网页
Ponytail	强调标准库优先、最小实现和减少依赖	代码过度设计、项目越来越臃肿
Graphify	将代码库转换为本地知识图谱	大型项目难理解、反复搜索文件
Agent TARS	识别屏幕并操作鼠标、键盘和浏览器	AI 只能思考，不能完成界面操作

1. Superpowers：让 Codex 先分析，再写代码

很多 AI 编程任务失败，并不是因为模型不会写代码，而是因为它在需求还没有明确时，就直接开始修改项目。

例如，你只说一句：

给网站增加一个用户登录功能。

AI 可能马上创建数据库、安装认证框架、增加多个中间件，最后才发现你只需要一个简单的后台密码验证。

Superpowers 的作用，就是给 Codex、Claude Code 等 AI 编程工具增加一套更严格的软件开发流程。

它通常会引导 AI 按照以下步骤工作：

先分析用户需求；
主动询问缺失的细节；
输出开发方案；
将任务拆分成多个步骤；
编写测试；
实现功能；
运行测试；
检查代码质量；
完成代码审查。

它更像是一套 AI 开发规范，而不是简单的提示词模板。

Superpowers 适合解决什么问题？

如果你经常遇到下面这些情况，可以考虑使用 Superpowers：

AI 没理解需求就开始修改代码；
功能做出来了，但方向完全错误；
修改一个问题，却破坏了其他功能；
AI 写完代码后不测试；
大型任务执行到一半开始偏离目标；
希望 Codex 按测试驱动开发流程工作。

使用时需要注意

Superpowers 会让开发流程更加完整，但也会增加执行步骤。

如果只是修改一个按钮颜色、调整一段文字或修复简单配置，并不一定需要启动完整的需求分析和测试流程。

它更适合中等以上复杂度的开发任务。

2. Firecrawl：让 Codex 获取最新网页和技术文档

AI 编程工具经常会遇到一个问题：模型掌握的知识不是实时更新的。

当框架、云服务或第三方 API 更新后，Codex 可能仍然使用旧版本参数，甚至生成已经被删除的方法。

例如：

Next.js 更新了路由方式；
OpenAI API 修改了请求格式；
Cloudflare 增加了新的配置参数；
某个 JavaScript 库废弃了旧方法；
官方文档已经更新，但 AI 仍然按照旧教程回答。

Firecrawl 是一个面向 AI Agent 的网页抓取和数据提取工具。

它可以将网页内容整理成适合 AI 阅读的格式，包括：

Markdown；
HTML；
JSON；
结构化数据；
网页截图；
页面链接；
整站爬取结果。

普通网页中通常包含导航栏、广告、按钮、脚本和大量无关代码。

Firecrawl 会尽量提取正文内容，再转换成干净的 Markdown，让 Codex 更容易理解。

Firecrawl 可以怎么配合 Codex？

例如，你准备让 Codex 接入一个刚刚更新的 API。

可以先让 Firecrawl 抓取官方文档，再把整理后的内容交给 Codex。

这样，Codex 不需要完全依赖模型记忆，而是根据最新文档生成代码。

一个常见工作流程是：

抓取官方文档
↓
转换为 Markdown
↓
交给 Codex 阅读
↓
根据最新文档生成代码
↓
运行测试验证

Firecrawl 适合哪些场景？

获取最新 API 文档；
抓取产品页面；
整理公开数据；
分析竞争对手网站；
提取新闻和文章正文；
给 AI Agent 提供实时互联网内容；
将复杂网页转换成 Markdown。

使用时需要注意

Firecrawl 的核心项目是开源的，但官方提供的云端 API 服务可能存在免费额度和付费套餐。

因此，“项目开源”不代表所有在线调用都永久免费。

如果需要大量抓取，也可以研究自托管方案。

同时，抓取网站时应遵守目标网站的 robots.txt、服务条款和相关法律要求。

3. Ponytail：阻止 AI 把简单问题写复杂

Codex 在生成代码时，有时会出现明显的过度设计。

一个原本只需要十几行代码的小功能，AI 可能会：

新建多个文件；
引入新的第三方库；
创建多层抽象；
增加复杂配置；
设计未来可能永远不会使用的扩展接口；
把简单逻辑封装成多个类。

最终结果是代码看起来很专业，但维护成本越来越高。

Ponytail 的核心思想是：

没有明确需要的功能，就不要提前实现。

这也是软件开发中常见的 YAGNI 原则，即：

You Aren’t Gonna Need It。

Ponytail 会引导 AI 优先考虑以下问题：

这个功能真的需要新增代码吗？
项目中是否已经存在类似能力？
能否直接使用语言标准库？
能否使用平台原生功能？
是否真的需要安装第三方依赖？
是否可以使用更简单的实现？
是否正在为不存在的未来需求过度设计？

举一个简单例子

假设需求是读取一个 JSON 文件。

AI 可能建议安装额外的 JSON 处理库。

但对于 Python、JavaScript、Go 等语言来说，标准库本身已经具备 JSON 解析能力。

Ponytail 会优先让 AI 使用现有能力，而不是为了一个简单任务增加新的依赖。

Ponytail 适合哪些用户？

个人开发者；
小型项目；
快速验证产品；
希望减少依赖的团队；
经常使用 Codex 生成代码的用户；
发现项目越改越复杂的开发者。

使用时需要注意

代码少并不代表代码一定更好。

涉及以下内容时，不能为了减少代码而省略必要设计：

安全验证；
错误处理；
日志记录；
数据校验；
权限控制；
自动化测试；
长期维护需要的模块拆分。

Ponytail 的重点不是“强行减少代码行数”，而是减少没有实际价值的复杂度。

4. Graphify：让 Codex 快速理解大型项目

当项目只有十几个文件时，Codex 通常可以快速理解代码结构。

但如果项目包含几百个甚至几千个文件，AI 就需要不断执行：

搜索文件；
查找函数；
阅读调用关系；
打开配置文件；
查找数据库结构；
分析模块依赖；
重复读取相同代码。

这个过程不仅慢，还会消耗大量上下文和 Token。

Graphify 可以提前分析整个项目，并将项目内容转换为本地知识图谱。

它可以处理的内容包括：

源代码；
项目文档；
配置文件；
数据库 Schema；
Markdown；
PDF；
图片；
视频；
其他项目资料。

对于代码内容，Graphify 可以使用 Tree-sitter 进行结构化解析，从而识别：

文件之间的关系；
函数调用关系；
类和模块依赖；
代码入口；
数据流；
配置关联；
项目目录结构。

Graphify 能帮助 Codex 回答什么问题？

建立知识图谱后，可以让 AI 更快回答：

用户登录功能涉及哪些文件？
这个函数被哪些模块调用？
修改数据库字段会影响哪些页面？
项目入口文件在哪里？
支付流程经过哪些服务？
某个配置项会影响哪些组件？
这段代码是否存在循环依赖？
一个 Bug 可能来自哪些模块？

相比让 Codex 每次从头搜索整个项目，知识图谱能够提供更完整的项目上下文。

Graphify 适合哪些场景？

接手陌生项目；
分析大型代码仓库；
维护遗留系统；
阅读缺少文档的项目；
多个 AI Agent 协作开发；
进行代码影响范围分析；
降低重复读取项目文件的次数。

使用时需要注意

知识图谱只能帮助 AI 理解代码关系，不能替代真实测试。

即使 Graphify 判断某个函数只被三个模块调用，也仍然需要通过运行测试和实际环境验证修改结果。

另外，项目代码发生较大变化后，需要重新更新或增量更新知识图谱。

5. Agent TARS：让 AI 从思考走向操作

Codex 更擅长处理代码、命令行和文件。

但很多实际工作并不完全发生在终端中，例如：

打开网页后台；
点击菜单；
填写表单；
上传文件；
操作设计软件；
整理网页内容；
使用桌面应用；
在浏览器中完成多步骤任务。

Agent TARS 是字节跳动开源的多模态 AI Agent 项目。

它可以结合视觉模型、GUI Agent 和 MCP 工具，让 AI 尝试理解屏幕内容，并进行鼠标、键盘和浏览器操作。

它的能力方向包括：

识别页面按钮；
理解输入框和菜单；
点击网页元素；
输入文字；
操作浏览器；
调用 MCP 工具；
完成多步骤界面任务；
结合搜索、文件和网页工具工作。

Agent TARS 能做什么？

理论上，你可以给它一个任务，例如：

打开网站后台，找到最近发布的文章，并检查标题是否存在错别字。

AI 会尝试：

打开浏览器；
进入对应页面；
识别后台菜单；
找到文章列表；
打开文章；
分析页面内容；
返回检查结果。

这类工具让 AI 不再只是告诉你“应该点击哪里”，而是尝试直接执行界面操作。

Agent TARS 适合哪些场景？

浏览器自动化；
GUI Agent 研究；
网页后台操作；
重复性桌面任务；
多步骤资料整理；
Computer Use 测试；
MCP 工具调用。

使用时需要注意

不要把 Agent TARS 理解成可以完全放心接管电脑的工具。

GUI Agent 仍然可能出现：

点击错误位置；
误解页面内容；
输入错误信息；
删除不该删除的文件；
在错误账号中执行操作；
页面加载后判断失败；
执行高风险操作。

建议优先在以下环境中测试：

虚拟机；
测试账号；
低权限用户；
不包含重要文件的电脑；
隔离的浏览器环境。

涉及以下操作时，应保留人工确认：

发布内容；
删除文件；
修改账号；
发送邮件；
提交订单；
付款；
上传隐私文件；
修改服务器配置。

这 5 个工具应该怎么选择？

不需要一次性把所有工具全部安装。

更合理的方式是先找到自己当前最明显的问题，再选择对应工具。

AI 写代码经常跑偏

选择：

`1`	`Superpowers`

它适合帮助 Codex 先明确需求，再按照计划、测试和代码审查流程执行。

经常遇到过时 API 和技术文档

选择：

`1`	`Firecrawl`

它可以抓取最新官方文档，并转换成适合 AI 阅读的 Markdown。

AI 生成的代码越来越复杂

选择：

`1`	`Ponytail`

它会提醒 AI 优先使用现有代码、标准库和原生能力，减少不必要的依赖。

项目太大，Codex 总是找不到代码关系

选择：

`1`	`Graphify`

它可以将项目转换为知识图谱，让 AI 更快理解项目结构和调用关系。

希望 AI 操作浏览器和桌面软件

选择：

`1`	`Agent TARS`

它适合研究 GUI Agent、浏览器自动化和 Computer Use。

是否都支持 Codex、Cursor 和 Claude Code？

不能简单地理解成“安装一次，所有 AI 编程工具全部通用”。

不同项目的接入方式可能包括：

Agent Skills；
MCP Server；
CLI 命令；
API；
本地服务；
Docker；
插件配置；
自定义提示词；
项目规则文件。

例如，某个项目可能更适合 Claude Code，另一个项目可能主要通过 MCP 接入 Cursor，也可能需要手动配置 Codex。

因此，具体安装和兼容方式应以项目最新 README 为准。

使用开源 AI 工具前，建议检查这些内容

不要只看 GitHub Star 数量。

安装前建议重点检查：

1. 最近是否仍在更新

查看最近一次提交时间和版本发布时间。

如果项目长期没有维护，可能无法兼容最新 Codex、Cursor 或 MCP 协议。

2. Issue 中是否存在严重问题

重点关注：

安装失败；
数据泄露；
高 CPU 占用；
无法卸载；
Windows 兼容问题；
macOS 权限问题；
API Key 泄露；
项目无法启动。

3. 是否需要额外付费服务

有些项目本身开源，但可能依赖：

OpenAI API；
Claude API；
Gemini API；
Firecrawl 云服务；
向量数据库；
云服务器；
搜索 API。

因此，开源不一定等于零成本。

4. 是否会读取敏感代码

如果项目需要扫描整个代码仓库，要先确认数据是否只在本地处理。

涉及公司代码、客户项目或商业机密时，不要直接上传到不确定的第三方服务。

5. 是否拥有高权限

GUI Agent 和电脑自动化工具可能需要：

屏幕录制权限；
鼠标控制权限；
键盘控制权限；
浏览器访问权限；
文件系统权限。

安装前应明确它可以访问哪些数据。

总结

提升 Codex 的效率，并不只是更换一个更强的模型。

真正影响 AI 编程体验的，通常还有三件事：

是否有明确的开发流程；
是否能获得最新、准确的资料；
是否能快速理解当前项目。

Superpowers 负责规范开发流程，Firecrawl 负责获取实时网页和技术文档，Ponytail 负责控制代码复杂度，Graphify 负责理解大型项目，Agent TARS 则将 AI 能力扩展到浏览器和桌面操作。

但工具并不是越多越好。

更实际的做法是：

找到工作流中最浪费时间、最容易出错的一步，再安装对应工具。

如果 Codex 经常写错方向，就先解决需求分析问题。

如果 AI 经常引用过时 API，就先解决实时文档问题。

如果项目越来越复杂，就先限制过度设计。

如果大型项目理解困难，就建立本地知识图谱。

只有真正需要操作网页和电脑时，再考虑 GUI Agent。

GitHub 项目地址

Superpowers https://github.com/obra/superpowers
Firecrawl https://github.com/firecrawl/firecrawl
Firecrawl MCP Server https://github.com/firecrawl/firecrawl-mcp-server
Ponytail https://github.com/DietrichGebert/ponytail
Graphify https://github.com/Graphify-Labs/graphify
Agent TARS / UI-TARS Desktop https://github.com/bytedance/UI-TARS-desktop

Find Skills 使用教程：帮你搜索、筛选和安装合适的 AI Agent Skills

Mon, 27 Jul 2026 19:10:00 +0800

Skills 太多不知道装哪个？先用 Find Skills 帮你筛选

接触 Claude Code、Codex、Cursor 或其他 AI Agent 一段时间后，很多人都会遇到同一个问题：

可安装的 Skills 越来越多，但真正适合自己的却很难找。

看到别人推荐测试 Skills、SEO Skills、前端设计 Skills、亚马逊选品 Skills，很多新手的第一反应是全部收藏，或者看到一个就安装一个。

最后工具箱越来越大，真正使用的可能只有两三个。

与其花时间在 GitHub 和 Skills.sh 里逐个翻找，不如先安装一个专门帮助你寻找 Skills 的 Skills：Find Skills。

Find Skills 是什么？

Find Skills 的代码名称是 find-Skills，由 Vercel Labs 的 Skills 项目提供。

它不是用来替你写代码、做选品或制作视频的业务型 Skills，而更像一个 AI Skills 导航员。

它主要做三件事：

根据你的实际任务寻找相关 Skills；
对搜索结果进行初步筛选；
提供 Skills 的用途、来源和安装命令。

你只需要把需求说清楚，它就会帮助你缩小范围，而不是让你面对一长串不知道该怎么选择的 Skills。

为什么建议先安装 Find Skills？

真正的问题通常不是没有 Skills，而是 Skills 太多。

Skills.sh 是一个开放的 Agent Skills 目录，里面收录了大量可复用能力。Skills 可以理解为一组面向特定任务的操作说明、脚本和相关资源，用来教 AI Agent 按照相对固定的流程完成工作。

但 Skills 数量增加后，也会带来三个问题：

名称相似，不知道哪个更适合；
来源不同，质量差距较大；
安装太多后，管理和维护成本上升。

因此，Find Skills 的价值不只是“帮你搜索”，而是先理解任务，再帮助你判断哪些结果更值得进一步查看。

Find Skills 是怎么寻找 Skills 的？

根据其官方说明，Find Skills 通常会按照以下流程工作。

第一步：拆解你的真实需求

它会先判断：

你属于哪个领域；
你具体想完成什么任务；
这个任务是否可能已经有成熟的 Skills。

例如，“我想做亚马逊”范围太大。

更有效的表达是：

帮我寻找一个适合亚马逊产品研究的 Skills，重点关注关键词、竞品分析、市场需求和广告数据。

需求越具体，搜索结果通常越准确。

第二步：先查看热门 Skills

Find Skills 会先检查 Skills.sh 排行榜，看看相关领域是否已经存在安装量较高、使用较广的 Skills。

热门不代表一定适合你，但通常意味着有更多用户使用和验证，可以作为第一轮筛选依据。

第三步：使用关键词继续搜索

如果排行榜中没有合适的结果，它会使用 Skills CLI 继续搜索，例如：

`1`	`npx Skills find amazon product research`

Skills CLI 也支持直接按关键词搜索：

`1`	`npx Skills find typescript`

还可以限定 GitHub 用户或组织：

`1`	`npx Skills find react --owner vercel`

第四步：核对 Skills 的质量

Find Skills 不应该只根据搜索结果名称进行推荐，还会重点查看：

安装量；
作者或组织来源；
GitHub 仓库星标；
项目是否持续维护；
Skills 的实际用途；
是否与当前任务匹配。

官方指南建议优先考虑安装量较高、来源可信的 Skills；安装量很少、来源陌生或仓库维护不足的项目，则需要更加谨慎。

Find Skills 安装命令

可以使用下面的命令安装 Vercel Labs 提供的 find-Skills：

`1`	`npx Skills add vercel-labs/Skills --Skills find-Skills`

在支持指定 Agent 的环境中，也可以明确选择安装目标。例如安装到 Claude Code：

`1`	`npx -y Skills add vercel-labs/Skills --Skills find-Skills --agent claude-code`

执行方法很简单：

打开终端；
粘贴安装命令；
按下回车；
根据终端提示完成安装。

需要注意的是，不同 Agent 和 Skills CLI 版本的安装路径或参数可能有所区别。安装前可以先查看项目最新说明。

安装后怎么使用？

安装完成后，不需要记住复杂命令，可以直接使用自然语言描述需求。

例如：

帮我寻找一个用于前端自动化测试的 Skills，优先推荐来源可信、安装量较高并且仍在维护的项目。

或者：

帮我找一个适合独立站 SEO 内容分析的 Skills，需要支持关键词研究、竞品分析和内容缺口检查。

还可以进一步增加筛选条件：

请先说明每个 Skills 的用途、作者来源、安装量、GitHub 仓库情况和安装命令，不要直接安装，等我确认后再操作。

这样做可以避免 AI 搜到结果后立即安装，也方便你先比较不同选项。

哪些人适合使用 Find Skills？

Find Skills 并不只适合程序员。

程序员

可以寻找：

自动化测试 Skills
代码审查 Skills
Git 提交规范 Skills
React 或 Next.js 优化 Skills
部署和排错 Skills

跨境电商卖家

可以寻找：

亚马逊选品 Skills
关键词研究 Skills
竞品分析 Skills
Listing 优化 Skills
广告数据分析 Skills

内容创作者

可以寻找：

视频脚本 Skills
标题生成 Skills
SEO 内容优化 Skills
社交媒体分发 Skills
字幕和内容整理 Skills

个人网站站长

可以寻找：

技术 SEO 检查 Skills
网站性能优化 Skills
结构化数据 Skills
内容审查 Skills
Google Search Console 分析 Skills

核心原则只有一个：

不要按照 Skills 的名字搜索，而要按照自己准备完成的任务搜索。

安装第三方 Skills 前要注意什么？

Find Skills 可以帮你缩小范围，但不能代替最终的安全判断。

安装之前，建议至少检查以下内容：

查看作者来源

优先考虑官方组织、知名开发者或长期维护的开源仓库。

阅读 Skills.md

确认它会执行哪些步骤、调用哪些命令，以及是否会修改本地文件。

检查脚本和依赖

如果 Skills 带有 Shell、Python、JavaScript 脚本，应先查看脚本内容，不要直接运行来源不明的代码。

检查更新时间和 Issue

长时间没有更新、存在大量未处理问题的项目，需要谨慎安装。

不要一次安装几十个

先根据当前任务安装两三个真正需要的 Skills，使用一段时间后再决定是否保留。

Find Skills 和 `npx Skills find` 有什么区别？

两者都可以帮助你搜索 Skills，但使用方式不同。

npx Skills find 是直接在终端中搜索：

`1`	`npx Skills find seo`

Find Skills 则会先理解你的自然语言需求，再决定搜索哪些关键词，并帮助你整理和比较结果。

简单理解：

npx Skills find 是搜索工具；
Find Skills 是帮助你使用搜索工具的导航规则。

对于已经知道准确关键词的人，直接使用命令会更快。

对于不知道该搜什么、也不知道如何判断质量的新手，Find Skills 更容易上手。

我的使用建议

不要一开始就安装几十个 Skills。

更合理的顺序是：

先安装 Find Skills；
明确当前准备完成的任务；
让它推荐两到三个候选 Skills；
检查来源、安装量、仓库和脚本；
只安装真正适合当前工作的项目；
定期删除长期不用的 Skills。

Find Skills 节省的不只是搜索时间。

更重要的是，它可以减少无效安装，让你的 AI Agent 工具箱保持轻量，并把注意力重新放回真正需要完成的任务上。

项目地址

Find Skills GitHub 项目：https://github.com/vercel-labs/Skills/tree/main/Skills/find-Skills
Skills.sh：https://Skills.sh
Skills CLI 项目：https://github.com/vercel-labs/Skills