📝 Originally published (in Japanese) at forge.workstyle.tech.
Have you ever been hit by a wave of anxiety after implementing a UI based on a mockup?
You might think, "I tried to build it as faithfully as possible, but is it really matching the design?" As the person doing the implementation, it is easy to overlook small compromises made during coding or details missed in the mockup.
This is the inherent limitation of self-reviewing your own code.
When humans work together, having multiple people involved increases the number of perspectives.
My approach—which I introduce in this article—is to replicate this by running multiple AI agents.
By having several independent review agents evaluate how faithfully your implementation matches the mockup (in terms of layout structure, positioning, and component mapping), you can reinforce the single review with multi-angled verification.
Why "One" is Not Enough Self-reviewing by the original implementer has structural weaknesses: Confirmation Bias — Since you already have the memory of "how you built it," you tend to view the mockup in a way that justifies your own implementation.
Reproduction of Oversights — If you missed a specific element in the mockup during implementation, you are likely to miss it again during review for the same reasons.
Fixed Perspectives — Being alone can lead to cognitive bias; for example, you might focus too much on "are the colors correct?" while overlooking the "hierarchical structure of the layout." Even if you ask a single AI agent to "compare the mockup and the implementation," you will encounter similar issues, albeit to a lesser degree.
A single response tends to lean toward one perspective; if you ask it to look at too many things at once, each individual check becomes shallow.
The solution is to split the perspectives and assign them to multiple agents.
Instead of asking one agent to look at everything, assign each agent a specialized role and have them run independently.
Workflow: Parallel Review via Divided Perspectives
1.
Define the Review "Axes" First, break down the criteria for evaluating mockup fidelity.
For UI design adherence, you might divide it like this: Layout Structure — Does the overall grid, column configuration, and area division match? (e.g., the skeleton: a 2-column layout where the right column is further split vertically).
Element Placement and Hierarchy — Which elements are placed in which area, and in what order/nesting?
Component Mapping — Are all the parts from the mockup (sliders, charts, previews, lists, etc.) present in the implementation without excess or deficiency?
Visual Tone — The visual quality, such as color, spacing, and typography.
The key is to explicitly separate these axes.
Because each agent focuses solely on its assigned axis, it can perform a deep dive.
2.
Assign Independent Agents to Each Axis Launch one specialized review agent for each axis.
While you provide the same materials to everyone—the mockup (image or specs) and the implementation (the relevant component code or the actual rendered screen)—the instructions (prompts) must be specialized for the assigned axis.
For example, for the Layout Structure agent, you might instruct: "Ignore colors and text.
Only compare the structural division of areas between the mockup and the implementation and list any discrepancies." This forces the agent to focus strictly on the skeleton without getting distracted by other details.
Crucially, you must run the agents independently.
If they can see each other's conclusions, they will be influenced by one another, defeating the purpose of having independent perspectives.
This is the same logic used in human code reviews: writing down your own comments before looking at what others have said.
3.
Reconcile and Integrate Findings A human (or an integration agent) then reconciles the feedback provided by each agent.
You should look for three main types of findings: Findings reported by multiple agents independently — High re