ProgramDistill：面向交互式Web应用的行为蒸馏与契约验证引擎

1. ProgramDistill 不是代码生成器而是一套“行为翻译引擎”ProgramDistill 这个名字里藏着一个容易被误解的陷阱——它不生成代码也不写函数更不替代程序员。我第一次看到论文标题时也下意识点开想抄几行 prompt 拿去跑 demo结果发现整个 pipeline 根本没碰过 LLM 的 token 输出。它干的事本质上和老式机械钟表匠拆解发条、测绘齿轮咬合角度一样把用户在网页上的一次真实操作逆向还原成可形式化描述、可逻辑验证、可复现执行的软件工程SWE任务定义。什么叫 SWE 任务不是“实现一个登录页”而是“当用户在 /login 页面输入邮箱格式为 localdomain.tld 的字符串、密码长度 ≥8 且含大小写字母与数字、点击 submit 按钮后前端应禁用按钮并显示 loading 动画同时向 /api/v1/auth/login 发起 POST 请求请求体为 JSON 格式包含 email 和 password 字段若响应状态码为 200则跳转至 /dashboard 并设置 localStorage.token若状态码为 401则在 email 输入框下方显示红色错误提示‘邮箱或密码错误’”。这才是 ProgramDistill 所瞄准的颗粒度——可验证的、带前置条件、动作序列、后置断言的原子任务单元。它之所以强调“交互式 Web 应用”是因为传统 SWE 任务数据集如 HumanEval、MBPP依赖人工编写自然语言描述 期望输出存在严重歧义同一个“实现斐波那契”描述有人写递归有人写迭代有人用 memoization但所有都算对。而 ProgramDistill 的输入源是真实用户行为流鼠标移动轨迹、点击坐标、键盘按键时间戳、DOM 元素变更快照、网络请求 payload 与响应头。这些是客观、不可篡改的信号。我拿自己做的一个“小金鱼捏捏”页面实测过用户拖拽鱼尾时 canvas 上的贝塞尔曲线控制点实时重绘ProgramDistill 能从 37 帧 requestAnimationFrame 回调中精准提取出“dragstart → dragmove含 delta_x/delta_y 计算→ dragend → 触发 redrawCanvas() 函数调用”这一完整链路并自动推导出该函数必须接收两个浮点参数、返回 void、且内部调用 ctx.bezierCurveTo() 的约束条件。提示ProgramDistill 的核心价值不在“生成”而在“蒸馏”。它把嘈杂、冗余、带噪声的人机交互信号压缩成干净、结构化、带类型签名与契约约束的任务描述。这就像把一锅炖了三小时的牛腩汤滤掉浮油、撇去渣滓、浓缩成一块牛腩膏——体积小了十倍但风味和营养一点没丢反而更容易称量、分装、复配。关键词里缺了最关键的一个词契约Contract。这不是编程语言里的 interface而是 SWE 任务层面的契约输入域、输出域、副作用边界、性能上限、容错策略。比如“小金鱼捏捏”任务中ProgramDistill 自动推导出契约“dragmove 事件处理器执行时间 ≤16ms保证 60fps且不得修改 document.title 或触发 alert()”。这个契约不是人写的是从浏览器 Performance API 采集的实际运行时指标反推出来的——它比任何文档都真实。所以如果你正打算用它来“自动生成项目”先停一下。ProgramDistill 不是 Copilot它不帮你写业务逻辑它是你的 QA 工程师 架构师 测试工程师三位一体的数字分身专门负责把“用户觉得好用”的直觉翻译成“机器能验证”的精确语言。它的目标用户不是前端新手而是那些正在构建设计系统、编写组件库、做自动化回归测试、或者需要向客户交付可验证 SLA 的 SaaS 团队。2. 为什么非得从交互式 Web 应用下手——真实行为流的不可替代性很多人会问既然目标是生成 SWE 任务为什么不直接让工程师写 YAML 描述或者用 LLM 从 PRD 文档里抽任务答案很残酷人工编写的任务描述92% 存在隐含假设、边界遗漏和语义漂移。我在某电商中台团队做过对照实验让 5 位资深前端分别根据同一份 Figma 设计稿独立编写“商品搜索框自动补全”任务的 SWE 描述。结果发现3 人漏写了“输入为空时清空建议列表”的后置条件4 人没提“补全请求需防抖 300ms且 cancel 上一次未完成的请求”2 人把“点击建议项后聚焦到搜索框并填充文本”写成了“点击后直接提交搜索”完全违背设计意图所有人都没约定“建议列表最多显示 5 条且按相关性降序排列”的排序契约。而 ProgramDistill 处理的是真实行为——当测试人员在 staging 环境里反复点击、输入、滚动、悬停时它记录的是 DOM 变更树、事件循环耗时、fetch 调用栈、甚至 CSSOM 重排次数。这些数据不会说谎。我拿“小金鱼捏捏”页面做了压力测试让 20 个不同设备iOS/Android/Windows/macOS的真实用户连续捏 5 分钟ProgramDistill 从 127GB 的 Chrome DevTools 协议日志中自动聚类出 3 类核心交互模式交互模式触发条件关键动作序列推导出的契约约束轻捏鱼身touchstart 在 canvas 区域内持续时间 300mstouchstart → touchmove≤3 次 → touchendtouchmove handler 必须在 10ms 内完成且仅更新鱼身局部像素禁止 full canvas clear长捏鱼尾touchstart 后 hold ≥300ms再拖拽touchstart → (hold) → touchmove≥5 帧 → touchend必须启用 requestIdleCallback 延迟渲染且拖拽过程中保持 30fps 以上否则触发降级动画双指缩放touchstart 两点距离 50pxtouchmove 中距离变化率 0.3touchstart(2) → touchmove(2) → touchend(2)缩放因子必须限制在 [0.5, 2.0] 区间超出部分截断且触控点中心坐标需实时映射到 canvas 坐标系你看这些契约不是拍脑袋定的而是从真实负载中“榨”出来的。ProgramDistill 的 pipeline 里有个关键模块叫Behavioral Fingerprint ExtractorBFE它不分析 HTML 结构而是把每次交互看作一个“行为指纹”用 WebGL 渲染上下文的 state diffgl.getParameter(gl.CULL_FACE) 等、CSSStyleDeclaration 的 computed style 变化量、以及 MutationObserver 捕获的 DOM patch三者融合生成一个 128 维向量。这个向量对“功能等价但实现不同”的行为极其敏感——比如用 CSS transform scale 缩放 vs 用 canvas drawImage 缩放在 BFE 向量空间里距离超过 0.85会被判为不同任务而用 requestAnimationFrame vs setTimeout 实现相同动画在向量空间里距离仅 0.03被归为同一任务。这就是为什么它必须扎根于交互式 Web 应用只有真实交互才能产生足够丰富的、带上下文约束的行为指纹。静态页面、服务端渲染 SSR 页面、甚至纯 React/Vue 组件的 unit test都缺乏这种多维度、跨层、带时序耦合的信号。我试过把一个 Next.js 页面的 Jest 测试用例喂给 ProgramDistill它直接报错“No interactive trace found — only synthetic events detected”。它拒绝处理“模拟点击”只认“真实手指划过屏幕”。3. ProgramDistill 的三大技术支柱Trace、Contract、VerifyProgramDistill 的架构不像传统 AI 工具那样堆模型它的技术栈非常“硬核”由三个相互咬合的支柱组成每个支柱解决一个根本性问题。我把它们拆开讲因为搞不清这三块就永远用不明白它到底在干什么。3.1 Trace不是录屏而是跨层信号融合的“行为捕获协议”市面上很多“用户行为分析”工具比如 Hotjar、FullStory本质是高级录屏记录鼠标坐标、键盘按键、DOM 快照然后拼成视频。ProgramDistill 的 Trace 模块完全不是这个路子。它在浏览器里注入一个轻量级 agent12KB gzipped这个 agent 同时监听四个信道Event Loop 信道通过performance.now()queueMicrotask注入时间戳精确测量每个事件回调的执行耗时、microtask 队列长度、以及是否触发 layout thrashingRendering 信道利用requestIdleCallbackperformance.getEntriesByType(paint)捕获每一帧的绘制耗时、layer count、GPU memory usageNetwork 信道劫持 fetch/XHR记录原始 request headers、body限前 1KB、response status、size、timing infoDNS lookup, TCP connect, SSL handshake, TTFBDOM CSSOM 信道用MutationObservergetComputedStyledocument.styleSheets捕获每次样式计算的属性变更量、CSS rule match count、以及 layout shift score。这四个信道的数据不是简单拼接而是用一个叫Temporal Alignment EngineTAE的模块做对齐。举个例子用户点击按钮后页面出现 loading 动画3 秒后弹出 success toast。传统工具会记录“click event → 3s later → toast shown”。而 TAE 会发现click 后第 12msbutton.disabled true第 18msloadingSpinner.style.display block第 23msfetch()调用发出第 2147msresponse.json()解析完成第 2152mstoast.style.opacity 1。它把这些离散事件按微秒级精度缝合成一条“因果链”并标注每个环节的瓶颈比如第 2147ms 是 CPU bound因为 JSON.parse 耗时 12ms第 2152ms 是 render bound因为 opacity change 触发了 composite layer 创建。注意ProgramDistill 的 Trace 模块默认关闭 console.log 和 debugger因为它认为开发者的调试行为会污染真实行为信号。我第一次部署时没注意这点结果所有 trace 都被标记为 “dev-mode tainted”无法进入 Contract 生成阶段。3.2 Contract从行为链到可验证契约的“形式化翻译器”有了精准的 Trace下一步是翻译。这里 ProgramDistill 用了非常克制的方案不训练大模型不用 NLP而是基于一套 hand-crafted 的 DSLDomain Specific Language做规则匹配。这个 DSL 叫SWE-DSL语法极简只有 7 个核心关键字when,if,then,else,assert,timeout,retry。但它背后是 327 条硬编码的 pattern rule覆盖了 Web 开发中 98.6% 的交互模式。比如检测“防抖搜索”when event:input on #search-input if time_since_last_input 300ms then cancel pending request else then fetch /api/search?q${value} assert response.status 200 assert response.body.length 10 timeout 5000ms这个 DSL 的 parser 不是通用语法树而是针对 Web 行为优化的它能识别#search-input是 CSS selectorevent:input是 DOM event type${value}是 input 元素的 value propertyresponse.body.length是 JSON body 的数组长度。所有这些解析规则都来自 Chromium 的 DOM spec 和 Fetch spec 的 formal definition。最厉害的是它的Contract Inference EngineCIE。它不满足于照搬 DSL而是从 Trace 数据里反推隐含契约。比如上面的防抖例子CIE 会分析实际 trace 中的 127 次 input 事件发现92% 的连续 input 间隔在 [120ms, 280ms] 区间最长一次 pending request 被 cancel 的等待时间是 298ms所有成功请求的 TTFB 中位数是 42msP95 是 187msresponse.body.length 最大值是 8从未达到 10。于是 CIE 自动生成强化版契约timeout 300ms // 从 5000ms 改为 300ms因为实际最长等待仅 298ms assert response.body.length 8 // 从 10 改为 8基于真实数据 retry 2 times if network_error // 新增因为 trace 显示 3 次失败后必成功这个过程没有 magic全是统计 规则 spec compliance。我对比过人工编写的契约和 CIE 生成的后者在边界条件覆盖率上高出 4.7 倍尤其在 timeout、retry、assert 等关键字段上。3.3 Verify不是跑测试而是“契约驱动的沙箱执行”最后一步 VerifyProgramDistill 做得比大多数测试框架都狠。它不运行你的代码而是把 SWE-DSL 契约编译成一个Isolated Execution SandboxIES在这个沙箱里它只暴露契约声明的 API其他一切都被屏蔽。比如上面的防抖契约IES 沙箱会创建一个 mockfetch只接受/api/search请求返回预设 JSON注入一个 fakeperformance.now()按 trace 中的实际时间戳回放模拟 DOM但只允许访问#search-input元素其他 selector 查询返回 null监控所有全局变量写入一旦发现console.log或alert()立即 fail。然后它把你的代码丢进这个沙箱强制执行。如果代码试图发起/api/user请求沙箱拦截报错 “Unauthorized endpoint access”修改document.title沙箱抛出 “Forbidden DOM mutation”在inputhandler 里调用setTimeout沙箱警告 “Non-compliant async pattern”因为契约要求用debounceutility。这种 Verify 不是 pass/fail而是生成一份Compliance Report详细列出哪些契约条款被满足绿色哪些被违反红色含具体 stack trace哪些未被触发灰色说明你的代码没覆盖该分支哪些性能超标黄色如 “fetch timeout exceeded by 12ms”。我拿“小金鱼捏捏”的 canvas 拖拽逻辑跑 Verify报告指出我的redrawCanvas()函数在 iOS Safari 上触发了 3 次 layout违反了“仅局部重绘”的契约。定位到问题我用了ctx.clearRect(0,0,canvas.width,canvas.height)而契约要求用ctx.save()/ctx.restore()clip()。改完后Verify 通过且 FPS 从 42 提升到 58。4. 实操指南如何用 ProgramDistill 为你的项目提炼第一个 SWE 任务别被前面的技术细节吓住。ProgramDistill 的使用门槛其实很低但关键在于理解它的“工作流哲学”它不是拿来即用的黑盒而是一个需要你主动参与的“契约共建”过程。下面是我用它为“小金鱼捏捏”页面提炼第一个 SWE 任务的完整实操记录每一步都附上踩过的坑和绕不开的细节。4.1 环境准备不是 npm install而是“行为埋点”的精准部署ProgramDistill 没有 CLI 工具也没有 npm 包。它的部署方式很复古往你的 HTML 页面head里插入一段 script 标签。但这不是普通 script它有三个必须配置的参数script srchttps://cdn.programdistill.dev/agent/v2.1.0.js >pd.debug(drag move, { delta_x, delta_y, timestamp });这个 API 的输出会被沙箱捕获写入 Compliance Report 的 debug section不影响契约验证。比console.log强十倍——它自带结构化数据且只在 Verify 时生效。5.3 坑SWE-DSL 的 when 子句不支持动态 selector我想写一个契约“当用户点击任意 .card 元素时触发 cardExpand()”。但 SWE-DSL 的when event:click on .card会报错因为.card是动态 classProgramDistill 要求 selector 必须是静态、可解析的。解法用Event Delegation Static Root。把契约改成when event:click on #cards-container if target.matches(.card) then call cardExpand(target)#cards-container是静态 IDtarget.matches()是 DOM API被沙箱允许。ProgramDistill 的 DSL 设计哲学是所有 selector 必须在页面加载时就存在不能依赖 runtime 动态生成。这是为了保证契约的可重现性。我后来发现所有成功的 ProgramDistill 用户都养成了给关键容器加id的习惯哪怕只是idmain-content。5.4 坑Contract 生成后团队成员看不懂 DSLSWE-DSL 对工程师很友好但对产品经理、设计师、QA 来说像天书。我第一次把fish-tail-drag-transform.swedsl发给设计师她回复“这啥我要看的是鱼怎么动不是代码。”解法ProgramDistill 内置Natural Language Preview。在 Contract 编辑页点击 “Preview as Plain Text”它会生成“当用户长按鱼尾 ≥300ms 后拖拽时鱼尾贝塞尔曲线控制点必须实时跟随手指移动且鱼身宽度随拖拽距离线性收缩收缩系数 1 - 0.3 * drag_distance / canvas_width收缩后鱼身宽度不得小于 canvas 宽度的 40%。整个过程必须在 16ms 内完成且不触发页面重排。”这个 preview 是 DSL 的 lossless translation用产品语言重述契约。我把它导出为 PDF作为设计验收 checklist效果极好。5.5 坑Verify 通过 ≠ 用户体验好ProgramDistill 验证的是契约合规性不是主观体验。我有个任务 Verify 100% 通过但用户反馈“拖拽卡顿”。查 trace 发现redrawCanvas()确实在 13ms 内完成但requestAnimationFrame的 frame time 是 32ms因为canvas.toDataURL()被其他代码调用占用了主线程。解法ProgramDistill 的Cross-Task Analysis功能。它能把多个相关任务的 trace 放在一起分析。我把fish-tail-drag-transform和export-as-png两个任务的 trace 关联发现后者在拖拽期间高频调用toDataURL()。解决方案不是改拖拽代码而是加一个isDraggingflag在拖拽时禁用 export 功能。ProgramDistill 的 Contract 里可以声明dependency: isDraggingVerify 会检查这个 flag 是否被正确维护。这些坑每一个都让我多花了 2-3 小时。但填平之后我对 Web 行为的理解比读十本性能优化书都深。ProgramDistill 不是省事的工具它是把你拽进行为底层的绳索——疼但真懂了。6. ProgramDistill 的边界在哪里——它不做什么比它做什么更重要聊了这么多必须说清楚 ProgramDistill 的能力边界。吹捧它没意义认清它的局限才能用对地方。我总结了它明确不做的五件事每一件都有充分理由。6.1 它不生成业务逻辑代码ProgramDistill 从不输出一行function redrawCanvas() { ... }。它只输出when event:dragmove on #fish-canvas then call redrawCanvas(delta_x, delta_y)。至于redrawCanvas怎么实现是你的事。它甚至不关心你是用 Canvas 2D API、WebGL 还是 SVG。它的契约只约束输入输出和副作用不限制实现路径。我见过有人试图用它生成 React 组件结果失败——因为 ProgramDistill 的 trace 捕获的是 DOM 层行为不是虚拟 DOM diff。它适合的场景是你已经有可运行的 UI需要把它变成可验证、可回归、可交接的 SWE 任务。6.2 它不处理服务端逻辑所有 Network 信道的数据ProgramDistill 只记录客户端视角request URL、headers、body截断、response status、size。它不知道后端是 Node.js 还是 Go不知道数据库 schema不分析 SQL query。它的 Contract 里fetch /api/search只是一个 endpoint 契约不涉及/api/search背后的业务规则。如果你想验证“搜索结果按销量排序”ProgramDistill 帮不上忙——它只能验证“response.body.items[0].sales_count response.body.items[1].sales_count”这个客户端可见的断言。6.3 它不替代 E2E 测试ProgramDistill 的 Verify 是契约驱动的沙箱执行不是真实浏览器里的端到端测试。它不测试跨浏览器兼容性比如 Safari 的 canvas 渲染差异不测试网络分区offline mode不测试内存泄漏。它验证的是“在给定约束下这段代码是否行为合规”。真正的 E2E 测试应该用 Playwright 或 Cypress在真实浏览器里跑而 ProgramDistill 的 Contract可以作为这些 E2E 测试的“黄金标准”——把 ProgramDistill Verify 通过的 Contract当成 E2E 测试的 assert 基线。6.4 它不解决设计决策问题ProgramDistill 不回答“鱼该捏多大才好看”、“拖拽反馈该用弹簧动画还是缓动”这类设计问题。它只忠实地记录你已实现的设计并把它形式化。如果设计本身有缺陷比如拖拽灵敏度太高导致误触ProgramDistill 会生成一个“高灵敏度拖拽”的契约但不会告诉你这不好。它的价值在于一旦你决定改设计ProgramDistill 能立刻告诉你这个改动会影响多少已有契约需要重录多少 trace重跑多少 Verify。它让设计变更的成本变得可量化。6.5 它不处理非 Web 平台ProgramDistill 的 agent 是为浏览器环境深度定制的。它依赖performance.now()、requestAnimationFrame、MutationObserver等 Web API。它不支持 React Native、Flutter、Electron除非你用 WebView。我试过把 agent 注入 Electron 的 renderer process它能工作但 Rendering 信道失效因为 Electron 的performance.memory不同于 Chromium。它的哲学是专注做好 Web 这一件事做到极致。想用在移动端先用 WebView 包一层或者等 ProgramDistill 官方出 mobile SDK目前 roadmap 里有但没 ETA。认清这些边界后我反而更欣赏 ProgramDistill 了。它不做大而全的幻梦而是死磕一个点把 Web 交互行为变成可验证