The Image-to-Code feature allows you to quickly convert design mockups, screenshots, or UI elements into code. You can input images through multiple methods:

​
Input Methods

Screenshot Tool

Use Command + Shift + 6 to:

  • Take window screenshots
  • Capture specific UI selections
  • Perfect for quick UI component captures

Drag & Drop

Drag images directly into the chat interface from:

  • Finder
  • Browser
  • Design tools

​
Screenshot Tool (⌘ + ⇧ + 6)

The built-in screenshot tool provides a quick way to capture UI elements and convert them to code. You can customize its behavior in the settings to match your workflow.

​
Capture Options

Window Capture

Capture entire windows with a single click. Perfect for:

  • Full screen interfaces
  • Complete view hierarchies
  • Dialog boxes and alerts

Selection Capture

Select specific areas to capture. Ideal for:

  • Individual UI components
  • Specific sections of an interface
  • Custom-sized regions

​
Settings Customization

You can customize the screenshot tool in three ways:

​
1. Quick Access Menu

When you click the screenshot button or use ⌘ + ⇧ + 6, a dropdown menu appears with three options:

  • Capture window: Take a screenshot of the entire window
  • Capture selection: Draw a selection box around the desired area
  • Attach file: Choose a file from your system instead

​
2. Default Behavior Settings

You can set your preferred default screenshot behavior in Settings:

  1. Open Settings
  2. Navigate to “Chat Settings”
  3. Look for “Default Screenshot Behavior” under the chat options
  4. Choose between:
    • Capture window (automatically capture the entire window)
    • Capture selection (start with selection tool)
    • Show options (always show the dropdown menu)

​
3. Customize Keyboard Shortcut

You can change the default ⌘ + ⇧ + 6 shortcut:

  1. Open Settings
  2. Go to “Chat Settings”
  3. Find “Take Screenshot” in the list
  4. Click on the current shortcut (⌘ + ⇧ + 6) to change it
  5. Press your desired key combination

Even with a default behavior set, you can always access other capture modes through the dropdown menu or by using your configured keyboard shortcut.

​
Best Practices for Screenshots

  1. Clean Captures

    • Close unnecessary windows or tabs
    • Hide sensitive information
    • Ensure the UI is in its final state

  2. Component Focus

    • Zoom in for small components
    • Include padding for context
    • Capture in the correct state (hover, active, etc.)

​
Getting Started

1

Prepare Your Images

Supported formats:

  • PNG
  • JPEG
  • Screenshots directly from Xcode/Figma

For best results, ensure your images clearly show the UI elements you want to convert.

2

Input Your Image

Choose your preferred method:

  1. Use Command + Shift + 6 to take a screenshot
  2. Drag and drop images into the chat
  3. Copy-paste images directly
3

Review Generated Code

The eligible model will analyze the images and generate corresponding code. You can:

  • Copy the code directly
  • Request modifications
  • Ask for explanations of specific parts

​
Best Practices

​
Image Preparation

  • Use high-resolution images for better accuracy
  • Crop to include only relevant UI elements
  • Ensure good contrast between elements
  • Include any specific styling details as prompt you want to capture

​
Code Generation

  • Start with simple components before complex layouts
  • Review generated code for customization needs
  • Use follow-up questions to refine the output
  • Consider breaking complex UIs into smaller pieces

For complex designs, try generating code for individual components first, then combine them into the final layout.

​
Example Workflows

​
Basic UI Component

1

Capture Component

Take a screenshot of a button or card design

2

Generate Code

Drag the image into Alex Sidebar

3

Customize

  // Generated code example
  struct CustomButton: View {
    var body: some View {
      Button(action: {}) {
        Text("Get Started")
          .font(.headline)
          .foregroundColor(.white)
          .padding(.horizontal, 24)
          .padding(.vertical, 12)
          .background(Color.blue)
          .cornerRadius(8)
      }
    }
  }

​
Complex Layout

1

Break Down Design

Identify main components in your layout. You can:

  • Split your design into logical sections
  • Take screenshots of individual components
  • Prepare multiple images for different parts
2

Generate Components

You have two options:

  • Drag multiple component images at once to generate all parts simultaneously
  • Generate code for each major section individually
3

Combine

Ask Alex to help combine components into a cohesive layout. You can:

  • Request adjustments to match the overall design
  • Fine-tune spacing and alignment
  • Add container views and navigation elements

​
Troubleshooting

​
Common Issues

​
Tips for Better Results

  1. Start Simple: Begin with basic components before attempting complex layouts
  2. Iterate: Use follow-up questions to refine the generated code
  3. Combine Methods: Use both image and text descriptions for better results
  4. Review Output: Always review and test generated code in your project

Remember that Image-to-Code is a starting point. You can always ask Alex to modify the generated code to better match your needs.

Was this page helpful?