This Tool Cures Ugly AI Websites

AI-generated websites often share an uncanny resemblance, a design malaise dubbed "AI slop." Characterized by an uninspired uniformity, these interfaces frequently feature the default Inter font, generic purple gradients, ubiquitous nested cards, and bland gray text on colored backgrounds. This "ChatGPT made this" aesthetic has become instantly recognizable, signaling a critical lack of distinctiveness and genuine design thought across the burgeoning AI-driven web.

This pervasive visual sameness isn't arbitrary; it's a direct consequence of how large language models learn. AI design tools are trained on an immense corpus of existing web content—much of it template-driven and, frankly, unremarkable. Without explicit guidance on advanced design principles or an inherent understanding of nuanced aesthetics, these models default to the statistical average. This process leads to a regression to the mean, where AI outputs converge on the most common, least offensive, but ultimately bland design patterns seen across millions of websites. They replicate what they’ve seen most frequently, resulting in safe, functional, but sterile designs that lack originality or character.

Breaking this cookie-cutter cycle requires more than just better prompts; it demands codified design intelligence directly integrated into the AI's workflow. Enter Impeccable, an open-source AI design skill from independent product engineer Paul Bakaus, widely known for creating jQuery UI. Impeccable directly addresses the "slop" problem by injecting deep, expert design knowledge into AI coding harnesses like Claude Code, Cursor, or VS Code Copilot.

Impeccable acts as a sophisticated vocabulary layer, enabling AI to transcend its inherent training data biases. It provides a structured workflow and an explicit list of 37 design anti-patterns, guiding the AI on what *not* to do—like avoiding pure black without tinting or bounce easing. This powerful toolchain enhances the AI's capabilities with: - Seven domain-specific reference files covering typography, color (using OKLCH), spatial design, and motion - Over 20 specialized design commands (e.g., `/polish`, `/typeset`, `/critique`) for precise interactive steering - A systematic approach across `teach`, `shape`, and `craft` subcommands to generating unique, high-quality UIs.

By codifying professional design expertise and explicitly countering common pitfalls, Impeccable empowers AI to build sites that genuinely stand out, moving beyond the generic and into the realm of thoughtfully crafted digital experiences. It’s a crucial step towards curing the epidemic of ugly AI websites.

Architect behind Impeccable is Paul Bakaus, an independent product engineer whose name resonates deeply within web development circles. His impressive career provides the bedrock for Impeccable’s ambitious mission to elevate AI-generated design. Bakaus first gained widespread recognition as the original creator of jQuery UI, a pivotal JavaScript library that profoundly influenced user interface development for over a decade. He later transitioned to Google, where he served as a product lead for Chrome DevTools, a critical suite of tools empowering developers with advanced debugging, performance analysis, and web page inspection capabilities.

This dual experience — crafting fundamental UI components and then building tools to analyze and optimize them — gives Impeccable its uniquely authoritative and opinionated design philosophy. Bakaus possesses an intimate understanding of both the practicalities of front-end implementation and the intricate details of web performance and user experience. This expertise allows Impeccable to transcend basic templating, instead applying a sophisticated, human-curated "deep design knowledge" to critique and refine AI-generated code. It's not merely about adhering to a style guide; it's about embedding decades of design best practices directly into the AI's output.

The open-source community’s enthusiastic reception swiftly validated this expert-driven approach. Impeccable quickly became a sensation, amassing over 10,000 GitHub stars in under four months. This rapid adoption powerfully demonstrates the widespread frustration with generic AI designs and the immediate perceived value of Bakaus’s solution. Developers and designers globally recognized that Impeccable offers a credible, robust pathway out of the "AI slop" era, signaling a significant shift in how we build with AI.

Impeccable represents a paradigm shift beyond mere elaborate prompting; it functions as a comprehensive vocabulary layer for AI design, acting as a true "design skill" for AI agents. This isn't just about crafting a verbose instruction for an AI; it's about equipping the AI with a shared, expert-level design language that bridges the chasm between a user's abstract intent and the AI's concrete execution. Paul Bakaus engineered this system to inject deep design knowledge directly into AI coding harnesses like Claude Code and Cursor, combating the rise of generic "AI slop."

This innovative approach moves past vague directives such as "make it look good," which often result in predictable designs featuring Inter font, purple gradients, and nested cards. Instead, Impeccable provides a structured framework built on two fundamental pillars. First, it explicitly defines anti-patterns, teaching the AI what *not* to do. This curated list contains 37 specific design pitfalls, directly counteracting the pervasive "ChatGPT made this" aesthetic characterized by elements like pure black without tinting, gray text on colored backgrounds, and bounce easing.

