File Uploads

Upload files to provide visual context and reference materials for your projects. The AI can analyze images, read documents, and understand design files.

Supported File Formats

Images

  • PNG - Screenshots, designs, and graphics
  • JPG/JPEG - Photos and compressed images
  • GIF - Animated content and simple graphics
  • WebP - Modern web images
  • SVG - Vector graphics and icons

Documents

  • PDF - Specifications, wireframes, and documentation
  • TXT - Plain text content and notes
  • MD - Markdown files with formatted content

File Size Limits

Individual files can be up to 10MB. For larger files, consider compressing or splitting them into smaller parts.

How to Upload Files

There are several ways to upload files:

  1. Drag and drop - Drag files directly into the chat panel
  2. Click to upload - Click the attachment button and select files
  3. Paste - Paste images directly from your clipboard

Using Screenshots

Screenshots are incredibly useful for communicating design intent:

  • Reference designs - "Make something like this screenshot"
  • Bug reports - Show what's wrong visually
  • Inspiration - Share designs you like as reference
  • Wireframes - Upload hand-drawn or digital wireframes

Screenshot + Description

Combine screenshots with descriptions for best results: "Create a page like this screenshot, but with a dark theme and our brand colors."

Design Files

Upload design files to convert them into code:

  • UI Mockups - Full page designs and layouts
  • Component Designs - Individual UI components
  • Style Guides - Color palettes and typography specs

Documents for Content

Upload documents to provide content for your application:

  • Copy - Marketing text, product descriptions
  • Specifications - Feature requirements and user stories
  • Data - Sample data for populating tables and lists

Best Practices

Image Quality

  • Use high-resolution screenshots when possible
  • Crop to relevant areas to focus the AI's attention
  • Annotate images to highlight specific elements

Multiple Files

  • Upload multiple images to show different states
  • Include mobile and desktop versions together
  • Combine screenshots with text descriptions

Organization

  • Name files descriptively (e.g., "homepage-hero.png")
  • Group related files together in one upload
  • Reference specific files by name in your prompts

Next Steps

PreviousAI PromptsNextURL Imports