Dialing It In

For most of my career, I spent my days living inside design tools prototyping what interfaces could look like. I'd sketch out a whole page in Figma (or Sketch, or Photoshop!). Sometimes it was easier to just do it in code, by hand, like an animal. I'd squint, nudge, and tweak until things felt right. Page first, details second. That worked fine in the pre-AI era because the page was the unit of work. Building anything smaller than a page, in multiple variations, just to compare them, was a luxury I didn't have time for. Yes, I worked with components and shared libraries, but almost always in the context of a larger page or screen.

Over the past year I've flipped that completely. I now spend most of my design time on small components in isolation, experimenting until each piece is exactly right, and then letting pages assemble themselves from polished components I've already tweaked and become attached to.

One of my favorite tools for this lately is what I call a Lab.

A Lab is a throwaway prototype page. The component I'm designing lives on one side, and a panel of controls on the other. Sliders, dropdowns, checkboxes, a random seed to shuffle sample data. Every aspect of the component I might conceivably want to tweak gets a knob. I sit there and play, clicking through variations until it looks and feels exactly the way I want. Then I hit save, and the whole configuration copies to my clipboard as a JSON payload. I paste that back into a chat session, and the real component gets built with those exact values locked in. It's a joyful flow.

I was inspired to try this after reading through Emil Kowalski's ideas for tuning animations and UI tools with AI agents. The technique scales perfectly to more than just animations.

In the past this would have been at best an annoying effort, and at worst prohibitively time-consuming. I'd basically be hand-building a dozen versions of a component to compare them, plus a little control panel UI on top. Doable, yes, but tedious enough that I'd never actually do it. AI makes it cheap. As part of my personal system (the one I wrote about in the one tool that changed how I work), I have a labs skill: I describe the component and the dimensions I want to explore, and it generates the entire lab for me. The prototype now costs me a sentence and some tokens:

/jt:design-lab let's build a lab to prototype what an audience chart would look like over time to show member counts and trends so a user can quickly see variations in an audience's membership. I'll use this on a show page for the audience, but we may also want a sparkline version to show on a list of audiences too

After some back and forth, here's the result:

Now we're cooking. I have a "real" component I can tweak until I like the styling and interaction. Then I hit "Save" and my config is locked in. The lab persists that config in the browser's local storage too, so everything is right where I left it when I come back later.

Here's another example, for our page builder interface for Puck:

/jt:design-lab using our research on block-based page editors, let's build a lab to experiment with the interaction for inserting a new block on a page. Use our existing block library for sample content

And here we go:

This one is still in progress for me this week. It's not perfect yet, but it's already surfaced a pile of choices I wouldn't have thought through on my own: Should there be a quick row of common blocks? Thumbnails or text descriptions? How dense should the information be? What does search feel like when I type and come up empty? A bit of fiddling in the lab and I can answer all of it. When I'm done, I'll save the config and weave it into the larger page design.

This all emphasizes something I keep coming back to: in this age of AI, I am the director. AI doesn't dictate my design or my taste. It's the tool I use to get the vision out of my brain and onto the screen, and labs are one of the more effective ways I've found to do that. The judgment and the decisions are still mine. The knobs just make it faster to get there.