README.md

metadata

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

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

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6'
      }
    }
  }
}

JSON Tokens (W3C Format)

{
  "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:

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