一种通用的前端复刻思路：提取 UI 结构数据，交给 AI 生成代码
有时需要复刻一个已有的界面——可能是某个网页、一个 App 页面，或者微信小程序。传统做法是对着截图手动写代码，费时且还原度不稳定。
最近试了一种方式：先把目标界面的 UI 结构数据提取出来，同时截一张高清截图，两者一起交给 AI。结构数据负责告诉 AI “这是什么、在哪里”，截图负责告诉 AI “长什么样”。两者互相印证，比单给一张图效果好很多。四个平台都试了一下，这里各记录一个最实用的工具。
为什么要结构数据加截图一起给
只给 AI 一张截图，它要从图片里同时猜：这个元素是 div 还是 button、它的位置在哪、颜色和字号是多少。猜得不准，结构就歪。
如果把 UI 结构数据提前告诉 AI，它就只需要专注把样式填对。截图负责视觉细节，结构数据保证骨架不歪。
如果再配合 AI 的 skills（比如写一个项目级别的 skill，规定好输出的代码风格、组件拆分方式、命名规范），生成出来的代码可以直接集成到现有工程里，不用再手动调整风格。
整体流程是：
提取目标界面的 UI 结构数据
截一张高清截图
结构数据加截图一起给 AI，配合 skill 约束输出格式
下面说说四个平台的工具。
网页端：frontend-distill
frontend-distill是一个 npm 包，能对网页进行分层提取。
它会输出两种关键文件：
design-tokens.json：颜色、字体、阴影、圆角、间距等视觉属性layout-tokens.json：容器结构、Flex/Grid 布局、区块间距等骨架信息
安装：
bash
git clone https://github.com/arduano/frontend-distill.git cd frontend-distill npm install npx playwright install chromium
使用：
bash
node ./bin/frontend-distill.js distill --url "https://目标网站.com" --output-dir "./output"
拿到 JSON 后，配合截图一起给 AI。提示词可以这样写：先用 JSON 里的精确值生成骨架，再参考截图补充视觉细节，两者冲突时以 JSON 为准。
如果你的 AI 工具支持 skill，可以写一个 skill 来约束输出的组件结构和代码风格，保持和项目其他部分一致。
安卓端：uiautomator
安卓没有网页那种一键提取工具，但系统自带了uiautomator。
使用：
bash
adb 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 桌面端：servo
@uipath/servo是一个 npm 包，专门用来和 Windows 原生桌面应用的 UI 交互。支持 Win32、WPF、UWP 等主流框架。
安装：
bash
npm install -g @uipath/servo
使用：
bash
# 查看所有可检测的窗口 servo targets # 提取 UI 树快照 servo snapshot w1 # 截图 servo screenshot w1
输出的快照格式自带元素类型、状态和引用标识，类似这样：
text
- Button "Submit" [ref=e7] - InputBox "Username" [ref=e5] - CheckBox "Remember me" [ref=e6] [selected]
这个结构和网页端的 DOM 树提取思路一致，配合截图一起给 AI，同样可以配合 skill 来约束输出格式。
总结
四个平台，一个思路：
| 平台 | 工具 | 提取什么 |
|---|---|---|
| 网页 | frontend-distill | DOM 树 + 设计令牌 |
| 安卓 | uiautomator dump | UI 树 XML |
| 小程序 | wedecode | WXML + WXSS |
| Windows | servo | UI 树快照 |
流程统一：提取结构数据 → 截图 → 配合 skill 一起给 AI → 生成代码。
结构数据和截图互相印证，比单丢一张图效果好。加上 skill 约束输出格式的话，生成的代码能直接融入现有工程。静态还原度没有问题，交互逻辑仍需手动实现。