Spaces:
Sleeping
Sleeping
File size: 2,253 Bytes
addf2c4 06966eb addf2c4 c291e86 addf2c4 5e8bf07 addf2c4 06966eb fbb321f addf2c4 06966eb addf2c4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
---
title: Design Token Extractor
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: gradio
sdk_version: 4.42.0
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
|