AI现在能从截图里抠出按钮，再生成可运行代码

设计师发来一张App登录页截图，前端实习生照着切图、量间距、写HTML、调样式，花掉半天。

现在，有人把同一张截图丢给Meta新发布的Muse Spark，它自动识别出头像占位图、邮箱输入框、密码框、登录按钮，把每个元素单独提取为带透明背景的PNG，再生成结构清晰、带语义标签的HTML和适配尺寸的CSS。 这意味着：UI实现环节中，最耗时的手动还原步骤，正被压缩成一次点击。

过去也有模型尝试‘看图写代码’，但边缘识别常错位，按钮宽高经常差20像素，图标常被糊成一团——结果是开发者仍要逐行重写。 这意味着：准确率的微小提升（比如边缘偏移从15px降到2px），让输出从‘参考素材’变成‘可合并进主分支的代码’。

Muse Spark没用传统OCR或CV流水线，而是把视觉理解与语言建模在统一架构里联合训练；它不先‘认出这是按钮’，而是在生成代码的过程中，同步决定‘这里该放一个带border-radius: 8px的div，宽320px，居中’。 这意味着：它处理的不是‘图像’和‘代码’两个任务，而是‘把意图具象为可执行界面’这一个动作。

别人还在比谁家模型参数多，Meta悄悄把‘理解界面’这件事，从分类问题改成了构造问题。

下次你看到一张Figma截图被转成代码，可以留意下：那个按钮的阴影有没有跟着缩放，输入框的placeholder文字颜色是不是和设计稿一致。