2D Kit Mockup System

A custom Adobe Illustrator scripting tool that lets designers configure garment mockups — jersey collars, sleeve styles, colors, cuffs, and more — through a UI panel, with layer automation, Pantone color matching, and one-click export.

The Problem

3D Photoshop mockups were the bottleneck. Each file was 1–1.5 GB, and with 10–15 collar types × 4 sleeve styles, that was ~50 separate files per product — roughly 75 GB per product line. Switching a collar style meant opening two large files, copying elements, and re-aligning: 15–30 minutes per variation. Storage was filling fast and designers spent more time managing files than designing.

Tech Stack

Layer	Tools
Scripting	Adobe ExtendScript (JSX) — runs natively inside Illustrator
Background Tasks	Python — auto-updater, color matching
Process Launcher	VBScript — fires Python silently so Illustrator never blocks
State Storage	XMP document metadata — persists form selections between sessions
Updates	Git-based auto-updater — checks remote SHA on launch, patches silently

What the Tool Does

1. 01Designer opens Illustrator — launcher checks for available updates in the background
2. 02Main dialog shows a kit-type dropdown (Jersey, Tracksuit, Hoodie, Hat, etc.) with Run / Match Colors / Export buttons
3. 03Selecting a kit opens its options panel — collar style, sleeve type, cuffs, stripe pattern, colors, club name, client ID, ClickUp task reference
4. 04On confirm, the script iterates Illustrator layer groups and toggles visibility to match selections — stored in XMP metadata for the next session
5. 05Match Colors reads named swatches, calls a Python script to cross-reference the Pantone fabric library, and applies the nearest available shade with CMYK values shown on the mockup
6. 06Export fires per-artboard export with auto-numbered filenames and logo folders — no manual renaming

The color matching in step 5 runs through a dedicated Cloudflare Worker that accepts CMYK or RGB input and returns the nearest available Pantone fabric shade — see Color Matcher API.

Core — Layer Toggle & Update Check

The launcher silently checks a status file written by a background Python process, then shows the UI. On confirm, the options script walks Illustrator's layer tree and toggles visibility to match the designer's selections.

// On launch — read update status written by background Python check
function checkForUpdate() {
    var output = new File(Folder.userData + "/Mockup Builder/scripts/Update_status.txt");
    var response = "false";
    try {
        if (output.exists && output.length > 0) {
            output.open("r");
            response = output.read().replace(/[\r\n]+/g, "").toLowerCase();
            output.close();
        }
    } catch (e) {}
    try { if (output.exists) output.remove(); } catch (e) {}
    return response === "true";
}

// On confirm — toggle layer visibility to match selected options
function applyOptions(doc, selections) {
    for (var i = 0; i < doc.layers.length; i++) {
        var layer = doc.layers[i];
        var name  = layer.name.toLowerCase();
        layer.visible = selections.some(function(s) {
            return name.indexOf(s.toLowerCase()) !== -1;
        });
    }
}

Impact

Metric	Before	After
File size per product	1.5 GB	10–20 MB
Files per product line	~50 (~75 GB)	1 (~10 MB)
Variation turnaround	15–30 minutes	Seconds
Version tracking	Manual, error-prone	Auto-numbered on export
Colour accuracy	Risk of wrong Pantone/stock	Auto-matched to available options
Storage cost	Growing rapidly	Significantly reduced