> ## Documentation Index
> Fetch the complete documentation index at: https://alexcode.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Image to Code

> Transform designs into code by dragging images into Alex Sidebar

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

<CardGroup cols={2}>
  <Card title="Screenshot Tool" icon="camera">
    Use **Command + Shift + 6** to:

    * Take window screenshots
    * Capture specific UI selections
    * Perfect for quick UI component captures
  </Card>

  <Card title="Drag & Drop" icon="image">
    Drag images directly into the chat interface from:

    * Finder
    * Browser
    * Design tools
  </Card>
</CardGroup>

## 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

<CardGroup cols={2}>
  <Card title="Window Capture" icon="window">
    Capture entire windows with a single click. Perfect for:

    * Full screen interfaces
    * Complete view hierarchies
    * Dialog boxes and alerts
  </Card>

  <Card title="Selection Capture" icon="crop">
    Select specific areas to capture. Ideal for:

    * Individual UI components
    * Specific sections of an interface
    * Custom-sized regions
  </Card>
</CardGroup>

### Settings Customization

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/alex/chat/images/screenshot-settings.png" alt="Screenshot settings showing capture options" />
</Frame>

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

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

### 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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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
  </Step>

  <Step title="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
  </Step>
</Steps>

## 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

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

## Example Workflows

### Basic UI Component

<Steps>
  <Step title="Capture Component">
    Take a screenshot of a button or card design
  </Step>

  <Step title="Generate Code">
    Drag the image into Alex Sidebar
  </Step>

  <Step title="Customize">
    ```swift theme={null}
      // 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)
          }
        }
      }    
    ```
  </Step>
</Steps>

### Complex Layout

<Steps>
  <Step title="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
  </Step>

  <Step title="Generate Components">
    You have two options:

    * Drag multiple component images at once to generate all parts simultaneously
    * Generate code for each major section individually
  </Step>

  <Step title="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
  </Step>
</Steps>

## Troubleshooting

### Common Issues

<AccordionGroup>
  <Accordion title="Inaccurate Component Detection">
    * Ensure image quality is high
    * Try cropping closer to the component
    * Use screenshots rather than photos
    * Provide additional context in your prompt
  </Accordion>

  <Accordion title="Style Matching Issues">
    * Specify exact colors if known
    * Include style guide references
    * Ask for specific modifications
    * Use follow-up questions for refinement
  </Accordion>

  <Accordion title="Layout Problems">
    * Break complex layouts into sections
    * Specify constraints explicitly
    * Ask for alternative layout approaches
    * Provide reference screenshots
  </Accordion>
</AccordionGroup>

## 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

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