Spoticover
I used to make playlist covers using an online tool where I'd craft them manually using shapes from an editor. I liked the style, but I have too many playlists to do them all by hand and be creative each time. So I built Spoticover, a tool that generates similar covers automatically.
The core idea was to take the style I liked and add constraints to random generation so it would produce something decent without manual tweaking. Pure randomness makes chaos, but if you bias the randomness toward combinations that work, you can get consistent results.
The Constraints
To make this work, I spent time figuring out what combinations of colors and shapes looked good, then encoded those as rules.
Colors are picked from harmony groups like cool blues (blue, purple, violet) or warm colors (red, orange, yellow). The generator uses these palette colors about 80% of the time, with the rest being random. Shade selection favors mid-range shades (400, 500, 600) because they tend to look better than the extremes.
For positioning, the big circle is always centered at (128, 128) with a fixed radius of 80. Little circles are positioned with 90% probability on the radius of the big circle, at 70-100% of its radius. Squares are sized to match the big circle radius and positioned in corners. Geometric features like stripes, chevron circles, and wedge explosions have reduced probabilities (25%, 15%, and 10%) to prevent clutter.
The generator uses a seeded random number generator, so the same seed always produces the same result. This determinism means you can share a seed or use a playlist name as the seed and get consistent results every time.
Once I had the rules figured out, I needed to build the actual tool. I used AI heavily for this project. It helped with a lot of the initial implementation, but after a while it started making mistakes. Some of the controls don't function correctly as a result, but that's okay for me because in reality the text input and random generation is all I needed. The broken controls are mostly for fine-tuning individual elements, which I don't use.
Where AI really shined was the Spotify integration. I asked it to implement OAuth authentication and playlist fetching, and it worked first try. The generator can use a playlist name as a seed, so selecting a playlist automatically generates a cover based on its name. There is an issue with loading many playlists, but most users don't have that many.
The Monorepo
Spoticover lives in a monorepo I've been building out, which made getting started much faster. Shared configs for ESLint, TypeScript, and Vite mean I'm not starting from scratch on new projects. The CI/CD setup deploys to AWS Amplify using Pulumi when I push to main. When I shared it with friends, I was able to tweak and fix things they pointed out with a quick release cycle.
Beyond the configs, the monorepo has prebuilt reusable Pulumi compound components for infrastructure, reusable middlewares I use in Express projects, and Auth0 hooks that I use across many projects. Over time it will also contain plug and play UI and backend pieces for flows I use regularly. The goal is to make spinning up new projects as frictionless as possible.
The end result is a tool that solves my original problem: I can generate playlist covers quickly without manually crafting each one. The constraints ensure the output looks decent, and the seeded randomness means I can recreate designs or use playlist names as seeds. It's not perfect, but it works for what I need.
You can try it at spoticover.reb.nz. Pick a playlist, enter some text as a seed, or just hit randomize and see what it generates.
