Give coding agents clear design directives and filter out AI monotony
When you tell a coding agent to go 'bolder,' it knows exactly which direction to take. This tool translates design instructions into clear commands and checks the quality of finished screens. It reduces the monotonous layouts and repetitive visual elements that AI often produces, allowing you to focus on creating more distinctive interfaces.
Common design mistakes made by AI
If you ask a coding agent to build a page without specific instructions, certain patterns appear repeatedly. Examples include cream backgrounds with thin serif fonts, gradients transitioning from purple to blue, and card structures nested inside other cards. These elements appear frequently regardless of the model or project, causing results to look similar. This tool focuses on identifying and correcting these boring design elements, often referred to as 'AI slop.'
Tuning design direction with commands
The tool converts design intent into specific commands for the agent. For example, bolder makes safe designs more intense, while quieter softens excessive elements. polish performs final refinements before release, and harden checks edge cases like error handling and internationalization. Each command loads a playbook to solve specific design problems, guiding the agent to perform precise tasks without guessing.
Verifying quality through review and audit
After the design is complete, quality is evaluated using the critique and audit commands. critique scores the design based on usability heuristics and lists items that need priority fixes in order. audit technically checks accessibility, performance, theme settings, and responsive behavior, reporting found issues with grades from P0 (blocker) to P3 (polish). This process helps discover functional defects in real usage environments, not just visual flaws.
Detecting slop with 62 rules
A core feature of this tool is a deterministic rule-based slop detector. 62 rules automatically find issues such as excessive font usage, low contrast, dense padding, and skipped headings. This detection process does not require an LLM or API key, so it can run in real-time inside a coding agent or independently in a CI pipeline. Hooks automatically check files whenever the agent modifies them, preventing problematic code from being included in the final output.
Things to check before adoption
This tool is most effective at improving existing interfaces. While it can create new pages from scratch, it is more effective to specify existing components and improve them iteratively. During installation, it detects your coding tool (such as Claude Code, Cursor, or Codex) and guides you to enable design hooks. Live mode only works on local checkouts and should not weaken the CSP of deployed sites or production environments. Telemetry can be disabled, but requests to fetch data from the visual direction catalog will still occur, so be aware of this.
