The AI Playground Trick: Iterate on Any UI Fast

My favorite way to design with AI: have it build a playground of 20 variants, then touch and feel your way to the one you actually love. I'm a developer, not a designer — but I've got a little taste, and this is where AI earns its keep. Instead of guessing at one option, I have it build me a playground: a bunch of live variants I can see, tweak, and mess with side by side. In this one I was finally trying to fix an animation for atrium's activity-sidebar icons that I'd hated for months. I iterated through a heartbeat pulse, Tetris blocks dropping in behind the icons (ripped that one out), slept on it, and landed on using the icon itself as a mask — the one I love. Then came performance. The first build used CSS layers and pegged the CPU. Canvas was better with tons of icons animating at once but worse with only a few. So I had Fable work some mad-scientist magic and pre-composite each animation into a film strip on mount — practically free with 40 icons running at once. It took real iteration, but the playground technique got me there. Even if you toss what you build, it's a genuinely fun way to work. ⏱ Chapters 0:00 Why AI unlocks fast iteration 0:53 What an AI design playground is 1:55 Iterating through the variants 2:20 The Tetris-blocks experiment 3:05 The icon-as-mask breakthrough 4:25 Making the animation performant 5:10 Shipping the one I loved #AICoding #UIDesign #vibecoding atrium is a resumable development environment for AI coding agents. → https://getatrium.dev