Screenshot To Code
How to use
Click AI button in the Quick Menu on the top, or hit / to open the AI panel. You can either copy and paste (ctrl+v), drag and drop, or use the upload button to upload an image.
How it works
It basically prompts to the famous GPT-4-Vision, get response, parse the code, then paste into the code editor. The almighty AI will receive:
- the current code
- screenshot of your current component
- custom reference image, if you provide one
- the text prompt you write, if you provide one
If you don't provide a text prompt, but a refernece image, it will try to implement the reference image, on the basis of your current code.
Caveat: GPT-4-Vision cannot directly "see" an image. It relies on an image captioning system to interpret the image for it, then write codes based on the description. Therefore, it cannot replicate an original image exactly. But it is quite good at forming the general structure or framework of the requested image.