企业官网建设流程全解析

很多 AI 都能做截图转代码。

但真正用过之后，你很快就会发现一个问题：

生成出来的页面，往往只是“看起来有点像”。

图片之中有可能会被加入文字, 按钮无法进行编辑, 存在复杂装饰被替换成类似素材的情况, 屏幕尺寸一旦发生改变, 布局便会开始出现错位现象。

之所以这次, 我再度制作了一个更为完整的, 图片去转代码之Skill: -image-to-code-pro。

它并非仅仅是去开展把图片转变为 HTML 的事儿, 而是要在最开始的时候, 将设计当中的层级进行拆解, 之后还要再次去构建代码。

01 先拆设计层级，再写代码

常常是传统的截图转而变为代码, 往往一开始就去识别文字, 接着绘制几道 div, 随后想方设法把页面拼凑得尽可能像那么一点儿。

但复杂 UI 不是一张平面图片。

它实际上包含很多不同类型的内容：

所以第一步不是写代码，而是先判断：

哪些内容应该用代码实现，哪些内容应该保留为图片资产。

图片说明：

有一张 UI, 它看上去呈现出完整的画面, 然而在真正进行还原操作的时候, 要先去识别文字层, 还要识别卡片层, 并且要识别装饰层, 以及背景层。

02 文字可编辑，复杂视觉不乱画

截图转代码最难的地方，并不是识别出页面上有几个按钮。

真正难的是：

既要让页面可编辑，又不能破坏原来的视觉效果。

比如：

这般去做所具有的益处在于, 页面依旧能够持续开展开发工作, 于此同时还留存着原图里关键的视觉表现特征。

图片说明：

由代码去实现文字、按钮以及结构, 把复杂插画与装饰当作独立透明资产来使用。

03 生成完成后，还要做一次视觉验收

过去我们经常把“代码生成成功”当作任务结束。

但代码能运行，不代表页面已经还原完成。

因而, Skill 于最后之际将会再度对产生页面截取图像, 把它与原本的参考图加以叠加之后展开对比。

重点检查：

图片说明：

之后页面生成了, 借助截图叠加去检查其在位置、尺寸以及有关视觉偏差方面, 并非仅仅只是看代码能不能运行。

04 一张ui图片，最后得到什么？

使用这个 Skill 后，最终得到的并不只是一份网页代码。

而是一套相对完整的交付结果：

也就是说，它不只是帮你“生成一张页面”。

而不是尽可能地将一张设计图再度转变为一个能够持续开展修改、交互以及开发工作的前端项目。

图片说明：

可维护的页面代码所在之处为左侧, 最终还原效果呈现于右侧, 视觉以及结构被同时保留。

结尾

截图转代码不应该止于：

这个页面看起来挺像。

它更应该做到：

页面的结构, 是能够持续进行开发的, 文字, 是可以予以编辑的, 素材, 能够用来重复使用的, 而最终所得出的效果, 亦是能够被查验与证实的。

这也是我做 -image-to-code-pro 的原因。

先拆设计层级，再重建代码。

目前项目已经开源，感兴趣可以在 搜索：