Second, Impeccable furnishes the AI with a rich library of what *to* do, encapsulated in seven domain-specific reference files. These cover crucial areas like typography, color and contrast (leveraging OKLCH for precision), spatial design, motion, interaction, responsive principles, and UX writing. Coupled with 20-23 specialized design commands—such as `/polish`, `/typeset`, `/arrange`, `/critique`, and `/audit`—users can precisely steer the AI's output, moving beyond basic HTML structures.

These commands allow for interactive refinement, enabling developers to articulate complex design concepts that AI models inherently understand but often fail to apply without explicit, structured guidance. Impeccable transforms an AI from a passive interpreter of general prompts into an active participant in a sophisticated design conversation, leading to truly unique and professional web interfaces. It ensures AI-generated designs finally break free from their monotonous origins. For a deeper dive into its capabilities and how it revolutionizes AI-assisted design, explore Impeccable: Design Quality for AI.

Impeccable’s battle against generic AI design begins with the `teach` subcommand, the foundational step in Paul Bakaus's structured workflow. Users initiate this command in a blank project directory, prompting a series of targeted questions designed to extract crucial project context. The immediate output is a `product.md` file, a comprehensive document that becomes the AI’s primary source of truth for the entire design process. This file is not merely a summary; it's a living brief that evolves with the project.

This `product.md` file goes far beyond a simple prompt, meticulously detailing the project's purpose, brand identity, and overarching design principles. It captures the intended personality, references to preferred design aesthetics, and a precise definition of the target audience. By gathering these insights upfront, Impeccable ensures the AI understands the project’s core ethos and strategic goals long before generating a single line of code or design element, fundamentally altering its approach to creation.

Crucially, Impeccable's `teach` phase forces a critical distinction between brand design style and product design style. Brand design, often characterized by serif fonts, expressive typography, italics, and rich display elements, suits editorial content, marketing pages, or magazine layouts where conveying emotion and identity is paramount. Conversely, product design favors clean sans-serif fonts, a clear semi-bold hierarchy, and utilitarian aesthetics, ideal for functional applications, dashboards, and software interfaces where clarity and efficiency are key. This deliberate choice profoundly shapes the AI’s subsequent design decisions, aligning outputs with the project's specific functional or expressive needs and preventing stylistic mismatches.

By embedding this rich, granular context and explicit stylistic guidance from the very beginning, Impeccable preemptively steers the AI away from its inherent biases toward generic "AI slop." This initial teaching phase prevents the common pitfalls of repetitive gradients, default typography like Inter, or ubiquitous nested cards that plague AI-generated websites. Instead, it equips the AI with the specific "design skill" and contextual awareness necessary to produce unique, contextually appropriate, and high-quality web interfaces right from the outset, ensuring the final product reflects a deliberate design vision.

Following the initial context-setting with `impeccable teach`, Paul Bakaus's workflow shifts to design planning with `impeccable shape`. This crucial command generates a comprehensive design brief and a detailed UX/UI plan, laying out the website's structure and user experience before any code is written. It ensures a thoughtful, deliberate approach, preventing the AI from producing generic layouts.

During the `shape` phase, the tool leverages visual "probes"—AI-generated images that establish a visual direction. The video demonstrates this with three distinct options, A, B, and C, created using an image model like GPT-Image-2. Users then select their preferred probe, which acts as a foundational aesthetic blueprint, guiding the AI's subsequent design choices and ensuring a unique visual identity.

With the design brief and visual direction firmly established, the process transitions to `impeccable craft`. This command takes the detailed plan and selected probes, translating them into production-ready code. It marks the execution phase, where the AI harnesses its deep design knowledge to build the actual website from the ground up, adhering to the previously defined vision.

`craft` generates highly functional and clean code, specifically utilizing modern frontend frameworks like Astro and Tailwind CSS. This choice of technologies underscores Impeccable's commitment to producing performant, scalable, and easily customizable websites, moving far beyond the simple HTML structures often associated with basic AI output. The result is a robust and developer-friendly codebase.

The initial output quality from `impeccable craft` is notably impressive, far exceeding typical AI-generated "slop." The video showcases sophisticated components, not merely basic static elements. A prime example is a dynamic before/after image slider, demonstrating the AI's capability to generate complex, interactive UI elements that contribute to a polished user experience.

Further complexities include a fully functional accordion for an FAQ section and cleanly presented command installation instructions. The AI even intelligently integrates a placeholder for a test video, anticipating functional needs. While the output is high-quality, the video did identify minor areas for refinement, such as a small "close" button and an awkward command layout, which the subsequent `iterate` phase would address.

Impeccable’s Live mode introduces a paradigm shift in AI-driven web design iteration, described by many as a true game-changer. This alpha feature, activated via `impeccable live`, transforms real-time design adjustments from a developer-centric task into an intuitive, conversational process.

