Improving AI Agent UI Design Through Pattern Recognition
AI Engineergo watch the original →
the gist
Avoid generic AI-generated UI by codifying 'slop' patterns, using screenshot-based inspiration, and iterating with smaller, faster models rather than relying on one-shot prompts.
Identifying and Blocking AI Slop
Generic AI-generated interfaces often suffer from predictable aesthetic markers, including purple gradient backgrounds, italicized headers, all-caps pills with wide letter spacing, and excessive use of emojis. Hassan El Mghari developed a tool called Hallmark to codify these patterns as 'slop gates,' preventing the model from applying them during generation. By explicitly naming these visual tells, developers can instruct agents to avoid them, resulting in cleaner, more professional base outputs.
Iterative Design Workflows
Rather than relying on one-shot prompts, developers should treat AI output as a starting point for iterative refinement. Using smaller, faster open-source models like GLM 5.2 for iteration cycles is often more efficient than using larger, expensive models like Opus 4.8. Effective iteration requires breaking complex projects into smaller segments, sending only one or two features per prompt to maintain focus. Developers should maintain an AGENTS.md or a dedicated skill file to store accumulated design preferences, ensuring the agent consistently adheres to a preferred style across sessions.
Leveraging Visual Inspiration
High-quality design output is heavily dependent on providing the model with concrete visual context. The most effective strategy is maintaining a personal vault of screenshots from admired apps and websites. When initiating a project, provide the agent with a mix of these references to guide the aesthetic direction. Additionally, move away from short prompts in favor of detailed, multi-paragraph descriptions, often generated via voice notes, to provide the agent with comprehensive instructions regarding user flow, feature requirements, and visual style.