Working messy, handing off clean.

Every product I've worked on had the same afterlife in Figma. Which screen is the latest? Which one is deprecated, and which parts of an old screen are still quietly in use? Versions blur, files get heavy, Figma starts to crawl under its own memory, and handoffs go out with placeholder data standing in for the real thing.

The cost showed up later, on the engineering side: states that were never drawn, screens whose order nobody could follow, decisions that only made sense if you'd been in the room. On an internal tool where managers run a dozen campaigns at once, a missing empty or error state isn't a detail. It's a support ticket.

I was the one fixing it, project after project. None of it was hard. All of it was repeated:

• Ordering: Arranging screens so someone opening the file cold can follow the story
• Cleaning: Hidden layers, duplicates, wrapper frames and oversized images that make files heavy and slow
• Mocking data: The worst of it: big tables that have to show every state, edge case, value, text length and language
• Annotating: Edge cases and states written down, so engineering isn't left guessing

What I wanted was a file anyone could open, a PM, an engineer or another designer, and understand: every screen demo-ready, with numbers and copy drawn from the product's own context instead of lorem ipsum. So I automated the parts I kept redoing, to the standard I'd hold any handoff to.

It started small: prompts driving Figma through its MCP, one change at a time. Whenever the same job came back, I turned it into a skill, tried it on real sections and tightened it until it did the job the way I would. By the end of those early iterations, prepping a section meant pasting a link and adding a line of context about what it needed.

The first real section came out clean enough that I started treating it as a tool rather than a script. Two things held it back. It lived in my terminal, so only I could use it. And it worked in repeated passes: every time I remembered a missing state, an edge case or a step in a flow, it went over the whole section again, and every pass cost time and tokens.

Preview every change first, then run it all in one sweep.

That became the shape of the tool: a plan you assemble from passes, a preview of exactly what it will do, and a single run.

You choose the passes a section needs, or reuse the recipe from the last one. Each pass does one job, and does it to a standard:

The plan isn't just switches. It sits in a composer that works agentically: I give it the context in plain words, what the section is, who it's for, which screens matter, and every pass reads from that. Content writes names and copy that fit the product, States knows which flows imply which missing screens, and Annotate knows what's worth calling out.

The conversation carries on while it works. I can ask for a change mid-run and it folds it in after the current step, and once it's done a line like "wider gaps" or "more formal" adjusts the result without starting over.

By this point nothing was broken. But most of the tools I use every day are flat panels I put up with rather than enjoy, and I wanted this one to have some life: something you'd come back to partly for the pleasure of it. So I built it as a desk, a close copy of how you'd prep work with real stationery.

• Paper and mat: Your section is a sheet of paper taped to a cutting mat on a wooden desk, and you pan and zoom it like a real desktop
• Stationery twins: Every action has one: a broom sweeps, a pencil scribbles while it thinks instead of a spinner, a sponge wipes it clean, a stamp marks it done
• Props that work: The ruler started as set dressing and ended up measuring real distances between organised sections

Sound and touch close the gap between real and digital. When something happens you hear it, and it feels finished. It was the part people reacted to first.

The inputs are my favourite part. Sliders are rulers and tape measures that snap to their presets with a soft tick, switches have a cap you press down into, and pickers are polaroids. In a tool that edits someone's working file, that snap matters: it gives you the feeling of handling something delicate, carefully.

The scariest thing a tool can do to a designer is change or delete something important, then keep building on top of the mistake. On a blank canvas that's cheap. On a legacy file that's still someone's source of truth it isn't, and most files that need prepping are exactly that kind.

Nothing writes to Figma without a go-ahead.

• Preview: Align shows the new layout before anything moves, and you can flip between the preview and the file as it is
• Backup: Always runs first
• Keep or Undo: After every run, the choice is yours
• Ghosts: Suggested states stay dashed until you keep them
• Read back: It checks the section after writing, then stamps it done

The bigger change was to how I work, not just how I hand off. I can stay messy while I'm thinking, knowing I'll never have to stop and tidy up by hand.

Wireframing changed too. I sketch the main screens, think in context, and let the tool fill in the standard product patterns I'd otherwise draw one by one: states, confirmations, edge cases and the paths between them. Seeing the whole flow from above makes gaps easier to catch, and the loop gets tight: start with an idea, build it rough, expand it if it holds up, rework it if it doesn't. With the screens already set up, variations are cheap, so choosing a direction gets faster.

The same idea stretches to new layouts drawn from a section and held together by a brand kit, which also makes it a quick way to moodboard, or to find directions for a set of social posts.

I designed and built it on my own, end to end. Owning the build meant spending my time making things rather than only deciding on visuals and direction: breaking ideas apart faster, trying many variations of an interaction, and tuning the feel of every animation and sound myself, without the back and forth over how something should behave or whether it's feasible.

AI tooling, Claude included, sped up the building the way a good set of tools does. The product decisions, the interaction design and the standards it works to are mine. The skills underneath were tested and refined through the early iterations, and the current version of the tool came together in about a week.

Pinned · under the hoodThe desk is a Next.js app. Each pass is a Claude Code skill that works on the file through the Figma MCP. Settings live in recipes, so a team can save how they like a section prepped and run it the same way next time.

The first real test was a file I'd been living in for months: Flyout panels, 63 frames of templated panels, renamed by nobody, nudged off the grid one fix at a time, and heavy enough that Figma paused every time I scrolled. Exactly the kind of section that never gets cleaned, because cleaning it is an afternoon nobody has.

I pointed Tidy at it, checked the preview, and ran it once. It's one run, so these are first numbers rather than averages, but they show where the time actually goes.

The number I'm proudest of isn't on those cards. It's the one Tidy didn't act on.

On its first dry run it flagged 1,207 hidden layers as junk. Every one of them was meant to be there.

Templates often carry every version of a component inside them, hidden until it's needed. A social post panel, for example, might hold a poll layout, an empty state and a repost version, with only one switched on at a time. To a cleanup tool those look like forgotten layers, and deleting them breaks the template the next time someone switches a version on. So before Sweep suggests removing a hidden layer, it checks whether that layer is one of these named variants, and if it is, it stays. Only hidden leftovers with no name and no purpose are suggested for clearing, anything uncertain goes on the preview list, and the person running it reads the proof and makes every call.

That's why the preview and backup come first. Nothing was deleted on that dry run because nothing writes to Figma before I've seen the plan, and if something had slipped through, the backup copy was one click away. So the headline is megabytes saved, not layers removed: the size came from the images, and the layers that looked like clutter were the file working as intended.

Tidy keeps the boring part of handoff out of the way, so the design gets the attention.