WTFM

WTFM

写好那该死的手册。
为你的编码 Agent 提供的插件，可编写用户文档，并附带截图。

安装 · 快速开始 · 示例 · CLI · 发布 · 常见问题 · 文档 · 网站

_{来自 plausible/analytics 的真实输出，已加速回放。实际运行需要几分钟。}

**WTFM 是一款为你的编码 Agent 编写用户文档的插件。**向 Claude Code 或 Codex 请求一份指南，它便会阅读你的源代码，用通俗易懂的语言写出操作步骤，并根据真实模板和 CSS 渲染截图，展示每个界面。无需运行应用，无需手动截屏，也无需账号。

它不是 API 参考，也不是 README，而是写给那些永远不会读你代码的人的文档， 例如找不到导出按钮的客户，或想邀请团队成员的管理员。

WTFM 以前叫 SupportPages Writer。supportpages 命令仍可作为 wtfm 的别名使用，现有安装、设置和 SUPPORTPAGES_* 环境变量均保持不变。

在终端中设置一次，之后只需向 Agent 提出请求：

curl -fsSL https://wtfm.sh/install | bash

wtfm setup          # once per computer

wtfm init           # once per project

**你 → Claude Code：**编写一篇带插图的指南，介绍如何邀请团队成员。

功能

• **根据你的源代码编写。**路由、按钮标签和操作流程均来自代码， 而非你输入的描述，因此操作步骤与用户实际看到的内容相符。
• **无需运行应用即可生成截图。**根据你自己的标记、样式和品牌重建 模拟界面，然后在本地无头 Chromium 中渲染为 PNG。
• **输出纯 Markdown。**每篇文章都是一个 index.md，图片与其放在同一目录， 可直接提交到代码库旁，或放入任意文档站点。
• **保存前进行检查。**每篇文章都会先通过结构、文案和截图检查。
• **使用你已有的 Agent。**可搭配 Claude Code 或 Codex，并使用你自己的订阅 和模型设置。
• **本地优先。**除非你选择发布，否则不会向 SupportPages.io 发送任何内容。

示例

在其他开源代码库中，同样的工作流。每张图片都是 WTFM 根据该代码库的源代码编写的指南中的一张截图；应用从未运行过。

immich-app/immich · SvelteKit	paperless-ngx/paperless-ngx · Angular	maybe-finance/maybe · Rails
如何创建新专辑	如何创建标签并将其应用于文档	如何添加新账户

如需查看完整的帮助中心，请参阅 WTFM 自己的文档：其中的每篇文章和截图均由 WTFM 根据此代码库编写。

安装

curl -fsSL https://wtfm.sh/install | bash

安装程序会下载经过校验和验证、内含独立 Node.js 的版本，将 wtfm 命令安装到 ~/.local/bin（无需 sudo），并提供将其添加到 PATH 的选项。它还会将 supportpages 安装为 wtfm 的别名。

你需要：

• macOS 或 Linux，ARM64 或 x64 架构（Windows 用户请使用 WSL）
• 已安装并登录的 Claude Code 或 Codex
• Git

首次运行 wtfm setup 时会下载用于截图的 Chromium。

**更新：**版本每天检查一次更新，并在后台安装。运行 wtfm update 可立即更新，或将 SUPPORTPAGES_AUTO_UPDATE=0 设为关闭自动更新。

在 Codex 中安装

WTFM 也可作为 Codex 插件使用。你需要在 PATH 中配置 Node.js 22.12 或更高版本以及 npm。

codex plugin marketplace add SupportPages-io/wtfm
codex plugin add wtfm@supportpages

然后启动新的 Codex 会话。插件首次启动时，会安装其 npm 包（不会运行这些包的安装脚本），并在后台下载用于截图的 Chromium。Codex 会要求你先审查 /hooks 中的两个插件钩子，再运行它们；不使用这些钩子，WTFM 也能正常工作。要更新，请再次运行 codex plugin add wtfm@supportpages。

从源代码构建

你需要 Node.js 22.12 或更高版本、npm 和 Git。

git clone https://github.com/SupportPages-io/wtfm.git
cd wtfm
./install-cli.sh

这会构建你的代码检出版本，并将其安装为 wtfm（同时创建 supportpages 别名）。拉取更改后，请再次运行 ./install-cli.sh。

