web-design-patterns
Installation
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.