{
  "id": 20095471,
  "title": "Turning one TypeScript CardSpec into 49 static palette PNGs",
  "url": "https://urgent.news/2026/11/15/turning-one-typescript-cardspec-into-49-static-palette-pngs",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-15T01:48:53.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/_d56ee71434515ebe5ebd7f/turning-one-typescript-cardspec-into-49-static-palette-pngs-5139"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "Belle AI generates 49 static palette PNGs from one CardSpec",
    "CardSpec shape defines common structure for all cards",
    "Route handler creates static parameters for all 49 cards"
  ],
  "editors_take": "Automating the generation of static assets from a single specification streamlines the production of diverse visual content, allowing the platform to scale its seasonal and celebrity palettes efficiently.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}