快速开始

在终端中进行一次配置，然后在编码 Agent 中完成其他所有操作。

1. 设置你的计算机

wtfm setup

这会连接 Claude Code 和/或 Codex，向它们添加 SupportPages.io 撰写工具，并下载截图渲染器。当系统询问你希望如何使用时，请选择在我的项目中保存文章，无需账户。

2. 设置你的项目

cd path/to/your-product
wtfm init

选择文章的保存位置以及要使用的模型。随后，WTFM 会分析一次项目的结构、样式和品牌形象，让每篇文章都以这份分析为基础开始撰写。

3. 向编码 Agent 提出请求

在项目中打开 Claude Code 或 Codex（重启已经打开的会话），然后用日常语言请求撰写一篇文章：

编写一篇带插图的指南，介绍如何邀请团队成员。

几分钟后，文章就会出现在你的项目中：

output/articles/how-to-invite-a-teammate/
├── index.md
├── block_open-settings.png
├── block_invite-form.png
└── block_send-invite.png

整个工作流就是这样。还可以尝试提出以下请求：

我们有哪些帮助文章？

编写一篇故障排除文章，说明登录链接过期时该怎么办。

CLI 命令

你只需使用终端进行设置并保持服务运行。文章由编码 Agent 撰写。

命令	功能
wtfm setup	设置这台计算机：连接编码 Agent 并安装渲染器
wtfm init	设置此项目：指定文章存放位置、模型和项目分析
wtfm configure	更改此项目的 Agent、模型、写作风格或文章文件夹
wtfm analyse	重大变更后重新运行项目分析（--refresh）
wtfm status	显示此项目的设置和文章进度
wtfm doctor	检查所有内容是否已安装并连接
wtfm telemetry off	停止收集匿名使用次数和崩溃报告（on、status）
wtfm update	安装最新版本
wtfm uninit	忘记此项目的设置（保留恢复存档）
wtfm remove	断开与编码 Agent 的连接（保留项目和文章）
wtfm uninstall	从这台计算机上移除 WTFM；--purge-config 还会退出登录并忘记项目绑定

运行 wtfm --help 查看所有选项。status 和 doctor 支持 --json。

你的文章

• 存放位置。 默认存放在 output/articles/<slug>/。如要将文章保存在代码库中，请在 init 期间或使用 wtfm configure 选择类似 docs/help 的文件夹。
• 写作风格。 使用 wtfm configure 从友好、简洁、技术性或正式风格中选择。
• 屏幕截图。 每篇文章最多包含三张截图。优先为主要路径配图；可选分支则通过文字说明。每张截图底部都有一条小字，注明“created automatically by supportpages.io”。

工作原理

1. setup 会连接本地 MCP 服务和写作 Agent，并将其连接到 Claude Code 或 Codex。
2. init 会让你的 Agent 对项目进行一次映射：包括框架、路由、布局、CSS 和品牌信息。
3. 你请求撰写文章时，写作 Agent 会读取相关源代码、撰写步骤，并为每张截图制作真实 UI 的 HTML 模拟图。
4. 这些模拟图会通过本地 Chromium 渲染为 PNG，与源代码进行核对，然后与文章一同保存。

发布

为用户提供阅读内容的地方。 仓库中的 Markdown 文件夹，对找不到它的人毫无帮助。SupportPages.io 由同一团队打造，可将 WTFM 编写的指南变成用户可以搜索和提问的帮助中心：使用你自己的域名和品牌，并随着产品变化保持内容更新。

• 每次合并后保持更新。 拉取请求合并后，SupportPages.io 会读取差异并起草文章更新，供你审核。
• 视频讲解。 每篇指南都可以附带配有旁白的视频，按相同步骤逐步演示，并提供字幕。
• 提供答案，而不只是搜索。 读者可以用自己的话提问，并获得基于文章整理的答案及来源链接。
• 在你自己的域名上使用自己的品牌，配备可在任何人看到草稿前进行审核的编辑器，还能直接通过编码 Agent 发布。

以上功能都可以在不使用它的情况下正常运行，免费账户最多可托管 10 篇文章。

同样的模式也适用：在终端中连接一次，然后在 Agent 中继续操作。

连接项目：

wtfm publish

