Can cursor turn an image to code, and if so, how?

Discussion
1

I tried uploading and telling cursor to code based on the image, but it was not able to do so. Name a better alternative :0

2

Hi @tesarius, that’s an interesting approach. What does the image show? Have you been successful doing that outside of Cursor using a specific model?

Cheers,
Petros

3

Hi petros. The image literally shows a user profile, really simple. I have been using v0 to turn images to code. You can also do this with Claude 3.5 or any other LLM. That’s why I think we should have something in cursor to make this faster

4

I don’t think the developing team will care because this is for noobs like me that don’t even know how to code :c

5

The image literally shows a user profile, really simple. I have been using v0 to turn images to code. You can also do this with Claude 3.5 or any other LLM.

Oh interesting, I haven’t used images before to describe what I want the code to accomplish. I’ve always tried to describe it using words. But I guess an image is worth a thousand words :smile:.

I don’t think the developing team will care because this is for noobs like me that don’t even know how to code

I mean, this might be useful regardless the level of the programmer.

That’s why I think we should have something in cursor to make this faster
[…] but it was not able to do so.

Can you expand on what happened exactly? How did you upload the image? What was the model you used? What was the actual response (if any) in the chat window. Was it a chat or was it the composer?

Thanks
Petros

6

Hey @tesarius,

First, set up a cursor rule that tells cursor how to generate code from your image.

For example you can start to create a .cursorrule file line this:

You are an expert in html, css and javascript. You write clean and maintainable code and use latest 2024 web standards.

Feel free to adapt this to your needs.

If you’re including an image with an app design, don’t make it too complex and make sure you export the image in high quality (png).

Here is a video where i use an app design from figma and build a working app in cursor with it

(Unfortunately its speed up for demo purpose)

Regards

2 Likes