PROOF

你已经打印了。那时你才会发现。

PROOF 是重新发明的打印对话框。 它不再是一个邮票大小的缩略图和一次信仰之跃，而是以可读的尺寸显示作业的每一页，根据文档真实渲染的布局测量每页实际消耗的墨水，并在你浪费纸张之前标记出哪些页面是废页——然后打印你真正想要的，而不是你上次编辑留下的东西。

为 Cursor Calgary 黑客松（2026年8月）而构建，其主题是选取一种无聊的日常应用格式，并使其在视觉上、功能上或两者兼而有之地大幅改进。打印对话框自1995年以来就没有实质性的变化。如果有人终于碰了它，这就是它该有的样子。

具体问题

如今大多数操作系统自带的打印对话框给你的预览窗格大约只有一张邮票那么大。这就是你在一份可能长达十几页的文档上获得的全部可见性。在这个尺寸下，你无法分辨某一页是分页符留下的一行孤零零的"适用条款和条件。"，另一页只是一个溢出到单独一页的"——续——"标记，或者第三页用十一磅衬线字体写着"此页有意留空"。你点击打印。每一页都出来了。其中几页是装饰，不是内容——而在你看到这一切发生之前，你已经为所有这些页面付了纸和墨粉的钱。

这就是 PROOF 要弥合的失败模式：你已经信任的对话框没有向你展示足够的信息来做出它要求你做的决定。

PROOF 附带一个逼真的演示文档——一份20多段的季度业务报告"Q3_Operating_Review_FINAL_v4.docx"，包含目录、执行摘要、真实的财务表格、供应链部分、员工人数数据和展望部分，外加五页故意插入的垃圾页，正是真实文档会积累的那种：一个孤立的"条款和条件"页脚、一个"——续——"分页残留物、一行多余的版权声明、一个"有意留空"通知和一个孤立的页码。经过真实的加载和分页，这份文档共15页，而 PROOF 自己的实时测量——不是手打的数字——标记其中5页为废页，打印10页。你自己打开 proof/index.html，侧栏会显示完全相同的数字，因为它们是每次页面加载时实时计算的，而不是在这里记住的。

Related MCP server: MCP Mortgage Server

数字是如何实际产生的

这部分值得精确说明，因为它也是让整个想法成立的部分：PROOF 显示的每一个数字都是从加载的文档计算出来的，不是手打的，也不是为了看起来合理而修饰的——这对捆绑的演示文档和你拖入的任何文件都成立（见下文）。

1. 分页是测量的，不是假设的。 文档的 HTML 被布局在一个真实的、隐藏的 DOM 元素中，以真实的内容宽度布局，PROOF 遍历其块级子元素（标题、段落、表格、块引用），累加每个元素的实际渲染高度（getBoundingClientRect()），当下一个块会溢出 816×1056px 的页面框时——即96dpi下的8.5"×11"信纸，大约1英寸边距——就换到新页。源中的显式分页标记会强制提前换页。因此页数是布局的输出，而不是任何人选择的数字。

2. 墨水覆盖率是从真实文本几何形状测量的。 对于每个完成的页面，PROOF 遍历每个文本节点，并让浏览器自己的布局引擎返回其字形所占的确切矩形（Range.getClientRects()）——不是逐像素的 canvas 扫描，而是将同样的想法应用于浏览器已经计算出的真实几何形状。每个矩形的面积乘以一个声明的字形密度常数（GLYPH_DENSITY = 0.16，即正常文本大约16%的行框是实际墨水，随字体粗细增加），表格/块引用的边框描边也加在上面，因为它们也携带墨水。总和除以页面的内容区域，就是该页的墨水覆盖率百分比。

3. 也有一个 canvas 光栅化路径，但不是主要数字。 PROOF 还附带第二种独立方法（inkOf()）：将页面序列化为 SVG，光栅化到离屏 canvas 上，并统计按亮度-暗度加权的非白色像素。代码明确将其标记为"第二意见，不用于主要数字"——如果你阅读源码，这一点值得知道，因为它是两种方法中更直观的一种，但不是驱动屏幕上显示内容的那种。

