Three Steps to Stop AI Coding Agents Shipping Design Slop

My notes

Summary

A 3-step method for getting AI coding agents (specifically Claude Code) to produce web designs that don’t look like generic “AI slop”: build a personal design-inspiration library, install a skill that constrains the agent’s design defaults, and iterate visually through a built-in “tweaks” panel instead of prompting blind in the terminal.

Key Insight

• Step 1 - encode taste as data, not vibes. Collect reference designs from X, Dribbble, and Pinterest, then have the agent build a structured “inspiration library” from them. The agent references this library at build time instead of falling back on its own (generic) design defaults.
• Step 2 - patch the agent’s default taste with a skill. Out of the box, coding agents like Claude Code default to a recognizable “AI slop” visual style. The video names a specific free, open-source skill called “Impeccable” (searchable on GitHub) built to counter this. It also ships a live web-designer mode, so components can be adjusted visually on localhost instead of only through text prompts.
• Step 3 - build a “tweaks” panel instead of one-shotting. Rather than repeatedly prompting “make it more premium” in the terminal, have the agent generate a dedicated tweaks/settings section in the build itself, sliders and toggles for things like headline size, animation speed, and bounce/easing effects. This turns design iteration into direct visual manipulation, similar to Claude’s own design/artifact tweak panels, and is described as much faster than terminal-based back-and-forth.
• Underlying principle: AI design output quality is bottlenecked by (a) what reference taste the model has access to, and (b) how directly you can manipulate the visual result, not by prompt wording alone.