Overview
MobileCoder allows you to attach images to your prompts, giving the AI visual context for what you want to build. This is incredibly useful for sharing design mockups, providing UI inspiration, or showing bugs that need fixing.How to Attach Images
There are three ways to attach images to your prompts:Drag and Drop
Simply drag an image file from your computer and drop it into the chat input area.Paste from Clipboard
Copy an image to your clipboard (e.g., screenshot), then paste it directly into the chat input withCmd+V (Mac) or Ctrl+V (Windows).
File Picker
Click the attachment icon in the chat input to open a file picker and select images from your computer.Supported Formats
MobileCoder supports the following image formats:Use Cases
UI Mockups and Wireframes
Upload a design mockup or wireframe to show MobileCoder exactly what you want to build:“Build this screen based on the attached mockup. Match the layout and styling as closely as possible.”
Design Inspiration
Share a screenshot of an app you admire:“I like the card design in this screenshot. Can you update our product list to use a similar style?”
Bug Reports
Attach a screenshot showing a visual bug:“The button is overlapping the text as shown in this screenshot. Can you fix the layout?”
Brand Assets
Upload logos, icons, or brand colors:“Here’s our company logo. Please add it to the header and make sure it’s properly sized.”
Multiple Images
You can attach multiple images to a single prompt. This is useful when:- Showing different screens for context
- Providing before/after comparisons
- Sharing multiple design references
Tips for Better Results
Use clear, focused images
Use clear, focused images
Crop images to show only the relevant part. Full screenshots with lots of irrelevant content can be distracting.
Use appropriate resolution
Use appropriate resolution
High-resolution images work best. Blurry or low-quality images may be harder for the AI to interpret.
Describe what you want
Describe what you want
Don’t just attach an image — explain what you want MobileCoder to do with it. Be specific about which elements to replicate.
Reference specific elements
Reference specific elements
Point out specific parts of the image: “I like the rounded corners on the buttons” or “Match the color scheme in this design.”
Example Prompts with Images
With a mockup:“Build this onboarding flow. There are 3 screens — an intro, a feature highlight, and a signup form. Follow the attached designs.”With a screenshot:
“See the attached screenshot — there’s too much spacing between the cards. Can you reduce the gap to make it more compact?”With inspiration:
“I attached a screenshot from the Spotify app. I really like their dark theme with green accents. Apply a similar color scheme to our app.”