How I Design UI with Help of AI Tool, Without Ending up With Slop

2026-06-19 · Source: Towards AI - Medium · Field: Technology & Digital — Artificial Intelligence & Machine Learning, Software Development & Engineering · Depth: Intermediate, medium

Summary

AI UI generation often results in "slop" – generic, similar-looking designs across different tools. The author tested six AI tools with an identical brief for an AI agent workspace app, observing consistent design elements like indigo accents, rounded stat cards, Inter font on an 8px grid, robot glyphs, and colored status pills. This occurs because AI tools invent a new, generic design system for each screen instead of working within an established one. To combat this, the author proposes a "system-first" approach: building a comprehensive design system (color, foundation, spacing, components) before generating screens. By using Moonchild to establish the design system and then Antigravity to generate screens from an exported markdown file, the author successfully created a consistent product demo for Softworker, significantly reducing post-generation refinement. While requiring upfront effort in system building and some technical adjustments, this method shifts the designer's role from fixing AI guesses to directing its output.

Key takeaway

For product designers or AI product managers aiming to integrate AI into UI design without sacrificing brand identity, you must adopt a "system-first" approach. Instead of prompting for screens and hoping for consistency, define your design system—colors, typography, components—upfront. This shifts your role from fixing generic AI output to directing it, ensuring generated UIs align with your product's unique language and significantly reducing post-generation refinement work.

Key insights

AI UI generation produces "slop" due to inventing new, generic design systems; a system-first approach ensures consistency.

Principles

• AI UI "slop" stems from generic defaults.
• System-first design prevents AI invention.
• AI shifts design effort, not eliminates it.

Method

Build a comprehensive design system (color, foundation, spacing, components) in a tool like Moonchild, then export and feed it to a screen generation tool like Antigravity.

In practice

• Define design system elements before prompting.
• Utilize tools like Moonchild for system creation.

Topics

• AI UI Design
• Design Systems
• Generative AI
• Moonchild
• Antigravity
• Product Design Workflow
• UI Consistency

Best for: Product Designer, AI Product Manager

Related on AIssential

• The Anti-Slop UI Design Process for Vibe Coders — The core issue in UI "slop" is design inconsistency across screens, not individual screen quality.
• Claude Design: Is it Game Over for UI Designers? — AI automates design production, shifting human designers to strategic curation and refinement.
• Generic AI prototyping tools don't know your design system, and that creates "blurple slop" — Inconsistent design arises when new tools lack integration with established design systems.
• Plastic User Interfaces — AI facilitates dynamic, custom-tailored user interfaces that adapt to specific needs, evolving beyond fixed or headless systems.
• A2UI v0.9: The New Standard for Portable, Framework-Agnostic Generative UI — A2UI v0.9 standardizes generative UI, allowing AI agents to dynamically create interfaces using existing component catalogs across platforms.
• Design OS: Greatest AI Design System! Build Beautiful Websites and Apps EASILY! — Design OS separates UI design from AI coding to produce high-quality, intentionally designed frontends.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by Towards AI - Medium.