4. 仅低墨水不算废页。 低于2.0%墨水覆盖率（WASTE_THRESHOLD）是必要条件但不是充分条件。只有当一页同时是公认的分页装饰（"有意留空"通知、"——续——"标记、版权行、孤立的页码）或者根本没有结构元素（h1,h2,h3,table,ul,ol,svg,img,blockquote）且文本少于120个字符时，才会被标记。这就是为什么标题页或目录不会仅仅因为内容稀疏而被错误标记——在捆绑的演示中，标题页测量为2.06%墨水，目录测量为1.0%，两者技术上都很薄，但都因为各自有标题而照常打印。

5. 原因，而不仅仅是标记。 被标记页面的实际文本会与真实文档积累的各种装饰进行模式匹配——"有意留空"通知、"——续——"标记、版权行、孤立的页码，或没有明确类别的短尾行——因此每个废页显示的原因是从该页实际内容推导出来的，而不是为特定演示编写的说明文字。

直说，因为这关系到信任： 如果基于布局的测量因某种原因无法运行，PROOF 不会默默地什么都不显示或悄悄编造——它会回退到公开的、确定性的估算（estimateInk()：一个基于字符数、标题数和表格单元格数的声明公式），并在代码中明确记录为估算，而非测量。UI 的状态行会告诉你屏幕上显示的数字是由哪种方式产生的——它要么显示 measured · N glyph runs across N pages，要么显示 estimated · layout measurement unavailable，所以你永远不会看到一个被伪装成测量的猜测。每张纸的详情面板自己的"方法"读数与之一致，对该特定纸张显示 measured · glyph-run geometry 或 estimated · block model。

下游的一切——哪些页面被标记、节省的纸张数、平均墨水百分比、打开纸张时显示的每页原因，以及成本数字——都来自这个针对当前加载文档运行的流水线。屏幕上没有任何东西是伪装成计算的硬编码结果。

你实际看到的内容

• 首先是结论。 进页数、出页数，节省的纸张数和平均墨水百分比作为侧栏中的头条统计显示——而不是埋在设置面板里。

• 纸张墙。 作业的每一页都作为实时缩略图——实际渲染的页面，用 CSS transform: scale() 缩小，不是占位图形或从头重绘的微型图——废页上有可见的印章，每页有墨水仪表。

• 嵌套揭示。 点击任何一张纸，它就会展开成自己的解释：它是如何被分类的，其测量的墨水覆盖率与2.0%阈值的对比，以及——对于被标记的页面——它是哪种具体的装饰，以及为什么丢弃它不会改变你打算打印的任何内容。这是设计的脊梁：文档 → 页面 → 一张被标记的纸 → 原因，每一层揭示下一层。从同一个面板，你可以单独恢复或丢弃那一张纸。

• 真正验证另一个文件。 侧栏有一个真正的拖放区：拖入你自己的 .html、.txt 或 .md 文件（或点击选择），PROOF 会用上面描述的完全相同的流水线对那个文档进行分页和测量——这不是第二个演示模式，而是捆绑文档所经过的同一个 load() 函数。

• 真正的打印按钮。 "打印"调用浏览器真正的 window.print()，针对一个镜像屏幕上作业的隐藏打印根；被丢弃/废页在 @media print 下携带 display:none，所以你决定不打印的纸张真的不会打印。还有一个明确的"无论如何全部打印"逃生舱口，打印 CSS 隐藏应用界面，所以只有文档本身会送到打印机。

• 前后对比。 1995年的对话框在演示文稿（proof/deck.html）中被如实渲染，与 PROOF 展示的内容并排，因此对比是明确陈述的，而不仅仅是暗示。

平台

