Image Prompting

Image Prompting allows you to communicate visually with Frontend AI by including images in your prompts. This powerful feature enables you to share screenshots, designs, mockups, and visual references that guide the AI in creating or modifying your website.

How to Add Images to Prompts

There are two ways to include images in your prompts:

Drag and Drop Upload

Upload an image directly to your prompt:

1. Locate an image file on your computer (PNG or JPEG)
2. Drag the image file over the Message Input area
3. Drop the file to upload and add it to your prompt context
4. The image will appear in your prompt, ready to reference

Add from Media Library

Use existing images from your Media Library:

1. Open the Media Library from the media button near the prompt input
2. Browse your uploaded images or search Unsplash
3. Select the image you want to use
4. Click the Add to Prompt button
5. The image is now included in your prompt context

Image Requirements

For optimal results, ensure your images meet these specifications:

• File Format: PNG or JPEG only
• File Size: Under 10MB per image
• Quality: Clear, high-resolution images work best
• Content: Screenshots, designs, mockups, or reference images

Visual Prompting Use Cases

Image Prompting is incredibly versatile and can be used for many purposes:

Design Recreation

Share a design mockup or screenshot:

• Upload a Figma design export
• Share a screenshot from another website
• Show a hand-drawn sketch of your desired layout
• Provide a design system or style guide image

The AI will analyze the visual design and recreate it in your website.

Example: Upload a screenshot from Figma and say “Create a landing page that matches this design.”

Visual References

Guide the AI with visual examples:

• Show color schemes or palettes
• Share typography examples
• Provide component design patterns
• Reference UI/UX examples from other sites

Example: Upload a color palette image and say “Use these exact colors for the homepage theme.”

Screenshots for Debugging

Help the AI understand issues:

• Share screenshots of errors or bugs
• Show layout problems or visual glitches
• Capture unexpected behavior
• Provide before/after comparisons

Example: Upload a screenshot showing a layout issue and say “Fix the alignment problem shown in this image.”

Wireframes and Mockups

Start with low-fidelity designs:

• Upload wireframe sketches
• Share basic layout mockups
• Provide structural diagrams
• Show information architecture

Example: Upload a wireframe and say “Build this page structure with proper styling.”

Brand Assets

Maintain brand consistency:

• Share logo files
• Provide brand guideline images
• Show approved design patterns
• Reference existing brand materials

Example: Upload your logo and say “Add this logo to the navigation bar.”

Image URL Access

When you upload an image to a prompt, the AI receives the Image URL and can use it in several ways:

Direct Image Insertion

The AI can insert the uploaded image directly into your website:

• Add the image to page content
• Use it as a hero background
• Include it in galleries or sliders
• Place it in specific sections

Example: Upload a hero image and say “Use this image as the background for the hero section.”

Image Reference

The AI can reference the uploaded image while creating new designs:

• Match color schemes from the image
• Replicate layout patterns
• Extract design elements
• Maintain visual consistency

Visual Prompting Best Practices

To get the best results from Image Prompting:

Be Specific

Clearly explain what you want the AI to do with the image:

• Good: “Recreate this navbar design with the same spacing and colors”
• Less Effective: “Make something like this”

Use High-Quality Images

Clear, high-resolution images provide better results:

• Avoid blurry or pixelated screenshots
• Use the highest quality source available
• Ensure text in images is readable
• Capture full screenshots when possible

Combine with Text Prompts

Images work best when combined with clear text instructions:

• Explain what the image shows
• Specify what should be replicated
• Point out specific elements to focus on
• Provide context for the visual reference

Example: Upload a design and say “Recreate this checkout page layout, but use our brand colors instead of these ones.”

Multiple Images

You can include multiple images in a single prompt:

• Show multiple design options
• Provide before/after references
• Share different aspects of a design system
• Compare multiple approaches

Iterate Visually

Use images to refine designs progressively:

1. Upload initial design reference
2. Review what AI creates
3. Take a screenshot of the result
4. Upload the screenshot with modification requests
5. Repeat until perfect

Common Workflows

Design Handoff from Figma

1. Export your Figma design as PNG or JPEG
2. Ensure the export is under 10MB
3. Drag and drop the image to the Message Input
4. Prompt: “Build this page design exactly as shown”
5. AI recreates the design with code

Creating Similar Designs

1. Find an inspiring design (screenshot or save the image)
2. Upload the image to your prompt
3. Prompt: “Create a similar hero section, but for a coffee shop”
4. AI adapts the design to your needs

Visual Bug Reporting

1. Encounter a visual issue on your site
2. Take a screenshot showing the problem
3. Upload the screenshot
4. Prompt: “Fix the header alignment issue shown in this screenshot”
5. AI identifies and resolves the issue

Brand Consistency

1. Upload your brand guidelines or logo
2. Prompt: “Update the entire site to match this brand style”
3. AI applies your brand colors, fonts, and design patterns
4. Review and refine as needed

Powerful Design Creation

Image Prompting transforms how you work with AI:

• Faster Communication: Show instead of describing complex designs
• Precise Results: Visual references eliminate ambiguity
• Design Iteration: Quickly refine based on visual feedback
• Creative Inspiration: Share examples to guide AI creativity
• Efficient Collaboration: Share designs from designers or clients

Tips for Success

• Screenshot Everything: Capture designs you like for future reference
• Organize Your Media Library: Keep frequently used images easily accessible
• Annotate Complex Images: If needed, add arrows or notes to images before uploading
• Test Different Angles: Try uploading different views or aspects of a design
• Combine Techniques: Use images alongside text descriptions for best results

Image Prompting bridges the gap between visual design and AI development, making it easy to create exactly what you envision. Whether you’re working from professional designs, quick sketches, or inspirational screenshots, images help communicate your vision clearly and effectively.