Activating `impeccable live` injects a custom script into the user's live website, establishing a direct connection. A distinct pink overlay then appears over the active webpage, signaling the interactive editing environment. Users simply click any element on the site and issue plain-English commands like "make this text bigger" or "change this button's background to a dark slate gray."

Behind the scenes, the tool connects to the live server, capturing both the user's natural language prompt and the specific target element. This information is then relayed to the AI, which intelligently processes the request against Impeccable’s extensive design knowledge base—including its 37 anti-patterns and seven domain-specific reference files. The AI instantaneously updates the underlying code base, typically Astro and Tailwind in the demonstrated workflow, and the changes reflect on the live site without a page refresh.

This iterative feedback loop empowers users to fine-tune designs with remarkable precision, circumventing the need for deep coding or design expertise. It allows non-designers to achieve pixel-perfect adjustments and ensures the AI builds upon its initial "craft" output, rather than generating entirely new, potentially inconsistent, iterations. This level of granular control and immediate visual feedback represents a significant leap in closing the gap between design intent and AI execution, a vision championed by creator Paul Bakaus.

Impeccable’s genius extends beyond prompting; it’s built on a technical bedrock of curated design principles. Paul Bakaus engineered a system that provides AI models with a comprehensive "design vocabulary," teaching them *how* to design, not just *what* to generate. This deep design knowledge, critical for escaping "AI slop," stems from seven domain-specific reference files. Each acts as a golden standard for critical aspects of user experience and visual aesthetics.

These foundational files empower the AI to transcend generic outputs by providing explicit, structured guidance across key design dimensions. They prevent repetitive patterns, steering the AI toward sophisticated, intentional choices.

The seven pillars of Impeccable design include: - Typography: Defines font families, weights, sizes, and line heights for a cohesive visual hierarchy. This prevents the ubiquitous "Inter font default," ensuring optimal readability and brand expression. - Color: Utilizes the advanced OKLCH color space to establish a robust, perceptually uniform, and accessible palette, crucial for modern interfaces. - Spatial Design: Dictates precise spacing, margins, padding, and layout grids, ensuring balance, visual flow, and a professional, uncluttered appearance. - Motion: Specifies animation curves, durations, and easing, moving beyond jarring default transitions to create fluid, delightful user experiences. - Interaction: Outlines how users engage with elements, from intuitive hover states to clear input feedback, ensuring a seamless and predictable user journey. - Responsive Design: Provides explicit rules for adapting layouts gracefully across diverse screen sizes and devices, guaranteeing a consistent experience on desktop, tablet, and mobile. - UX Writing: Guides the tone, clarity, and conciseness of all on-screen text, enhancing usability and brand voice with every word.

The adoption of OKLCH (Luminance, Chroma, Hue) for color is revolutionary. Unlike traditional RGB or HSL, OKLCH is a perceptually uniform color space. This means changes in its values correspond more accurately to how humans perceive differences in color, luminance, and saturation. Designers create palettes maintaining consistent perceived brightness and vividness, ensuring superior accessibility and visual harmony across light/dark modes, directly combating garish, inaccessible gradients common in AI slop.

By referencing these seven pillars, Impeccable arms the AI with a codified understanding of good design. It avoids 37 identified anti-patterns, proactively building beautiful, functional interfaces from the ground up. This structured input elevates AI from a mere code generator to a true design assistant, capable of producing professional-grade websites that genuinely stand out and reflect a unique vision. The AI no longer guesses; it applies a finely tuned, expert-level framework, making intentional design choices.

Impeccable’s most direct assault on "AI slop" comes through its meticulously curated list of anti-patterns. This isn't just about what AI *should* do, but explicitly what it *must not*. The tool codifies 37 distinct design pitfalls, preventing the generic, repetitive aesthetics that plague many AI-generated interfaces. This comprehensive catalog of "don'ts" acts as a powerful corrective layer.

These codified rules include tangible directives designers often instinctively follow, yet AI frequently overlooks. Impeccable mandates, for instance, "No Inter font without purpose," directly countering the pervasive default font choice that instantly flags a site as AI-generated and lacks distinct brand identity. Such overreliance on defaults stifles creativity and results in visual monotony across the web.

Another crucial rule is "No pure black text." While seemingly minor, this principle pushes for softer, more integrated typography by tinting black with subtle shades, enhancing readability and visual harmony. Pure black text can appear harsh and often creates poor contrast against certain backgrounds, especially in modern UI design which favors softer palettes.

Impeccable also strictly advises to "Avoid nested cards," a common AI habit that quickly clutters layouts and obscures information hierarchy. These visually heavy structures make content harder to scan and understand, diminishing user experience. Similarly, the instruction "No bounce easing on animations" eradicates amateurish, distracting motion effects. Bounce easing, while sometimes playful, often feels unpolished and interrupts the smooth flow of a professional interface, hindering user focus.

