## Anti-AI / Anti-Vibe-Coding Design Requirements

The interface must NOT visually resemble a generic AI-generated, Vibe-Coded, or template-driven SaaS website.

The objective is not to avoid AI-assisted development. The objective is to avoid the generic visual patterns produced when AI models fall back to common design defaults.

### 1. Forbidden default visual patterns

Do not use the following patterns as the default design language:

- Purple-to-indigo gradients
- Purple-to-blue gradients
- Purple-to-pink gradients
- Neon purple/cyan combinations
- Large purple or blue glowing blobs
- Gradient text, especially purple/blue gradient text
- Excessive background glow
- Glassmorphism as the primary visual language
- Excessive backdrop blur
- Excessive use of transparent/glass cards
- Dark AI-style interfaces using purple + cyan neon accents
- Decorative 3D AI spheres, neural networks, floating particles or abstract AI illustrations without a product-specific purpose

Purple must not automatically be treated as the primary color for "modern", "AI", "premium", or "innovative".

### 2. Typography

Do not automatically use Inter, Roboto, Open Sans, Arial, or system fonts as the complete visual identity.

Typography must be intentionally selected according to:

- product category
- target audience
- brand personality
- content density
- accessibility
- visual hierarchy

Use a deliberate typography system rather than relying on framework defaults.

Avoid excessive use of:

- 800/900 font weights
- extremely large centered headings
- identical typography hierarchy across every page

### 3. Hero section

Do not use the standard AI-generated SaaS hero pattern:

- centered hero
- eyebrow/pill badge
- huge headline
- generic subtitle
- two centered CTA buttons
- purple gradient background
- glowing blobs
- floating dashboard mockup

Hero composition must be designed specifically around the product.

Prefer product-specific visual storytelling, meaningful content hierarchy, editorial composition, or asymmetric layouts when appropriate.

### 4. Cards

Do not automatically use three identical cards in a row.

Avoid repetitive:

- icon
- heading
- two-line description
- rounded rectangle
- subtle shadow

patterns.

Cards must have a clear information hierarchy and must only be used where they improve comprehension.

Different content types should not be forced into identical card structures.

### 5. Border radius

Do not use the same large border radius everywhere.

Border radius must follow a hierarchy.

Examples:

- Inputs: small radius
- Buttons: small/medium radius
- Cards: medium radius
- Modals: medium radius
- Avatars: circular

Avoid applying `rounded-2xl`, `rounded-3xl`, or `rounded-full` indiscriminately.

### 6. Pills and badges

Do not use decorative pills or badges as visual filler.

Avoid repeated labels such as:

- AI Powered
- Next Generation
- New
- Beta
- Built for founders
- Powerful
- Smarter
- Future of work

Badges must communicate real information.

### 7. Icons

Do not create a repeated structure where every feature is represented by:

icon → colored square → heading → description.

Icons must be used according to semantic meaning and information hierarchy.

Icon libraries may be used, but their default presentation must be adapted to the product design system.

### 8. Layout

Avoid excessive use of:

- three-column grids
- four-column grids
- perfectly symmetrical sections
- identical card dimensions
- repeated centered sections
- predictable alternating sections

Use layout variation intentionally:

- asymmetric layouts
- editorial compositions
- variable content widths
- meaningful whitespace
- visual hierarchy
- product-specific grouping

### 9. Animation

Do not animate every component.

Avoid applying the same:

- fade-up
- fade-in
- scale
- slide-up
- hover-scale
- floating animation

to every section.

Animations must have a functional purpose such as:

- state feedback
- navigation
- spatial continuity
- focus
- progressive disclosure

### 10. Copywriting

Do not use generic AI-generated SaaS copy.

Avoid phrases such as:

- "Transform your workflow"
- "Unlock your potential"
- "Supercharge your productivity"
- "The future of..."
- "Next-generation platform"
- "Powerful AI"
- "AI-powered"
- "Seamless"
- "Effortless"
- "Built for the future"
- "Revolutionize your workflow"

unless the wording is genuinely relevant to the product.

Copy must describe actual product capabilities, actual benefits, actual workflows, and actual user problems.

### 11. Dashboard design

Do not create generic dashboard mockups simply to make the landing page look sophisticated.

Dashboard visualizations must represent real product functionality.

Avoid generic combinations of:

- KPI cards
- generic line chart
- generic bar chart
- fake user avatars
- fake notifications
- fake activity feed

when these elements do not represent actual product functionality.

### 12. Design-system defaults

Framework defaults must not become the product's visual identity.

Tailwind CSS, Bootstrap, shadcn/ui, Radix UI, Laravel UI components, icon libraries, or other component libraries may be used for implementation.

However:

> The implementation framework must remain invisible as a visual identity.

Components must be customized according to the product's own design tokens.

### 13. Design originality requirement

Before implementing a page, define:

- color system
- typography system
- spacing scale
- border-radius scale
- elevation/shadow system
- component language
- iconography
- layout principles
- interaction principles
- image/illustration direction

The AI must not invent these decisions independently from generic web-design defaults.

### 14. Product specificity test

Every major visual decision must answer at least one of these questions:

1. Why does this help this specific product?
2. Why does this help this specific user?
3. Does this communicate actual product functionality?
4. Does this reinforce the product's brand?
5. Does this improve usability or comprehension?

If a visual element exists only because it "looks modern", remove it.

### 15. Anti-AI visual audit

Before considering a page complete, perform an anti-AI design audit.

Flag the page if it contains several of the following simultaneously:

- Purple/indigo gradient
- Inter-only typography
- Centered hero
- Two generic CTA buttons
- Three identical feature cards
- Large rounded cards
- Glassmorphism
- Purple glow
- Decorative blobs
- Excessive pills
- Generic AI copy
- Generic dashboard mockup
- Repeated Lucide-style icon cards
- Excessive animations
- Identical section structures
- Generic SaaS footer
- Gradient buttons
- Gradient text

A single pattern does not automatically indicate AI-generated design.

The objective is to prevent the accumulation of multiple generic patterns that create a recognizable AI-generated aesthetic.

### 16. Core principle

Do not ask:

"How can we make this website look modern?"

Ask:

"How can we create a visual language that is specific to this product, its users, its domain and its brand?"

The final interface must look like a deliberate product design, not like the statistical average of modern SaaS websites.