妙才周刊 No.80

2026年08月01上次更新于大约 1 个月前

工具Weekly

各位读者，大家好。

开发过程中，及时看到状态、找到资料，再配上一点有趣的交互，往往能省掉不少重复操作。这期继续分享几个可以直接留在工作流里的项目。

本期主要内容：

CodexBar —— 在 macOS 菜单栏查看 AI 服务额度和重置时间
Pane —— 在 Windows 托盘查看多个 AI 订阅的使用情况
ai-agent-book —— 用开源书籍和配套代码学习 Agent
grok-build —— 从源码拆解终端 AI Coding Agent
TanStack Intent —— 让 Agent Skills 随 npm 包一起提供
cnfast —— 更快的 Tailwind class 合并工具
Sticker Forge —— 用 WebGL 制作可以撕开的互动贴纸
Canvas UI —— 可复制到项目里的 Canvas 和 WebGL 组件库
Takumi —— 将 JSX 和 HTML 渲染成图片、SVG 与动画
Kinetics —— 基于弹簧物理的网页交互动效库
Cloudflare Skills —— 为 Agent 提供 Cloudflare 平台开发知识
Otty —— Typora 团队推出的原生终端应用

CodexBar

CodexBar 是一个 macOS 菜单栏应用，支持查看 Codex、OpenAI、Claude、Cursor 等服务的 session、weekly、monthly 窗口和 reset 倒计时。README 当前列出 63 个 provider，准备开始长任务前，可以先看一眼还有多少额度。

CodexBar 菜单栏预览

它还支持服务状态、credits 和部分花费统计。CodexBar 会复用已有的 OAuth、API key、browser cookie 或本地文件；启用浏览器 cookie 时，macOS 可能会询问 Keychain 或 Full Disk Access，使用前按需打开 provider 即可。

Pane

Pane 是一个 Windows 托盘应用，用来查看 Claude、Codex、Cursor、Copilot 等服务的额度、重置时间和本地花费。它会读取本机已有的 CLI 或编辑器登录状态，找到对应工具后再显示卡片。

Pane 托盘应用预览

Pane 还会根据消耗速度推算能否撑到下一次 reset，并在额度接近用完时发送 Windows 通知。它分析本地日志并结合模型价格估算花费，没有公开价格的模型只保留 token 数量，重要账单仍然以服务商后台为准。

ai-agent-book

《深入理解 AI Agent：设计原理与工程实践》是李博杰开源的 Agent 技术书，包含中文正文、编译好的 PDF 和按章节组织的配套代码。

全书共十章，从 Agent 基础、上下文工程、记忆、MCP 和工具设计，一直写到 Coding Agent、评估、多模态和多 Agent 协作。书中用“Agent = LLM + 上下文 + 工具”概括 Agent 的组成，也提供了 agent-skills-ppt 等可以继续动手的示例，适合边读边跑。

grok-build

grok-build 在线书以 xAI 开源的终端 AI Coding Agent Grok Build 为主线，从 Rust 源码拆解 agentic loop、上下文压缩、工具系统、沙箱隔离、终端增量渲染和扩展生态，并对照 Codex 与 OpenCode 的实现。

配套的 ZhangHanDong/grok-build 源码仓库包含 75 个 crate。书中架构结论都带有 file:line 引用，也提供按 Agent 内核、工具与安全、终端 UI、扩展平台划分的阅读路径，适合想理解 Coding Agent 内部结构的人。

TanStack Intent

TanStack Intent 是 TanStack 用来发布和消费 Agent Skills 的 CLI 与配套机制。

你在 React Query（现在的 @tanstack/react-query）node_modules 里看到的 Agent 文档，就属于这套机制：Skill 以 SKILL.md 的形式跟随 npm 包发布，Agent 可以从项目依赖中发现并加载与任务匹配的文档。这样，库的使用规范会跟着版本更新，不必一直依赖模型记忆或手工维护一份旧说明。

cnfast

cnfast 是一个兼容 tailwind-merge 的 cn 工具，可以合并和整理 Tailwind CSS class，并保持与原工具一致的输出结果。它支持从现有的 clsx、classnames 或 tailwind-merge 项目迁移。

项目基准测试显示，cnfast 在多种场景下平均比 tailwind-merge 快 3.8 倍，重复渲染时提升更明显。对于频繁重新渲染的组件、数据表格或实时界面，这类小工具可以减少 class 合并本身带来的开销。

Sticker Forge

Sticker Forge 是一个基于 WebGL 的互动贴纸生成器，可以输入文字或上传图片，再用鼠标把贴纸撕起来，看到卷曲、阴影和贴纸背面的立体效果。

项目同时提供可直接使用的 Web Component 和 JavaScript API，适合放进产品落地页、作品展示或需要一点互动感的网页里。它的重点不是生成一张静态贴纸，而是把“撕开”这个动作做成了可复用的交互组件。

Canvas UI

Canvas UI 是一个开源的 Canvas 和 WebGL 组件库，提供粒子、液态、玻璃、碎裂和 VHS 等视觉效果。组件通过 shadcn CLI 复制到项目中，代码留在自己的仓库里，不需要额外安装运行时包。

它支持 React、Solid、Preact、Vue、Svelte 和原生 TypeScript，适合给网页首屏、作品展示或交互页面增加动态效果。对希望直接拿源码调整，而不是引入一套黑盒动画库的人比较方便。

Takumi

Takumi 是一个用 Rust 编写的渲染引擎，可以把 JSX、HTML 或节点树转换成 PNG、JPEG、WebP、SVG、GIF、APNG 和视频帧，不需要启动 headless browser。

它兼容 next/og 的 ImageResponse API，支持 Node.js、Cloudflare Workers、浏览器和 Rust，也覆盖 CSS Grid、伪元素、渐变、Tailwind utilities 等常见能力。适合生成 OG 卡片、社交分享图、文档图片或动画素材。

Kinetics

Kinetics 是一个基于 spring physics 的网页交互动效库，收集了按钮、卡片、Tab、拖拽、提示框、光标轨迹等 117 个可直接参考的效果。

每个效果都提供 CSS、React 和可复制的 AI prompt，并显示 stiffness、damping 等参数。想给页面加一点有重量感的反馈，可以先从这里挑一个效果，再把代码和参数复制到自己的项目里。

Cloudflare Skills

Cloudflare Skills 是 Cloudflare 提供的一组 Agent Skills，覆盖 Workers、Agents SDK、Durable Objects、Sandbox SDK、Wrangler、Web Performance 和 MCP Server 等开发场景。

如果经常让 Agent 编写 Cloudflare 项目，可以把它当成一套现成的上下文资料，让 Agent 更准确地处理平台 API、部署方式和常见架构。项目兼容支持 Agent Skills 标准的工具，包括 Claude Code、OpenCode、Codex 和 Pi。

Otty

Otty 是 Typora 背后的 appmakes 团队推出的原生终端应用，目前提供 macOS Apple Silicon 和 Intel 版本，Windows、Linux、iOS 版本可以加入等候名单。

它支持 tabs、splits、session recovery、命令面板、inline autocomplete 和长任务通知，也为并行运行多个 Claude Code、Codex 等 Agent 提供任务监控、会话历史、Prompt Queue 和输出回传。适合想保留终端的键盘操作，又需要管理多个 Agent 会话的人。