These aren't arbitrary stylistic preferences; they stem from deep, established design principles. Paul Bakaus engineered these rules to address fundamental issues like contrast, visual hierarchy, motion design, and brand consistency. By enforcing these constraints, Impeccable elevates AI-generated designs from mere functional output to genuine aesthetic competence and thoughtful user experience.

For development teams striving for consistent quality, Impeccable offers a standalone design quality gate. A dedicated CLI detector allows integration directly into CI/CD pipelines, automatically flagging any generated code that violates these 37 anti-patterns. This proactive policing ensures design integrity is maintained throughout the development lifecycle, preventing substandard UI from ever reaching production and embedding a higher standard of visual excellence.

This systematic rejection of common AI design flaws transforms AI from a source of visual monotony into a powerful assistant for creating distinctive, high-quality web experiences. It imbues the AI with an understanding of negative space, tasteful typography, and subtle interaction design, moving beyond mere functional output to truly informed design.

Impeccable champions versatility, operating as a model-agnostic design skill. It integrates seamlessly with a range of AI coding harnesses, extending their capabilities beyond generic output. Developers can leverage its power with tools like Claude Code, Cursor, Codex CLI, and Gemini CLI, ensuring broad applicability across different AI ecosystems.

While powerful, Impeccable's extensive design context files introduce a significant practical consideration: token consumption. The detailed design principles, anti-patterns, and project-specific knowledge it injects into the AI's prompt can be exceptionally costly. Running Impeccable on token-sensitive models, particularly those with higher per-token rates like Claude, will quickly accrue expenses for larger projects.

Strategic harness selection becomes paramount for cost-effective development. Tools offering more generous token limits or integrated functionalities, such as Codex CLI with its potential for built-in image generation, often present a more economical choice. This allows users to fully utilize Impeccable's design probes and iterative capabilities without prohibitive operational costs.

Adopting Impeccable for significant design projects necessitates a clear-eyed assessment of your chosen AI engine's pricing structure. Balancing design quality with budget is key, especially when iterating on complex UIs like the cinematic film tool landing page demonstrated in the video. For those looking to explore a real-world application, the underlying code for that project can be found at Orva-Studio/hance: Cinematic Tool. This foresight ensures that Paul Bakaus's vision for curing "AI slop" remains accessible and sustainable for dedicated practitioners.

Paul Bakaus's Impeccable transcends a mere utility, inaugurating a new paradigm in AI development: skill layers. This innovative framework doesn't just prompt an AI; it imbues generalist models with deep, actionable knowledge for specific domains. It transforms raw generative power into refined, expert execution, moving beyond generic outputs towards truly specialized results.

This architectural approach holds immense potential across the entire development stack. Envision similar skill layers guiding AI in generating robust, scalable backend architectures, adhering to strict enterprise standards. Imagine them designing intuitive and consistent API specifications, complete with comprehensive documentation, or meticulously optimizing complex database schemas for peak performance and long-term maintainability. Each layer would codify best practices and explicit anti-patterns, much like Impeccable’s comprehensive list of 37 design pitfalls.

This vision points to a future where developers don't just send open-ended prompts to a generalist AI, but instead collaborate with an intelligence possessing profound domain-specific expertise. Existing AI coding harnesses such as Claude Code, Cursor, Codex CLI, and Gemini CLI, currently serving as powerful general-purpose assistants, would evolve into sophisticated platforms. They would seamlessly integrate these expert skill sets, enabling them to tackle highly specialized tasks with unprecedented quality and nuance, far surpassing current capabilities.

Developers would effectively "install" new, professional-grade capabilities directly into their AI tooling, elevating the entire development process beyond basic code generation. This shift represents a profound evolution in human-AI collaboration: moving from simply asking an AI to "do a task" to engaging with an AI that has been meticulously "taught an expert craft." Impeccable, with its structured `teach`, `shape`, `craft`, and `live` workflow, alongside its codified design intelligence, charts the course for this next era of AI-assisted software engineering.

What is Impeccable?

Impeccable is a free, open-source AI design skill created by Paul Bakaus. It acts as a 'vocabulary layer' for AI coding assistants like Claude, helping them create high-quality, non-generic websites by providing deep design knowledge and flagging common design anti-patterns.

Who created Impeccable?

Impeccable was created by Paul Bakaus, a respected product engineer known for creating the jQuery UI library and his work at Google on Chrome DevTools.

How does Impeccable work?

It uses a structured workflow with commands like 'teach', 'shape', and 'craft', along with reference files on design principles (typography, color, etc.) and a list of 37 anti-patterns to guide the AI away from producing generic 'slop'.

Is Impeccable free to use?

Yes, Impeccable is an open-source tool available under the Apache 2.0 license. However, using it with AI models will incur token costs from your AI service provider (e.g., Anthropic for Claude, OpenAI for GPT).