Screenshot to Code

This is like handing a contractor a rendering of the finished room and asking them to build it. With a Multimodal model, the AI can pick out the layout structure, colors, text, and component types from a screenshot and generate matching HTML/CSS or React components. Tools like v0 are good at this.

It can quickly put together a page that "looks like it," but there are common problems. Spacing and font sizes aren't exactly right. Interactions like clicks, hovers, and dialogs can't be seen in a picture. The AI may hand-write its own components instead of using your project's component library. And from one image, it doesn't know how things should be laid out on a phone.

For better results: say what tech stack and component library to use, point out which component each area is, add the interaction and responsive requirements, and then have the AI generate it.