当前位置： 首页 > article >正文

一种通用的前端复刻思路：提取 UI 结构数据，交给 AI 生成代码

article 2026/4/26 3:01:09
有时需要复刻一个已有的界面——可能是某个网页、一个 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 约束输出格式的话生成的代码能直接融入现有工程。静态还原度没有问题交互逻辑仍需手动实现。

相关文章：

一种通用的前端复刻思路：提取 UI 结构数据，交给 AI 生成代码

有时需要复刻一个已有的界面——可能是某个网页、一个 App 页面，或者微信小程序。传统做法是对着截图手动写代码，费时且还原度不稳定。最近试了一种方式：先把目标界面的 UI 结构数据提取出来，同时截一张高清截图，两者一…...

编程日记 2026/4/26 3:01:09

5分钟终极指南：一键解密网易云NCM音乐文件，免费高效转换音频格式

5分钟终极指南：一键解密网易云NCM音乐文件，免费高效转换音频格式 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾经下载了网易云音乐，却发现文件是加密的NCM格式，无法在其他播…...

编程日记 2026/4/26 2:59:08

JavaScript中利用宏任务拆分阻塞任务的实操案例

...

编程日记 2026/4/26 2:59:08

AutoJS无限制版安装使用教程：附送礼物与私信自动化脚本完整源码分享

AutoJS无限制版安装使用教程：附送礼物与私信自动化脚本完整源码分享 作为一名每天都在各种APP里“摸鱼”的打工人，我最近发现那些重复性的点击操作简直是在浪费生命。比如刷直播间、自动领福利、或者是给喜欢的博主发私信，点多了手都酸。 为了彻底解放双手，我研究了一下 A…...

编程日记 2026/4/26 2:59:08

EvaDB：用SQL桥接数据库与AI模型，构建声明式数据处理流水线

1. 项目概述：当数据库遇上AI，EvaDB想解决什么？如果你最近在关注AI应用开发，尤其是想让大语言模型（LLM）或者计算机视觉模型（CV Model）直接处理你的业务数据，那你大概率会遇…...

编程日记 2026/4/26 2:59:08

图记忆技术：构建LLM智能体的结构化记忆系统

1. 项目概述：图记忆库的兴起与价值如果你最近在关注大语言模型（LLM）和智能体（Agent）的前沿进展，那么“图”这个概念一定频繁地出现在你的视野里。从知识图谱到图神经网络，再到现在的图记忆&…...

编程日记 2026/4/26 2:59:08

医疗AI中的癌症生存率预测：神经网络模型构建与实践

1. 项目背景与核心目标癌症生存率预测一直是医疗AI领域的重要研究方向。基于临床数据构建神经网络模型，能够帮助医生更准确地评估患者预后情况，为个性化治疗方案制定提供数据支持。这个项目需要处理典型的医疗结构化数据，包含患者 demographi…...

编程日记 2026/4/26 2:57:08

图像分类中像素缩放算法选择与优化实践

1. 图像分类任务中的像素缩放方法概述在计算机视觉领域，像素缩放是图像预处理环节中最基础却至关重要的步骤。当我们把原始图像输入卷积神经网络(CNN)进行训练或推理时，绝大多数情况下都需要先将图像调整为统一尺寸。这个看似简单的操作，实际…...

编程日记 2026/4/26 2:57:08

Golioth ESP-IDF SDK：ESP32云端连接开发实战指南

1. Golioth ESP-IDF SDK：为ESP32开发者打造的云端连接利器作为一名长期深耕物联网领域的开发者，我最近在项目中频繁使用ESP32系列芯片，而Golioth新推出的ESP-IDF SDK彻底改变了我的开发体验。这个开源工具包让ESP32硬件与Golioth Cloud的连接…...

编程日记 2026/4/26 2:57:08

OpenPose与Stable Diffusion协同生成姿态控制图像

1. 项目概述：OpenPose与Stable Diffusion的协同工作流去年在开发一个动画项目时，我需要批量生成风格统一但姿态各异的人物图像。传统手动调整不仅效率低下，而且难以保持角色比例的一致性。这时OpenPose与Stable Diffusion的组合方案完美解决了…...

