从LLM幻觉到精准受控：TME 在 D2C 推理协同上的深度实践

1. AI CODING APP TECHNOLOGY AI POWERED TESTING AI AGENT FRAMEWORK AI POWERED PRODUCTION INNOVATIVE EXPERIENCE 03.21 ONE-PERSON COMPANY

2. 从 LLM 幻觉到精准受控 TME 在 D2C 推理协同上的深度实践

3. 朱明鹏腾讯乐研发负责

4. 设计稿转代码技术的演进从「UI还原」到「意图实现」传统算法解析 VibeCoding VibeDesign

5. 节点清洗合并图层样式转换分块分组 UI 还原度 90 分反馈：应循环抽象组件映射结构还原度 70 分应算法解析设计稿 & 视觉 / 标注组件场景受限，重构成本节点语义逻辑推测程适配代码还原度 30 分于重写。

6. VibeCoding & MCP Tools Web API 设计软件清洗 / 合并 / … 提供原始设计数据提供 tools 调应 MCP Server 反馈：复杂场景降智，服务 Code Context 组装户提词程语境缺失，协作标准失范。 AI Coding 本地代码编辑器

7. VibeDesign 「代码 & 设计意图双向同步」 Agent 单真实代码视图事实来源「SSOT」 AI Vibe-AST 强依赖 AI 意图、存在逻辑上限难点、存量项 Agent 实时视觉画布接困难。

8. 算法解析 VibeCoding VibeDesign 步向未来的当下，我们如何选择有效地提升转码效能？

9. ✅ VibeCoding 服务 Code Context 组装户提上下本地代码编辑器，幻觉严重，还原度低。程的组件，组件重复成。次性提效，设计稿迭代更新难。单次提 … 超不认识词 AI Coding MCP Server 当下选择，遇到的问题：词法附带所有页关键细节。

10. MCP Server 提供 tools 服务 1、具层不再提供 2、重构转码上下 1. 让算法做确定的事：MCP 采样 + 决策 + 做关键的决策机协同完成精准代码推演产级代码，只提供精准的转码物料。 2. 让质量设计稿上下保持全新转码协作范式 AI Coding 程化设计。代码编辑器 3. 让 AI 做擅长的事 AI 成符合程化的代码

11. 20S Sloth D2C 转码演 1、获取转码提词 2、MCP 唤起拦截页 3、拆分 + 意图注 4、代码完成成

12. 保持层级结构化处理流程扁平数据计算转换 (zIndex:0) Layer 2 (zIndex:1) Layer 3 Layer 4 Layer 5 输出 1、清洗图层减 token2、图层合并减 token 3、稳推理4、空间分块稳推理 (zIndex:2) (zIndex:3) (zIndex:4) Layer 1 质量设计稿上下计算质量上下

13. 保持 1. 元素透明通道数据预处理质量设计稿上下 / 1. 清洗图层 2. 像素级交错运算 3. 累计区遮挡计算位运算判断有相交 MaskA.alpha > 10 & 像素遮照数据（持异形） MaskB.alpha > 10 累计区统计不透明像素透明度线性叠加，最终计算覆盖率 > 99 % 判定完全遮挡

14. 保持 1. 图标候选集合尺阈值 && 类型 + AABB 检测质量设计稿上下复 / 2. 图层合并像素算法检测交叉相连元素 2. 构建相交图相交检测、层级跃迁检测 3. 连通分量分组深度优先遍历 4. Canvas 合成 MD5 去重 + 缓存成深度优先遍历，构建向图模型合图时层级跃迁检测 z=2Icon A z=5Icon C ❌ z=8Icon B 若存在中间层C相交，则不可合并防错误合并，低层级被升层级

15. 传统包含关系算法推导 1.扁平节点列表（输）2. 两两判定包含/相交（AABB 矩形检测） Sloth D2C 视觉增强判定精度形状判定 3. 条件链过滤（zIndex 判定）视觉致性保障复杂形状检测可见性检测重层级与遮挡 C B A 保持归属判断 4. 构建节点（节点构建）结构优化算法构建虚拟节点元素属性还原

16. 保持输：量绝对定位元素节点 1. 投影粗分输出：从物理空间 → 到视觉特征 → 再到语义特征的逐级提纯 2. 特征感知细分3. 语义推测合并 DBSCAN 密度聚类同 /相交 → 合并 4. 智能过滤仅保留重复模式化结构 1. 内部有重复 C 投影法进粗粒度分割间隔 > 阈值，进切分 / 4. 空间粗分 B 基于布局签名 → 合并 eps = Avg(NN) + 0.8 * Std 等效距离 = 实际距离 – 相似特征加权 A 质量设计稿上下序列类型（40%）宽（15%）位置（30%）尺（15%） 2. 相邻有同类内聚、结构化的语义区块最终分块

17. 计算层：DSL 结构 + 样式还原 DSL 转换处理空间计算频样式还原问题混合字体&描边 1. 50+ 核合图算法分块算法渐变 &多重组合多层级透明度 3. 阴影&模糊 MixBlend 复杂边框&描边样式转换分例 2. 预置转换结果字体复杂描边动化执对 4. 差异报告成冗余遮挡清理质量保障保障层：回归测试旋转镜像保持质量门禁批量处理键成回归例回归时间 < 5min 例

