web-design-patterns

SKILL.md

Principle-based design patterns for website sections that avoid AI-generated aesthetics.

Covers five core section types: heroes, cards, CTAs, trust signals, and testimonials with context-specific guidance for different business types

Teaches WHY and WHEN to use each pattern, not just templates; includes explicit anti-patterns like democratic design, perfect symmetry, and generic copy

Provides cross-cutting principles on hierarchy, asymmetry, and restraint that apply across all patterns

Includes ethical rules for lead-gen sites, prohibiting fabricated ratings, years in business, and named individuals; offers safe alternatives instead

Load-on-demand reference structure with five detailed guides (350–550 lines each) covering constraint-based creativity, grid math, trust psychology, and placement strategy

Web Design Patterns

Principle-based patterns for designing website sections that feel human-designed, not AI-generated. Each pattern teaches WHY and WHEN, not just templates to copy.

What You Produce

Well-designed website sections: heroes, card layouts, CTAs, trust signals, and testimonials that match the business context and avoid the "AI skeleton" look.

When to Read Which Reference

Building this...
Read this reference

Homepage hero, page headers, landing pages
references/hero-patterns.md

Service cards, team grids, pricing tiers, portfolios
references/card-patterns.md

Conversion sections, buttons, banner CTAs
references/cta-patterns.md

Credibility: badges, licences, reviews, guarantees
references/trust-signals.md

Customer reviews, social proof, quote sections
references/testimonial-patterns.md

Load on demand — don't read all five for every project. Read the one(s) relevant to the current section.