gridlock

# Gridlock

> Screenshot-to-layout-system analyzer. Reverse-engineers grid systems, spacing rhythms, and density profiles from design screenshots. Extracts grid primitives, spacing scales, breakpoint patterns, nested grids, and layout method recommendations.

## What it does

Accepts design screenshots (PNG, JPG, WebP). Uses visual analysis to extract: grid configuration (columns, margins, gutters), spacing scales (base unit, rhythm, values), responsive breakpoints, nested grid structures, layout method recommendations (CSS Grid vs Flexbox), and density profiles.

## Usage

```python
from scripts.grid_analyzer import detect_grid_system, detect_nested_grids
from scripts.spacing_analyzer import detect_spacing_scale
from scripts.breakpoint_analyzer import infer_breakpoints
from scripts.layout_classifier import classify_layout_method
from scripts.density_analyzer import analyze_section_density

grid_data = detect_grid_system(element_positions, container_width=1440)
spacing_data = detect_spacing_scale(element_gaps)
breakpoint_data = infer_breakpoints(container_width=1440, margins=24, gutters=24, columns=12)
layout_method = classify_layout_method(sections, grid_data)
density_data = analyze_section_density(sections)
```

## Output

Structured JSON with: layoutMethod, grids (page + nested), breakpoints, spacing scale, and density profiles. Ready for design systems and frontend tooling.

## Part of a suite

Hexed (colors) + Specimen (typography) + Gridlock (layout) + Eyes Peeled (accessibility) + Devourer (components)

Pipeline: Screenshot → Hexed + Specimen + Gridlock → Eyes Peeled → Devourer → Production components

## Author

Created by Heathen