18. 18S Sloth D2C 节点处理成果

19. 结构化 DSL 业务含义、语义的上下程化代码（层级树）包含了「组件」「事件绑定」「动画绑定」等如何机协同完成精准代码推演机协同成？

20. 户IDE环境层 1. AI Coding 发起具调 MCP 协议与服务层 Web 操作台 2. MCP Server 接受请求 3.获取设计稿数据 4. 流式挂起（Suspend） 5. 唤起可视化作台（Web Server） 10.代码写 8. 恢复执 (Resume) 6. 意图注 & 上下构建 7. 提交增强上下让 AI 的推演停在关键处，把绝对的掌控权交还给开发者。如何给MCP转码打个断点？编辑器 9. 模型采样成 (Sampling)

21. 中断流的底层实现：基于 CLI 的常驻调度架构 Node CLI AI Coding 本地 MCP 服务代码编辑器 MCP Client VSCode 10. Output Prompt … MCP Server 4. Blocking Await 9. Resume Execution Socket Client 2. Call list/roots 3. Get Code Context 上下孤 1. Call #TOOLS CodeBuddy TME-Continue Context Server 6. Open Inspect WebPage 5. Push Context 8. Dispatch Cfg 构建服务进程保活 Daemon Socket Server 7. Submit Cfg Web Server

22. 构建转码采样任务（Server 端反调瓶颈：基于 MCP Sampling 的分模型） Task1: Chunk To Code 提交分割模块发起分采样请求 Task2: Merge Code 成占位树）模块分割（ 1. 页聚合（占位）页 2. 叶 (Code Snippet) 节点采样链路 JSON RPC (Chunk Request) 返回结构化代码转码 MCP Sampling 调 sampling/createMessage + payloadMCP Client Return approved responseLLM MCP Server 段成（局部最优）突破上下 3. 节点引占位符采样 4. 全局替换与聚合代码

23. 前置校验 #d2c_figma MCP Check Params 执Step 1 ：调流程Step 2：启动 Subagent 群（并执 finalGenerate.md render sloth-d2c-agent extractCodeBlocks.js sloth-d2c-agent MCP，成数据切（.sloth）最终合成与写主 agent 调度收集所有代码块 finalGenerate.md extractCodeBlocks.js Subagent 群 2. 调 code-assembly.md render 转码） Step 3：收集结果，最终合成并写 {index}.chunk.md #d2c_Figma（skills模式） 1. 参数校验与环境检查处理设计稿转码 .sloth / Cache Directory（数据交换区） Master Agent 控制中基于 Skills & Subagent 并 3. 启动 Subagent 并完成写转码（段&聚合）项件 4. 主 agent 聚合代码并写件

24. 20S Sloth D2C 转码演 1、获取转码提 2、skill 调拆分 + subagent 并转码成 4、代码完成 skills MCP 唤起拦截页 3、词，使

25. （ 1. 法复码只是起点，（难以应组件/设计规范）当前程要求）区 3. 演进僵局（缺乏有效的更新机制）融码问题团队推进 1-100 解决从 0 到 1 程化落地才是深 2. 定制困难程资产脱节机协作架构精准程程演进

26. 解决组件映射解决存量复 30S 问题程缺失：组件映射与智能标记组件标记解决跨页件复问题标记模块截图成相似页转码跳过 OpenCV 图像匹配转码节点标记推理节点存储采样推理组件选择本地程上下动复选 25S

27. 解耦与沉淀：构建转码提词的三层控制体系修改/新增提词局部层圈选模块，附加定制逻辑项层定制转码规则，附带项框架层项定制转码框架提规范词反馈调整将业务规约沉淀 AI 转码为提词资产预览效果

28. Sloth DSL 设计稿解析项采样前处理 COS 上传图 i18n 国际化成后采样完成件写 User DSL 前本地插件 NPM INSTALL 级插件 ./sloth 跟随 Git 管理，团队共享，统开发可定制：通过 D2C 管线，构建转码插件系统仅开发本地规范。主题变量映射。。。 Mock 数据效，个调试/实验。本地字体替换转码调试。。。

29. 解决细粒度更新：LLM 推理 DSL 变更点 15S 本地程中 ./sloth 存储了 1. 新旧设计稿 diff 对户确认变更范围 3. 程中设计稿的 DSL 信息 2. LLM 推理变更点提 4. AI Coding 执词

30. 经验沉淀：打造安全、可控、可传承的 D2C 版本可追溯记忆体随代码程体系起 Commit。团队经验沉淀新拉取仓库即可复隐私安全最佳实践。转码产物存储在本地，零服务依赖。

31. 30S Sloth D2C 转码演词，MCP 转码 2、Web作台注 3、组件复、COS 插件启成 4、代码完成组件意图 1、获取转码提

32. 供给创新产品从创新本地基于拦截架构的本地命令具 : Sloth MCP CLI 程低码助介转码能持 Rest API

33. THANKS