Project Overview

Pastiche turns 500 years of painting into Figma design tokens.

Install Plugin Read Article ↓ Features ↓ Outcomes
Type
Figma Plugin
Timeline
Aug 2025 – Present
Role
Solo Engineer + Designer
Stack
JS · k-means · Figma API · Cloudflare
Pastiche hero
The Idea

Your color palette has been waiting in a museum since 1665.

Designers default to the same digital palettes. Pastiche pulls from 5,800 open-access museum works, capturing the real color relationships masters spent decades perfecting, and writes them directly into your Figma file as variable tokens.

The Problem

Every interface pulls from the same 12 palettes on Pinterest. Color has stopped being a design decision.

The Insight

Masters solved color balance we're still copying poorly. That knowledge is freely available in museum archives. No one had made it usable in a design tool.

Color extraction: Girl with a Pearl Earring
Architecture

No servers. No database. $0/month.

Everything runs inside Figma's local iframe. The only external call is a zero-maintenance Cloudflare Worker that proxies museum images around browser CORS restrictions.

Local (Inside Figma)
  • ui.html: k-means clustering in the browser
  • code.js: canvas writes and token generation
  • Figma Variables: written directly into the file
Cloud (Public, Zero-Cost)
  • GitHub: hosts 82MB NGA painting catalog
  • Cloudflare Worker: CORS proxy for museum images
  • NGA API: source JPEG delivery
Key Features

Three capabilities. One panel.

01 Painting Library

5,800 masterworks. Instantly searchable.

In-memory keyword search across the full NGA open-access catalog. Results as a grid of 24 thumbnails with name, artist, year, and medium.

Pastiche library

02 Color Extraction

Relationship-driven sampling.

k-means isolates structurally distinct shades: dominant warmth, cool accents, and neutral anchors. Outputs a full 5-token palette plus brand, secondary, and neutral scales.

Token output

03 Export

Developer-ready in one click.

Writes organized Variable Collections directly into the Figma file. Exports as JSON Design Tokens and native CSS custom properties.

Export view
Full plugin UI
In Use

A live frame recolored with Vermeer's palette.

Select any layer, pick a painting, click generate. Pastiche walks nested groups, fills, and borders. Writes tokens and repaints the canvas in seconds.

Example: frame recolored with Vermeer palette
Stack

Built to run free, forever.

ML
KM
k-means
CV
Canvas API
Design
Fig
Figma API
TK
Variables
Infra
CF
Cloudflare
GH
GitHub
Data
NGA
Nat'l Gallery
CSV
5,800 rows
Outcomes

Approved by Figma Community the next day.

$0

per month. Runs entirely on free tiers

3s

painting to complete token generation

5,800

open-access artworks in the catalog

You don't need a bloated backend to ship a production-ready product. Keep heavy lifting local. Use serverless only where the browser can't.

Install on Figma Community Read the Medium article
Plugin walkthrough
Takeaways

Engineering discipline is a design skill.

The right architecture, not the most impressive one, is what lets a solo product ship fast and stay maintainable.

Art history is an underused design resource. The masters solved color problems we're still copying poorly from Pinterest.

Prototype

Watch the plugin in action.

Get in touch

Send a message.

Reach out directly. Usually responds within a day.