你需要在浏览器中登录或创建账户，并选择一个帮助中心。你之前保存的任何文章都会以草稿形式上传。（正在设置新项目？请在 wtfm init 期间选择 将它们发布到 SupportPages.io 帮助中心。）

然后继续向 Agent 提问：

编写一篇关于导出报告的指南。

新文章会以草稿形式出现在帮助中心，并附有可在编辑器中审核的链接。发布始终是一个单独的步骤：在编辑器中点击 发布，或提出请求：

发布导出报告的指南。

命令	功能
wtfm publish	登录、选择帮助中心，并上传此项目保存的文章
wtfm yolo	在 SupportPages.io 上编写完整手册（需要账户；仅创建草稿）
wtfm login / logout	在此计算机上登录或退出
wtfm sync	刷新帮助中心设置和文章历史记录

帮助中心不需要访问你的 GitHub 或 Bitbucket。只有 wtfm yolo 需要。

wtfm yolo：编写完整手册

从零开始？wtfm yolo 会规划产品所需的每篇指南，并一次性全部编写，使用 SupportPages.io 的服务器，而不是你的计算机，也不会消耗编码 Agent 的用量。

wtfm yolo

它会引导你完成所有缺少的步骤：在浏览器中登录、选择或创建帮助中心，以及连接你的代码仓库（SupportPages.io 需要读取权限，才能根据你的代码编写内容）。然后，它会显示你所选方案的文章额度，并在开始前征求确认（--yes 可跳过此询问）。免费方案涵盖前 10 篇指南。

进度会实时显示：章节、推荐文章，然后是正在编写的草稿。所有内容都会以草稿形式保存；只有在编辑器中发布后才会正式上线，编辑器链接会在最后显示。按 Ctrl+C 只会停止查看进度：运行仍会继续，wtfm status 可以再次查看进度。如果运行失败，再次运行 wtfm yolo 即可继续，不会丢失已写好的草稿。

隐私

• 本地项目只会向 SupportPages.io 发送匿名使用次数和崩溃报告（见下文）。你的编码 Agent 及其模型提供商会读取你的源代码，就像处理任何其他任务一样。
• 发布时会上传文章、文章图片和一份简短的来源记录。你的源代码绝不会被上传。
• wtfm yolo 会通过你在 SupportPages.io 上连接的仓库进行写入；这是唯一会让 SupportPages.io 访问你的代码的命令。
• 凭据存储在 ~/.config/supportpages 下的私有文件中，绝不会存储在你的仓库中。登录还会将你的账户邮箱保存在那里，以显示当前连接的是哪个账户。
• 其他网络请求不会携带你的代码或文章。 用于截图的 Chromium 会从 Google 的 Chrome for Testing 存储下载，插件的软件包则从 npm 注册表安装。如果无法编译项目自身的样式，分析时会从 jsDelivr CDN 获取项目的 CSS 框架（Bootstrap、Bulma 或 Foundation）；没有项目样式的模型图在渲染时会从 CDN 加载 Tailwind。只有在你设置了自己的 OPENAI_API_KEY 时，文章可选的生成图片才会使用 OpenAI；WTFM 绝不会设置该变量。
• 项目分析会在无人值守的情况下运行。 init 和 analyse 会在关闭权限提示的情况下启动你的 Agent（Claude Code 使用 --dangerously-skip-permissions，Codex 使用 --dangerously-bypass-approvals-and-sandbox）。撰写文章时会使用 Agent 的常规审批提示。

插件钩子

作为 Claude Code 插件安装后，WTFM 会注册两个钩子。除 Chromium 下载外，二者都不会通过网络发送任何内容，也都无法阻止或更改工具调用。

• SessionStart 会检查是否已安装用于截图的 Chromium。如果尚未安装，它会在后台启动 puppeteer 的 Chromium 下载；只会启动一次，并会立即返回，不会在会话中打印任何内容。
• PostToolUse 会在每次工具调用后运行，但只有在正在撰写文章时才会执行操作（项目中存在 .rtfm-trace/CURRENT 标记）。运行期间，它会将每次工具调用的以下内容各追加为一行，写入项目中的 .rtfm-trace/<article>.ndjson：时间、工具名称、文件路径、搜索模式，以及 shell 命令的前 500 个字符。该跟踪记录会保留在你的计算机上，用于发现一次运行中的重复工作。它不会打印任何内容，并且始终会成功退出。