桌面端和移动端都被设计为一等布局，而不是一个从另一个缩小的——纸张墙、头条统计行和嵌套详情视图都有专门的断点，直到手机宽度。

MCP 服务器——在没有人工参与的情况下验证文档

网页是 PROOF 的一个表面。在底层，PROOF 旨在让 AI 代理直接使用：一个 MCP 服务器暴露了 Web UI 使用的相同文档模型，因此编码代理、文档流水线或 Claude 本身可以在一张纸移动之前验证作业——无需截图，无需人类阅读预览窗格。

服务器位于 proof/mcp/，镜像了 Web 应用测量的完全相同的15页文档——相同的文件名（Q3_Operating_Review_FINAL_v4.docx）、相同的5个废页（4、6、9、11、13）及相同的原因，以及 index.html 本身使用的相同成本常数（cost_per_sheet_usd: 0.012、cost_per_ink_point_usd: 0.0009），因此调用 ink_cost 会引用与 UI 屏幕上显示的相同金额（此处平均墨水2.97%，节省$0.0603，UI 中四舍五入为"2.9%"和"$0.06"）。有一件事是明确说明而不是隐藏的：服务器 document.js 中的墨水百分比是从真实浏览器测量镜像的捕获值，不是服务器自己重新计算的——因为 index.html 的 Range.getClientRects() 字形几何方法没有可移植的 Node 等价物，该 API 只存在于真实的布局引擎中，所以服务器将其数字公开为 "method": "measured_in_browser_layout"，而不是假装独立重新推导。将服务器接线以测量交给它的任意文档——就像 Web UI 的拖放区已经做的那样——是自然的下一步。

它暴露的四个工具，已通过实时冒烟测试运行验证（node proof/mcp/smoke_test.mjs）：

要连接它到 Claude Desktop、Claude Code 或任何兼容 MCP 的客户端，将客户端指向服务器目录：

cd proof/mcp
npm install

然后在客户端的配置中添加它为 MCP 服务器（stdio 传输），例如 Claude Desktop 的 claude_desktop_config.json：

{
  "mcpServers": {
    "proof": {
      "command": "node",
      "args": ["/absolute/path/to/proof/mcp/server.js"]
    }
  }
}

这里没有网络跳转，也无需部署任何东西：服务器是一个本地 stdio 进程，与你为本地工具运行的其他任何 MCP 服务器完全一样。这是整个项目的一个刻意约束——参见下文“无后端”——并延伸到了代理层：代理能力不依赖任何可能在演示期间出故障的托管服务。

要验证服务器确实能端到端工作而无需接好完整客户端，请运行附带的冒烟测试——它通过 stdio 将 server.js 作为真实子进程启动，执行 MCP 握手，列出全部四个工具，并逐一调用：

cd proof/mcp
node smoke_test.mjs

更完整的连接说明（包括 Cursor 专用配置）见 proof/mcp/README.md。

如何运行

产品是纯静态 HTML/CSS/JS。没有构建步骤，没有打包器，也没有服务器。

open proof/index.html

或者直接在 Finder/Explorer 中双击 proof/index.html。这就是全部安装流程——不需要 npm install，不需要开发服务器，完全不依赖本仓库的 node_modules，也没有外部字体、CDN 脚本或网络图片。

该页面与 proof/sample-document.js 配套使用，后者提供完整的 15 页演示报告（window.SAMPLE_DOC）——将两个文件放在 proof/ 目录下，页面就会通过普通的 <script src> 标签自动加载。如果该文件缺失，index.html 也不会崩溃：它会回退到页面内置的一个更小的自包含演示文档（FALLBACK），因此应用永远不会显示空白屏幕，只是文档更短而已。无论你是直接打开文件（file://）还是通过服务器提供，墨水测量都能以完全相同的方式工作，因为整个流程中没有任何环节依赖跨域网络访问。

