很多 AI 都能做截图转代码。但真正用过之后你很快就会发现一个问题生成出来的页面往往只是“看起来有点像”。图片之中有可能会被加入文字, 按钮无法进行编辑, 存在复杂装饰被替换成类似素材的情况, 屏幕尺寸一旦发生改变, 布局便会开始出现错位现象。之所以这次, 我再度制作了一个更为完整的, 图片去转代码之Skill: -image-to-code-pro。它并非仅仅是去开展把图片转变为 HTML 的事儿, 而是要在最开始的时候, 将设计当中的层级进行拆解, 之后还要再次去构建代码。01 先拆设计层级再写代码常常是传统的截图转而变为代码, 往往一开始就去识别文字, 接着绘制几道 div, 随后想方设法把页面拼凑得尽可能像那么一点儿。但复杂 UI 不是一张平面图片。它实际上包含很多不同类型的内容所以第一步不是写代码而是先判断哪些内容应该用代码实现哪些内容应该保留为图片资产。图片说明有一张 UI, 它看上去呈现出完整的画面, 然而在真正进行还原操作的时候, 要先去识别文字层, 还要识别卡片层, 并且要识别装饰层, 以及背景层。02 文字可编辑复杂视觉不乱画截图转代码最难的地方并不是识别出页面上有几个按钮。真正难的是既要让页面可编辑又不能破坏原来的视觉效果。比如这般去做所具有的益处在于, 页面依旧能够持续开展开发工作, 于此同时还留存着原图里关键的视觉表现特征。图片说明由代码去实现文字、按钮以及结构, 把复杂插画与装饰当作独立透明资产来使用。03 生成完成后还要做一次视觉验收过去我们经常把“代码生成成功”当作任务结束。但代码能运行不代表页面已经还原完成。因而, Skill 于最后之际将会再度对产生页面截取图像, 把它与原本的参考图加以叠加之后展开对比。重点检查图片说明之后页面生成了, 借助截图叠加去检查其在位置、尺寸以及有关视觉偏差方面, 并非仅仅只是看代码能不能运行。04 一张ui图片最后得到什么使用这个 Skill 后最终得到的并不只是一份网页代码。而是一套相对完整的交付结果也就是说它不只是帮你“生成一张页面”。而不是尽可能地将一张设计图再度转变为一个能够持续开展修改、交互以及开发工作的前端项目。图片说明可维护的页面代码所在之处为左侧, 最终还原效果呈现于右侧, 视觉以及结构被同时保留。结尾截图转代码不应该止于这个页面看起来挺像。它更应该做到页面的结构, 是能够持续进行开发的, 文字, 是可以予以编辑的, 素材, 能够用来重复使用的, 而最终所得出的效果, 亦是能够被查验与证实的。这也是我做 -image-to-code-pro 的原因。先拆设计层级再重建代码。目前项目已经开源感兴趣可以在 搜索