My first instinct was to ask developers to write a script that matched components to blocks. It seemed the most obvious path to reduce repetitive work.

​

The problem is that the two systems operate with different logic. In the client's design system, a component is a complete unit. In the library, it can break into multiple blocks or have no equivalent at all. There's no direct mapping for a script to follow.

​

This realization led me to agent orchestration with Claude. The problem required contextual interpretation, not chained rule execution.

The core logic: the agent reads the entire block library — properties, variants, and rules — then reads the client's component. Instead of looking for one-to-one matches, it disassembles the component down to the smallest unit and rebuilds it using the block vocabulary.

​

The work is split across three agents: Margaret inspects the file, generates the JSON, and proposes new blocks when needed; Grace reviews the implementation and validates library patterns; Clarice documents the blocks in Figma and checks properties against the file.

​

When a block or property doesn't exist, the agent flags it and documents it in a spreadsheet. This gap map became part of the process and feeds the decision to create new blocks or rethink the approach.

The agents make mistakes. Not often, but they do — especially with highly customized components, where the distance between the two languages is too large. The most common case: when an autolayout spacing is set to "auto," the agent interprets it as zero and the blocks render collapsed. A small error, regular enough to stay on the radar.

​

That's why the final review remains mine: I check the output, adjust what wasn't found, and wrap up. The goal was never to eliminate judgment — it was to eliminate the mechanical work that consumed my week.

​

AI did the heavy lifting, but the process design was 100% human. Thinking clearly about the problem before choosing the tool is what made it all work.