咱就是说传统的客户端UI交付链路Yi经有点过时了。

你kan，PRD负责说明业务目标和规则，Figma负责表达视觉稿，客户端负责把它变成真实App。

每个环节dou合理，但中间有大量信息并不会自动传递。

这就导致了UI走查的时候，总是会出现各种问题。

所以我就在想，如何把Figma走查升级为AI可验证的UI交付。

传统的UI交付链路，大概长这样：

flowchart LR A --> B B --> C C --> D D --> E

这个流程Zui大的问题是：信息在每一次交接中变薄。

PRD是自然语言，Figma是静态图，截图是视觉结果，代码仓库是工程现实。

它们dou重要，但它们不Neng混成一团丢给AI。

这个问题我自己也想过。

有人说是因为内容质量不够高。

有人说是因为关键词优化没Zuo好。

但我觉得，geng重要的是：内容是不是真的对用户有帮助。

Ru果你的内容只是敷衍了事，用户kan了也没什么收获，那百度收录它干啥？ 如何将Figma走查升级为AI可验证的UI交付？

为了解决这个问题，我开始研究如何将Figma走查升级为AI可验证的UI交付。

我参考了Figma MCP和Flutter官方的GenUI。

Figma MCP的思路是在把设计稿里的节点、布局、样式和组件信息，通过工具接口带进AI coding workflow。

这样agent拿到的不是一张孤立截图，而是geng接近设计源数据的上下文。

GenUI给我的启发是：AI生成UI不应该绕开客户端工程，而应该被约束在客户端Yi经认可的组件、协议和运行时边界里。

output/<case>/├── page-canonical.json # 证据原档├── page-debug-index.json # 调试索引├── ui-build-plan.json # 实现蓝图├── ui-build-review.md # 中文审查视图└── screenshots/full-page.png

page-canonical.json 是证据原档，记录证据从哪里来源码、运行时、截图和目标工程各自提供了什么用于追溯来源、排查冲突和补查细节。

flowchart TD A --> B B --> C B --> D D --> E D --> F F --> G

把ui-build-plan.json理解成四类信息：

Widget拆分和文件边界

视觉还原依据

动态文案和国际化计划

实现后验证提示

{ " widgettree " : { " type " : " Column " , " children " : } , " fileboundary " : { ... } , " visualguidance " : { ... } , " dynamictext " : { " +%.2f " : { " source " : " uimodel " , " type ": " number " } } , " validationhints ": }

ProtoBridge 不是我拍脑袋凭空设计出来的。

它的输出是一组产物：page-canonical.jsonpage-debug-index.jsonui-build-plan.json和screenshots/full-page.png。

真正的 Flutter 页面是 agent 读取这些契约以后实现出来的。

async function reconstructPageContext {
const sourceEvidence = input.source ? await analyzePrototypeSource : undefined ;
const runtimeEvidence = input.url && input.capture ? await captureRunningPage : undefined ;
const screenshotEvidence = input.screenshot || input.ocr ? await attachScreenshotEvidence : undefined ;
const targetProfile = input.targetRepo ? await inspectFlutterTarget : undefined ;
// . 合并成页面级证据原档
const canonicalPage = await mergeEvidence;
// . 生成 agent 默认执行的实现蓝图
const buildPlan = targetProfile ? await createUiBuildPlan : undefined ;
// . 再把机器蓝图投影成中文审查视图
const review = buildPlan ? await renderHumanReview : undefined ;
return { canonicalPage, buildPlan, review };
}