The Image-to-Code feature allows you to quickly convert design mockups, screenshots, or UI elements into code. Simply drag and drop one or multiple images into Alex Sidebar to generate corresponding code.

​
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

Drag and Drop

Drag your images directly into the chat interface. You can:

  • Drag single or multiple images at once
  • Drag from Finder
  • Drag from browser
  • Drag from design tools
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?