---
name: Popular Web Designs
skill_id: popular-web-designs
description: Guides reference-aware website and landing-page work so the result feels intentional, current, and product-grade instead of generic.
version: 1.0.0
source_kind: elephant-builtin
aliases: ["popular web designs", "modern web design", "landing page design"]
trigger_phrases: ["make this look like a modern product site", "improve the landing page design", "give this website more product feel"]
keywords: ["web design", "landing page", "product", "ui", "responsive", "references"]
category: creative
---

# Popular Web Designs

Use this built-in skill when the task is a website or landing-page redesign that should feel current and product-grade.

## Core rules

- Start from the existing brand, content hierarchy, and user journey before styling.
- Choose one clear visual direction instead of blending generic trends together.
- Make desktop and mobile feel designed, not merely compressed.
- Prefer strong spacing, typography, and contrast decisions over decorative clutter.

## Default workflow

1. Identify the page goal, audience, and strongest content priority.
2. Pick a concrete visual direction and apply it consistently.
3. Ensure the first screen communicates the product fast.
4. Validate the layout, navigation, and motion on mobile and desktop.

## Guardrails

- Do not ship a reference mashup with no coherent hierarchy.
- Do not let hero treatment bury the main content.
- Do not leave responsive behavior as an afterthought.