如果你出于任何原因更愿意通过 HTTP 提供页面（某些浏览器扩展或更严格的本地安全策略可能会干扰 file:// 页面），任何静态文件服务器都可以，例如：

npx serve proof

截图与采集工具

_brainstorming/ 目录存放本项目的开发笔记，包括 capture.mjs，这是一个小型 Playwright 脚本，用于在特定滚动位置和视口尺寸（桌面和手机）下拍摄页面的逐帧精确截图，供黑客松提交使用。它需要本仓库根目录 package.json 中声明的 playwright devDependency：

npm install
node _brainstorming/capture.mjs proof/index.html --out shots

这是一个开发工具，不属于产品本身——PROOF 运行完全不需要它。

刻意无后端

PROOF 没有服务器、没有数据库，产品本身也没有部署步骤。其内置的演示“数据”是一份手工构建、贴近真实的季度报告，以静态内容形式提供（sample-document.js，若该文件缺失则使用较小的内置回退），因此从中计算出的每一个数字——页数、墨水覆盖率、浪费标记、成本——都是页面加载瞬间对真实内容进行的真实运算，而不是向后端发起的请求，那个后端可能在演示期间宕机、变慢或不存在。它同样能真正接受你拖放到其上的文件，并走完全相同的处理流程。MCP 服务器是唯一在浏览器之外运行的进程，而且它是本地 stdio 进程而非托管进程，因此不承担 Web 后端的任何部署风险。

为什么选择打印对话框

在设计过程中，大约有十几种其他“无聊格式”候选方案被考虑过并因若干各自独立、分别陈述的理由而被否决：订阅管理器、包裹追踪器和水电费账单被放弃，因为要诚实地重新发明它们就意味着要编造没有合法来源的数据（银行余额、承运商的真实追踪状态、电表读数）；取消流程和 CAPTCHA 因不增加任何真实信息而被放弃；浏览器标签页管理器和航空公司座位图因已有成熟产品（OneTab/Arc、SeatGuru）覆盖而被放弃；Cookie 横幅画布太小，无法承载预期的分层滚动揭示效果；而早先的处方剂量概念因未通过即时理解测试而被砍掉。打印对话框是唯一一个同时通过所有这些标准的候选方案：一眼就能认出，增加了当前对话框所隐藏的真实信息，而且屏幕上的每一个醒目数字——页数、空白页检测、墨水覆盖率——都是浏览器可以从真实文档中实时计算出来的，没有任何造假。完整的决策记录，包括被否决的候选方案和每一步的推理过程，见 _brainstorming/SPEC.md。

仓库结构

proof/
  index.html          the product — open this
  sample-document.js   the 15-page demo report loaded into the product
  deck.html            a short, seven-slide product presentation, same art direction
  docs.html             the full feature-by-feature reference, verified against live output
  mcp/
    server.js           the MCP server entrypoint (stdio transport)
    document.js          MCP server's document model — mirrors index.html's live document
    smoke_test.mjs        end-to-end check: spawns the server, calls all four tools
    package.json          MCP server package (@modelcontextprotocol/sdk, zod)
    README.md             MCP-specific install/connect instructions
_brainstorming/
  SPEC.md             the full design/decision record for this project
  capture.mjs          Playwright screenshot harness used for the submission
  ...                  earlier design drafts and research notes, kept for the record
shots/                desktop + mobile submission screenshots of proof/index.html
shots-deck/           submission screenshots of proof/deck.html

proof/deck.html 是一个简短的独立产品展示页——打开方式与 index.html 相同——用七张幻灯片、以与产品本身相同的视觉语言，讲解打印对话框为何有问题、PROOF 如何测量墨水覆盖率（实测 vs. 栅格化），以及分类器“低墨水仍保留”的逻辑。proof/docs.html 是更深入的、可滚动的参考文档：每个功能——包括 MCP 服务器——都对照当前代码进行说明，并附有真实、实时验证的数字。

为 Cursor Calgary 黑客松而构建，2026 年 8 月。