README.md

---
title: Design Token Extractor
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: gradio
sdk_version: 4.44.1
app_file: app.py
python_version: "3.10"
pinned: false
license: apache-2.0
short_description: 'Transform UI screenshots into design tokens'
---

# 🎨 Design Token Extractor

Transform UI screenshots into structured design token libraries using AI-powered analysis.

## Features

- **Color Extraction**: Identifies dominant colors and creates semantic color roles
- **Spacing Detection**: Analyzes layout patterns to extract consistent spacing values  
- **Typography Analysis**: Detects font styles and creates text hierarchy tokens
- **Component Recognition**: Uses vision models to understand UI components
- **Multiple Output Formats**: Export to CSS Variables, Tailwind Config, JSON Tokens, Style Dictionary, or SCSS

## How It Works

1. **Upload a UI Screenshot**: Drag and drop or paste from clipboard
2. **Select Output Format**: Choose your preferred token format
3. **Extract Tokens**: The system analyzes your screenshot using computer vision
4. **Download Results**: Get your design tokens in the selected format

## Technology Stack

- **Gradio**: Interactive web interface
- **Colorgram.py**: Fast color extraction
- **OpenCV**: Image processing and spacing detection
- **Pix2Struct**: Layout and component understanding
- **PyTorch**: Deep learning framework

## Output Formats

### CSS Variables
```css
:root {
  --color-primary: #3B82F6;
  --spacing-medium: 16px;
  --font-heading: sans-serif;
}
```

### Tailwind Config
```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6'
      }
    }
  }
}
```

### JSON Tokens (W3C Format)
```json
{
  "color": {
    "primary": {
      "$value": "#3B82F6",
      "$type": "color"
    }
  }
}
```

## Tips for Best Results

- Use high-quality screenshots (minimum 800px width)
- Include various UI elements for comprehensive extraction
- Screenshots with clear color hierarchy work best
- Ensure good contrast between elements

## Development

To run locally:

```bash
pip install -r requirements.txt
python app.py
```

## License

Apache 2.0

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference