Why AI Apps Look "AI-Generated"
AI-built apps have a recognizable look: inconsistent spacing, random colors, and generic layouts. Here's how to fix it.
1. Spacing System
AI randomly picks padding values. Standardize:
Section padding: py-20 px-6
Card padding: p-6
Button padding: px-6 py-3
Gap between elements: gap-4 or gap-6
2. Color Palette
Define 3-5 colors and stick to them:
Primary: bg-primary / text-primary-foreground
Secondary: bg-secondary / text-secondary-foreground
Muted: bg-muted / text-muted-foreground
Accent: bg-accent / text-accent-foreground
Destructive: Only for delete/cancel actions
3. Typography Hierarchy
H1: text-4xl sm:text-5xl font-heading font-bold
H2: text-3xl font-heading font-bold
H3: text-xl font-heading font-semibold
Body: text-base text-muted-foreground
Small: text-sm text-muted-foreground
4. Border Radius Consistency
Pick one: rounded-lg, rounded-xl, or rounded-2xl. Use it everywhere.
5. Shadow System
Use the same shadow on similar elements. Don't mix shadow-sm, shadow-md, and shadow-lg randomly.