编程日记 2026/4/26 2:57:08

Python机器学习数据预处理实战与Scikit-Learn技巧

1. 数据预处理在机器学习中的核心价值用Python和Scikit-Learn做机器学习时，原始数据就像未经雕琢的玉石——潜在价值巨大但需要精细处理。我在金融风控和医疗影像分析项目中深刻体会到：数据预处理的质量直接决定模型效果上限，其重要性往往超过…...

编程日记 2026/4/26 2:57:08

机器学习核心概念与实践指南

1. 机器学习领域的边界与定位 作为一名在数据科学领域摸爬滚打多年的从业者，我经常被问到这样一个问题："机器学习到底是什么？它和人工智能、数据挖掘有什么区别？"这个问题看似简单，但要准确回答却需要理清整…...

编程日记 2026/4/26 2:55:07

Reqwest 兼顾简洁与高性能的现代 HTTP 客户端

Reqwest 兼顾简洁与高性能的现代 HTTP 客户端 HTTP 客户端的选择往往面临易用性与性能的权衡，要么接口繁琐但性能出众，要么用法简洁却难以应对高并发场景。Reqwest 基于 Rust 异步运行时 tokio 构建，封装了简洁直观的 API，既能让…...

编程日记 2026/4/26 2:55:07

基于强化学习的浏览器自动化智能体：HyperAgent 架构与实战

1. 项目概述：当强化学习遇见浏览器自动化 最近在开源社区里，一个名为 hyperbrowserai/HyperAgent 的项目引起了我的注意。乍一看，这像是一个将“超”和“浏览器”结合的名字，很容易让人联想到某种增强版的浏览器工具。但深入探究…...

编程日记 2026/4/26 2:55:02

LoRA技术在Stable Diffusion中的高效微调与应用实践

1. LoRA技术概述与Stable Diffusion适配性LoRA（Low-Rank Adaptation）作为大模型微调领域的突破性技术，在Stable Diffusion生态中展现出独特价值。其核心原理是通过低秩矩阵分解，在原始模型参数旁添加可训练的小型适配层。具体到文…...

编程日记 2026/4/26 2:55:02

AI驱动开发工具全景解析：从GitHub Copilot到工作流重构

1. 项目概述：当AI成为你的编程搭档如果你是一名开发者，最近可能已经感受到了身边的变化。以前，我们写代码、查文档、调试Bug，大部分时间都在和IDE、搜索引擎、以及偶尔的Stack Overflow打交道。但现在，一个全新的“同事…...

编程日记 2026/4/26 2:54:59

《100个“反常识”经验11：删了30万行数据表还是那么大？》

本期摘要你用DELETE删了30万行数据，df -h一看磁盘空间没变，表文件还是那么大。这不是Bug，是InnoDB存储引擎的设计特性：DELETE只标记删除，不释放磁盘空间，留下的位置叫“空洞”。真正释放空间需要执行OPTIMI…...

编程日记 2026/4/26 2:52:59

LightGlue深度解析：从自适应剪枝到高速特征匹配的实战指南

LightGlue深度解析：从自适应剪枝到高速特征匹配的实战指南 【免费下载链接】LightGlue LightGlue: Local Feature Matching at Light Speed (ICCV 2023) 项目地址: https://gitcode.com/gh_mirrors/li/LightGlue 在计算机视觉领域，特征匹配作为三…...

编程日记 2026/4/26 2:52:59

MLP、CNN与RNN选型指南：深度学习三大经典网络解析

1. 神经网络选型指南：MLP、CNN与RNN的适用场景解析作为从业十余年的深度学习工程师，我经常被问到同一个问题："我的项目该用哪种神经网络？"这确实是个值得深入探讨的话题。在本文中，我将结合工业界实战经验&a…...

编程日记 2026/4/26 2:52:59

分布式量子计算：架构演进与关键技术解析

