A Three-Level Workflow for AI-Generated Web Design

Level One: Escaping Default Styles

To avoid the generic aesthetic common in LLM-generated UIs, developers must move beyond simple prompts. Use OKLCH color spaces instead of RGB or HSL to ensure perceptual lightness and balanced gradients. Explicitly define contrast flows to establish visual hierarchy, and ban common AI-slop fonts like Inter or Geist. The prompt must explicitly list anti-patterns, such as centered CTAs with three feature cards, glassmorphism, and excessive use of Lucide icons, while specifying whether the layout should be symmetric (for professional B2B) or asymmetric (for creative portfolios).

Level Two: Establishing a Design System

Consistency across multiple pages requires decoupling project context from design rules. Maintain two distinct files: claude.md for project-specific information and design.md for the visual system, including typography, layout rhythm, and color tokens. Refine design.md iteratively by cross-verifying it against open-source templates, such as those provided by Google. Integrate external design audit skills that point to actively maintained repositories rather than hard-coded rules to ensure the design system evolves with current best practices.

Level Three: Programmatic Design Testing

Treat design as an engineering task by implementing Test-Driven Development (TDD) before writing implementation code. Use the design.md file as the source of truth for programmatic checks. Implement static tests to catch anti-patterns and use visual regression tools like Playwright to monitor changes. Utilize the Vizzly CLI to run local TDD for UI, which provides pixel-level diffs and metadata. Each rejected diff serves as feedback for the agent, forcing the output to converge toward the desired design rather than the agent's default interpretation.