Skip to content
BSWEN
Blog

How to Stop AI Coding Assistants from Generating Repetitive UI Designs

Cowrie
Cowrie
Dev @ Bswen

Problem

I noticed something frustrating: all my projects started looking the same.

I use AI coding assistants like Codex and GitHub Copilot, and they keep generating similar UI designs. Same button styles. Same card layouts. Same color schemes. Even when I’m building different types of applications.

Here’s what I was seeing:

  • Every app had the same generic card components
  • Button styles were identical across projects
  • Layouts followed the same patterns regardless of purpose
  • My brand identity was getting lost

Why This Happens

AI coding assistants have a few limitations that cause this problem:

  • Training data bias: They’re trained on popular patterns and default to common solutions
  • No design memory: Each project starts fresh without knowing my previous choices
  • Safe defaults: Without constraints, they fall back to generic Bootstrap-like patterns

I realized I needed to give the AI better constraints.

Solution 1: Build a Design System

The first thing I did was create a design system with tight design tokens. This gives the AI specific values to use instead of making generic choices.

Design Tokens

I created a tokens file that defines all my design decisions:

design/tokens.ts
export const tokens = {
  colors: {
    primary: {
      50: '#EFF6FF',
      500: '#3B82F6',
      900: '#1E3A8A',
    },
    neutral: {
      white: '#FFFFFF',
      black: '#000000',
      gray: {
        100: '#F3F4F6',
        500: '#6B7280',
        900: '#111827',
      }
    }
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  typography: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace'],
    },
    fontSize: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
    }
  },
  borderRadius: {
    sm: '4px',
    md: '8px',
    lg: '12px',
    full: '9999px',
  }
} as const

Now the AI has specific values to reference instead of guessing.

Component Library Structure

I organized my components into a clear structure:

Component library structure
/components
  /layout
    - Container.tsx
    - Grid.tsx
    - Stack.tsx
  /typography
    - Heading.tsx
    - Text.tsx
    - Caption.tsx
  /inputs
    - Button.tsx
    - Input.tsx
    - Select.tsx
  /feedback
    - Alert.tsx
    - Toast.tsx
    - Modal.tsx
  /data-display
    - Card.tsx
    - Table.tsx
    - List.tsx

Reusable Button Example

Here’s how I built a button component that the AI must use:

components/inputs/Button.tsx
import { tokens } from '@/design/tokens'
import { cva, type VariantProps } from 'class-variance-authority'


const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
  {
    variants: {
      variant: {
        primary: 'bg-primary-500 text-white hover:bg-primary-600',
        secondary: 'bg-neutral-gray-100 text-neutral-gray-900 hover:bg-neutral-gray-200',
        outline: 'border border-primary-500 text-primary-500 hover:bg-primary-50',
        ghost: 'text-primary-500 hover:bg-primary-50',
      },
      size: {
        sm: `h-8 px-${tokens.spacing.sm} text-${tokens.typography.fontSize.sm}`,
        md: `h-10 px-${tokens.spacing.md} text-${tokens.typography.fontSize.base}`,
        lg: `h-12 px-${tokens.spacing.lg} text-${tokens.typography.fontSize.lg}`,
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
)


interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  children: React.ReactNode
}


export function Button({
  variant,
  size,
  className,
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={buttonVariants({ variant, size, className })}
      {...props}
    >
      {children}
    </button>
  )
}

Solution 2: Configure AI Rules

I created a skill file that tells the AI exactly how to handle UI:

.claude/skills/ui-design-system.md
# Design System Skill


## Rule 1: Use Design Tokens Only
- ALWAYS use tokens from `/design/tokens.ts`
- NEVER hardcode colors, spacing, or typography values
- Reference: `tokens.colors.primary`, `tokens.spacing.md`


## Rule 2: Component-First Approach
- ALWAYS use existing components from `/components`
- NEVER create new components without checking existing ones
- If component doesn't exist, create following design system patterns


## Rule 3: Layout Patterns
- Use Grid for multi-column layouts
- Use Stack for vertical/horizontal spacing
- Container for page-level constraints


## Rule 4: Style Consistency
- Match existing component styles
- Use Tailwind utility classes from allowed list
- Follow established naming conventions

This skill file gets loaded every time I ask the AI to build UI components.

Solution 3: Use Established UI Libraries

I also found that using battle-tested UI libraries helps a lot. They provide consistent patterns that constrain the AI’s choices.

Libraries I recommend:

  1. shadcn/ui - Copy-paste components, fully customizable
  2. Mantine - Comprehensive, accessible, great documentation
  3. Chakra UI - Simple, modular, excellent theming
  4. Radix UI - Unstyled primitives for custom designs

Why this works:

  • Pre-built design decisions reduce the AI’s “creative freedom”
  • Consistent API patterns are easier for AI to follow
  • Less code generation means fewer opportunities for repetition
  • Community-tested designs are usually better than AI defaults

What Changed

After implementing these solutions, my projects stopped looking identical:

  • Each app now has its own visual identity
  • Components are consistent within each project
  • Less time spent fixing generic AI designs
  • Easier to maintain brand consistency

Common Mistakes

MistakeBetter Approach
Writing long prompts each timeCreate reusable skills/rules
No design foundationBuild tokens and components first
Reinventing every componentStart with shadcn/ui, customize later
Accepting all AI outputValidate against design rules
No naming conventionsEnforce conventions through config

Summary

In this post, I showed how to prevent AI coding assistants from generating repetitive UI designs. The key point is building a design system with tight tokens, configuring your AI tool with specific rules, and leveraging established UI libraries. Start by creating your design tokens and component library, then configure your AI assistant to reference them.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

Comments

Tags: