截图生成代码

Screenshot to Code

AI 编程也叫：图生代码、设计稿转代码、截图还原、Image to Code

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

详细解释

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

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

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

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

附图是一个设置页的设计稿。请用项目现有的 React、Tailwind 和 shadcn/ui 实现：左侧是侧边导航，右侧是分组的表单，每组带标题和说明，底部有保存按钮。颜色和间距尽量贴近截图，手机端侧边导航改成顶部标签页。