1. 分布式量子计算的核心概念与技术演进量子计算正经历从单量子处理器（QPU）向多节点协同的分布式架构演进的关键阶段。这种转变类似于经典计算从单机走向集群的历史进程，但量子领域面临的挑战更为复杂。分布式量子计算的核心在于通过量子网络…...

编程日记 2026/4/26 2:52:58

Saga分布式事务：补偿事务与协同式的实现对比

Saga分布式事务：补偿事务与协同式的实现对比 在微服务架构中，分布式事务的处理一直是技术难点之一。Saga模式作为一种流行的解决方案，通过将长事务拆分为多个本地事务，并采用补偿或协同机制来保证最终一致性。本文将对比Saga的两…...

编程日记 2026/4/26 2:52:58

LibreDWG：开源CAD格式解析如何打破工程数据壁垒

LibreDWG：开源CAD格式解析如何打破工程数据壁垒 【免费下载链接】libredwg Official mirror of libredwg. With CI hooks and nightly releases. PRs ok 项目地址: https://gitcode.com/gh_mirrors/li/libredwg 你是否曾因无法打开一个DWG文件而陷入困境&…...

编程日记 2026/4/26 2:50:58

神经网络函数逼近原理与实践：从理论到代码实现

1. 神经网络作为函数逼近算法的本质在机器学习领域，监督学习的核心任务可以抽象为函数逼近问题。想象你手中有一本神秘的密码本，左边是各种加密信息（输入），右边是对应的解密内容（输出）。虽然你不…...

编程日记 2026/4/26 2:50:58

深度学习分类变量编码方法全解析

1. 深度学习中的分类变量编码方法解析在机器学习项目中，我们经常会遇到包含分类变量的数据集。这些变量代表的是离散的类别而非数值，比如颜色（红/绿/蓝）、产品类型（A/B/C）等。但所有深度学习模型都要求输入…...

编程日记 2026/4/26 2:50:58

深入解析Merlin：基于Go与HTTP/2的现代C2框架设计与实战

1. 项目概述：一个用Go写的跨平台C2框架如果你在红队或者渗透测试领域摸爬滚打过一阵子，肯定对C2（Command & Control，命令与控制）框架不陌生。从老牌的Metasploit Meterpreter，到后来火热的Cobalt Strik…...

编程日记 2026/4/26 2:50:56

Python的互斥锁与信号量详解

并发与锁多个线程共享数据的时候，如果数据不进行保护，那么可能出现数据不一致现象，使用锁，信号量、条件锁互斥锁1. 互斥锁，是使用一把锁把代码保护起来，以牺牲性能换取代码的安全性，那么Rlock后…...

编程日记 2026/4/26 2:50:55

自动化任务系列之五：PDF批量转换+自动清理——文件格式规范化工作流

凌晨三点，项目群里弹出一条消息：“这周要给客户交付全套图纸，但是那个AI文件转PDF转了两天还没转完，你们谁去盯着一下？” 我盯着屏幕，整个人都傻了。48小时的等待，换回来的是服务器上一堆半成品…...

编程日记 2026/4/26 2:48:54

自动化任务系列之二：批量建目录树——Excel模板驱动千人项目初始化

说实话，项目启动前最让我崩溃的从来不是技术选型，而是建目录。 3000人的制造业客户，12个产品线，每条线下面20个研发项目，每个项目要建"需求文档/设计稿/测试报告/上线记录"四个子目录——这是什么概念&#…...

编程日记 2026/4/26 2:48:54

WordPress 分页失效的常见原因与正确实现方案

...

编程日记 2026/4/26 2:48:54

智能办公新方式：OpenClaw 2.6.6 一键部署与配置

前言 OpenClaw（小龙虾AI）作为2026年最值得期待的本地化AI工具，彻底摆脱了网络依赖和云端账号限制。仅需自然语言指令，即可实现高效的电脑操作自动化，显著提升工作效率。 安装前重要提醒 为确保软件顺利运行&#xf…...

编程日记 2026/4/26 2:48:54