Turning one TypeScript CardSpec into 49 static palette PNGs
Belle AI (aicoloranalysis.io) publishes downloadable color-palette cards: one for each of the twelve sub-seasons and four parent seasons, plus cards for 20 celebrity pages and 13 "color analysis for …" audience pages. All 49 come from one CardSpec shape and one React layout, and each has a fixed .png URL. This post walks through how that is wired and what I checked on the live site. The code is…
Belle AI provides downloadable color-palette cards for twelve sub-seasons, four parent seasons, twenty celebrity pages, and thirteen audience pages. All 49 cards are generated from a single CardSpec shape and a React layout, with each card having a fixed .png URL. The code was sourced from a specific commit on 2026-11-04. The color palette data for seasons and special pages is stored in separate files, while all cards share a common shape defined in palette-card-spec.ts.
This shape is parsed by a renderer function that understands it, producing four builder functions for seasons, celebrities, and audience pages. The filenames follow a specific pattern, separating season slugs, parent seasons, celebrity slugs, and attribute slugs. A route handler generates static parameters for all 49 cards, turning them into PNG responses served with optimized headers for caching.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
