跳到主要内容

AI 编程 · 工作方式

截图生成代码

Screenshot to Code

也叫:图生代码、设计稿转代码、截图还原、Image to Code

把设计稿或网页截图发给 AI,让它识别其中的布局和组件,生成外观相近的前端代码。

详细解释

这相当于把一张装修效果图交给施工队,让他们照着做。借助多模态模型,AI 能从截图里识别布局结构、颜色、文字和组件类型,生成对应的 HTML/CSS 或 React 组件,v0 等工具就擅长这类工作。

它能很快搭出「长得像」的页面,但常有几个问题:间距、字号不完全准确;点击、悬停、弹窗等交互从图上看不出来;AI 可能手写一套组件,而不用你项目里的组件库;只看一张图,不知道手机上该怎么排。

效果更好的做法:说明技术栈和组件库,指出每个区域用的是什么组件,补充交互和响应式要求,再让 AI 生成。

开发者信息
术语 ID
ai-screenshot-to-code
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29