LoupeNo. 028

I created Loupe to help agents and their humans use design systems more effectively. I found that agents would constantly write code that rendered correctly but was full of latent debt that would break and decay over time. The errors were almost always issues that required comparing more than one file combined with knowledge of the design system i.e using custom css to style a component instead of a built-in prop, using a raw html element where a system component was available. Creating a new pattern where an existing one should be used instead. All things that can pass visual tests and basic linting and potentially ship to production if designers aren't in the loop inspecting the code.

I found that once enough of these errors were in the codebase the inertia of the status quo would severely hamper future agents from doing things correctly, even when directly instructed to do so. Errors were frequently assumed to be intentional and agents would repeatedly defend bad implementation decisions as needed.

Loupe provides a way to programmatically check for bad usage patterns and reliably enforce fixes as they are being written. It catches basic things like hard-coded style values and bore abstract things like creating new interaction patterns where existing ones should be used instead. It supports checking with a combination of scripted pattern matching and inference-based auditing, depending on the use case. Together with hard enforcement and tools for effective mitigation it helps keep everyone's agents on the rails and serves as a very practical and effective method of documenting and enforcing a design system in production.