Skills

web-design-patterns

Installation
Summary

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
SKILL.md

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.

Related skills

More from jezweb/claude-skills

Installs
464
Repository
jezweb/claude-skills
GitHub Stars
776
First Seen
Feb 18, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass