Using images in Vibecode

Using images as references

You can use images in the Vibecode app in two main ways:

• As reference images to help design an app that mimics another interface.

• As part of your actual app—for example, by uploading a logo to the Vibe Code Agent, which can then add that image to your agent or include it directly in your app’s files.

Using images as reference images to design an app that mimics another interface (Example Prompt)

// 
You are an expert app builder.
Design a mobile app interface that closely resembles the layout, style, 
and visual elements in this reference image. 
Aim to capture the same look and feel. 
Adapting as needed for usability and modern UX best practices.
[Attach the reference image in the vibecode app]

Uploading and using an image (such as a logo) as part of the actual app (Example Prompt)

// 
You are an expert app builder.
Build an app that includes this image (a logo) as a primary branding element. 
Place the logo prominently on the home screen. 
And make sure it is included in all relevant app files and UI components.
[Attach the reference image in the vibecode app]