只有截图时，文字要重录，结构也得重搭。我选了一张客户列表卡片，让 Qwen3-VL 提取结构，核对后重建，再试着替换内容。
提取结果可以作为重建起点，但内容要灵活变化，还得补上布局规则。
这次成功走通了“ 截图提取 → 人工校准 → 代码重建 ”的小闭环。尚不能判断其是否绝对比从零搭建更快，但为无源文件场景提供了一条可行路径。
01．从一个具体需求开始
测试素材来自 Flowbite 免费 Figma 模板。画面包含一个标题、六条客户记录，以及五条分隔线。每条记录由头像、姓名、邮箱和金额组成。
目标是重建可编辑客户卡片，支持替换数据、增加客户和长邮箱换行。
实验模拟只有截图的情况，未向模型提供源图层和布局约束。
02．模型提取了什么，又遗漏了什么？
使用 Qwen3-VL 4B FP8 工作流，要求模型输出元素类型、文字、边界框、包含关系与阅读顺序。首轮只输入卡片截图，没有加入色标，也没有提供 Figma 图层数据。
核对项 结果 仍需处理
文字 19 项一致 —
记录归属 6 组对应正确 —
分隔线 5 条均检出 精确位置待核对
坐标 大致定位 偏移、标题框偏宽
数据格式 JSON 可解析 字段与层级需转换
检查字段、类型和引用，再统一格式、整理层级，清掉掉头像字段里多出的姓名。原始输出另存，坐标留到下一步核对。
观察 模型把 bbox 改为 bounding_box，用嵌套 children 替代 parent_id，自行增加元素类型，还把姓名写进头像文字字段。
分析 文字与记录归属核对正确，不代表程序就能直接调用。嵌套结构本身没有问题，但格式仍需适配，可见文字与关系信息也需分开。
03．人工校准做了什么？
我把边界框叠回原图，在审阅页面里拖动位置、调整大小，再导出修正数据。
观察 人工校准用了 112 秒，工具记录 35 次操作，最终 19 个框发生变化，文字未改。
分析 35 次操作不等于 35 处独立错误；快速审阅也不等于像素级真值。这份结果只是可以继续工作的草稿。
静态局部对照 模型原框 人工修正框
04．从数据到可编辑卡片
我用修正数据重建 HTML 卡片，沿用姓名、邮箱、金额及对应关系。头像从截图按校准位置取用，并非找回独立原图。
随后补上弹性排版、长邮箱换行和新增的行规则；字体、字号与圆角仅作近似实现。
原始内容 替换数据 长邮箱 新增客户
Latest Customers
基于校准数据重建的交互示例。布局与换行规则由后续实现补充；各状态独立从原始内容切换。
页面里的三项复用检查如下：
修改任务 结果 观察
替换姓名与金额 通过 保持对齐
加长邮箱 通过 正常换行，无重叠
新增客户行 通过 卡片随内容延长
观察 三项复用检查均报告通过，提取数据支持后续内容修改。
分析 完成的是可编辑网页卡片，并非 Figma 原组件。布局与换行规则由后续代码补充，不能算作模型恢复了原稿的设计规则。
值得放进工作流吗？
只有截图时
先整理文字、记录归属和大致位置，再边核对边重建。
是否更省时
模型回传 22 秒、人工校准 112 秒，合计约 134 秒不含格式转换、工具准备与重建。没有同等质量的手工对照，不能当作总工时或省时证据。
重复制作前
先看数据能否沿用、转换程序能否复用，以及核对成本是否值得。
其他案例提示了哪些边界？
我自己还做了海报、ComfyUI 工作流截图与 VI 规范页测试，也出现了不同类型的问题：
案例 观察到的限制 对实际使用的影响
海报 元素框偏移、连接线与部分文字遗漏 需要核对细节，不能直接当成精确布局
工作流截图 节点大致识别正确，但端口连接出现错误 不能据此直接恢复可运行工作流
VI 规范页 色值抄录较完整，使用说明的结构归属不清 数值与规则需分别核对
这些案例提醒我：内容识别、几何坐标和连接关系要分别核对。模型可以先做整理，精确坐标与布局规则仍需后续校准。
实验范围与来源
本轮属于单用户、小样本探索，没有重复运行与跨种子稳定性验证；三项复用检查依据用户操作记录，未进行独立的自动化浏览器验收。此前固定配置为 Qwen3-VL 4B FP8、低温度采样与固定种子。
素材来源： Flowbite 免费 Figma 设计系统 。实验原始输出、格式转换、人工修正与复用原型分开保留。
返回首页