有时需要复刻一个已有的界面——可能是某个网页、一个 App 页面或者微信小程序。传统做法是对着截图手动写代码费时且还原度不稳定。最近试了一种方式先把目标界面的 UI 结构数据提取出来同时截一张高清截图两者一起交给 AI。结构数据负责告诉 AI “这是什么、在哪里”截图负责告诉 AI “长什么样”。两者互相印证比单给一张图效果好很多。四个平台都试了一下这里各记录一个最实用的工具。为什么要结构数据加截图一起给只给 AI 一张截图它要从图片里同时猜这个元素是 div 还是 button、它的位置在哪、颜色和字号是多少。猜得不准结构就歪。如果把 UI 结构数据提前告诉 AI它就只需要专注把样式填对。截图负责视觉细节结构数据保证骨架不歪。如果再配合 AI 的 skills比如写一个项目级别的 skill规定好输出的代码风格、组件拆分方式、命名规范生成出来的代码可以直接集成到现有工程里不用再手动调整风格。整体流程是提取目标界面的 UI 结构数据截一张高清截图结构数据加截图一起给 AI配合 skill 约束输出格式下面说说四个平台的工具。网页端frontend-distillfrontend-distill是一个 npm 包能对网页进行分层提取。它会输出两种关键文件design-tokens.json颜色、字体、阴影、圆角、间距等视觉属性layout-tokens.json容器结构、Flex/Grid 布局、区块间距等骨架信息安装bashgit clone https://github.com/arduano/frontend-distill.git cd frontend-distill npm install npx playwright install chromium使用bashnode ./bin/frontend-distill.js distill --url https://目标网站.com --output-dir ./output拿到 JSON 后配合截图一起给 AI。提示词可以这样写先用 JSON 里的精确值生成骨架再参考截图补充视觉细节两者冲突时以 JSON 为准。如果你的 AI 工具支持 skill可以写一个 skill 来约束输出的组件结构和代码风格保持和项目其他部分一致。安卓端uiautomator安卓没有网页那种一键提取工具但系统自带了uiautomator。使用bashadb shell uiautomator dump adb pull /sdcard/window_dump.xml拉出来的 XML 就是当前界面的完整 UI 树能看到每个控件的类型、坐标、是否可点击、文本内容等信息。把这个 XML 文件和截图一起给 AI结构数据负责布局骨架截图负责颜色字号等视觉细节。安卓端一个局限是颜色和字号这类设计 Token 编译在resources.arsc二进制文件里uiautomator拿不到。实际做法是让 AI 根据截图来取色XML 里的坐标和控件类型保证布局不歪。小程序端wedecode小程序相对简单它本质上是 Web 技术的变体。wedecode能反编译小程序的.wxapkg包还原出WXML 文件类似 HTML 的 DOM 结构WXSS 文件类似 CSS 的样式表JS 逻辑代码JSON 配置文件使用有在线版本也支持命令行。把.wxapkg文件导进去直接还原成工程目录。还原出来的 WXML 和 WXSS 本身就是结构数据加样式可以直接喂给 AI 做二次开发或迁移到其他平台。配合 skill 的话可以让 AI 按你指定的框架比如从原生小程序转成 Taro 或 uni-app来输出代码。Windows 桌面端servouipath/servo是一个 npm 包专门用来和 Windows 原生桌面应用的 UI 交互。支持 Win32、WPF、UWP 等主流框架。安装bashnpm install -g uipath/servo使用bash# 查看所有可检测的窗口 servo targets # 提取 UI 树快照 servo snapshot w1 # 截图 servo screenshot w1输出的快照格式自带元素类型、状态和引用标识类似这样text- Button Submit [refe7] - InputBox Username [refe5] - CheckBox Remember me [refe6] [selected]这个结构和网页端的 DOM 树提取思路一致配合截图一起给 AI同样可以配合 skill 来约束输出格式。总结四个平台一个思路平台工具提取什么网页frontend-distillDOM 树 设计令牌安卓uiautomator dumpUI 树 XML小程序wedecodeWXML WXSSWindowsservoUI 树快照流程统一提取结构数据 → 截图 → 配合 skill 一起给 AI → 生成代码。结构数据和截图互相印证比单丢一张图效果好。加上 skill 约束输出格式的话生成的代码能直接融入现有工程。静态还原度没有问题交互逻辑仍需手动实现。