匿名使用次数统计和崩溃报告

WTFM 会统计有多少安装正在使用，以及何时发生故障，以便我们进行修复。首次设置项目时，WTFM 会说明这一点，而且你可以轻松关闭此功能。数据会在你未登录的情况下发送给 SupportPages.io，并保持匿名，直到你在这台计算机上登录；此后，这台计算机上的使用数据会关联到你的账户。关闭此功能会停止发送这两类数据。

发送的内容

• 在这台计算机上创建的随机安装 ID（并非根据这台计算机生成）、WTFM 版本、编码客户端名称（例如 claude-code）、你的操作系统、CPU 架构和 Node.js 主版本。
• 以下事件发生时的统计数据：首次使用 WTFM、卸载 WTFM（以及是否保留设置）、设置项目（本地或托管），以及完成文章或视频教程时。数据包括结果、保存位置（本地、已上传或在 SupportPages.io 上生成）、失败时的错误代码，以及耗时秒数；wtfm yolo 运行开始和结束时也会发送同类数据。
• 仅针对意外错误：错误类型和代码，以及堆栈帧；其中 WTFM 之外的所有路径都会替换为 <external>。绝不会发送其他代码中的消息。

**绝不发送的内容：**你的代码、文件名或路径、文章标题或内容、仓库或项目名称，或凭据。不会存储你的 IP 地址。在这台计算机上登录时也会发送安装 ID，以便将此后来自这台计算机的使用数据关联到你的账户。

使用以下任一方式关闭此功能：

• 让你的编码 Agent 关闭 SupportPages 遥测；
• 运行 wtfm telemetry off；
• 设置 SUPPORTPAGES_TELEMETRY=0 或 DO_NOT_TRACK=1。

在 CI 中始终处于关闭状态。wtfm doctor 会显示此功能是否开启及其原因；设置 SUPPORTPAGES_TELEMETRY_DEBUG=1，即可在发送每条报告时将其打印到 stderr。

常见问题

这适用于 API 文档或 README 吗？ 不适用。WTFM 编写面向最终用户的文档，包括面向产品使用者的操作指南和故障排查指南，并配有截图。你的 Agent 已经能很好地处理开发者文档。

为什么不直接让 Claude Code 编写文档？ 它能写出不错的操作步骤，但无法展示界面，而且会猜测自己没有查过的标签。WTFM 还会分析项目，使用你自己的 UI 代码生成截图，并在保存任何内容之前运行检查。

费用是多少？ WTFM 免费，采用 Apache 2.0 许可证。文章使用你自己的 Claude Code 或 Codex 订阅运行。例外是 wtfm yolo：它在 SupportPages.io 上运行，需要账户；免费方案包含 10 份指南。

wtfm: command not found 打开新的终端，或运行安装程序打印的 PATH 命令。

我的 Agent 看不到 SupportPages 工具。 重启在运行 wtfm setup 时已打开的所有 Claude Code 或 Codex 会话。

设置无法完成。 运行 wtfm doctor，修复它报告的问题，然后再次运行 wtfm init。

文章写到一半被中断了。 让你的 Agent 继续编写，或运行 wtfm status 查看中断位置。

它会收集使用数据吗？ 只收集匿名使用次数统计和崩溃报告，绝不收集你的代码或文章。请参阅 匿名使用次数统计和崩溃报告， 了解具体发送的内容或关闭此功能。

我可以在 Windows 上使用吗？ 可以，在 WSL 中使用。

了解更多信息，请访问 supportpages.io/wtfm。

参与贡献

欢迎提交错误报告和拉取请求。报告错误时，请附上你的操作系统、 wtfm --version、运行的命令及其输出，并移除凭据和私有代码。对于较大的改动，请先创建议题，以便我们就方案达成一致。

参与代码开发：

npm ci
npm test
node scripts/cli.mjs --help

engine/ 中的文章引擎会在每次引擎发布时与上游同步，因此其中的改动会在此处审核，并由维护者移植回上游。

许可证

Apache 2.0。engine/ 中附带的 UI 样式表各自保留其许可证；请参阅 NOTICE。此许可证不涵盖 SupportPages 名称或徽标。