website-homepage-design-pro

# Website Homepage Design PRO Use this skill for premium homepages where brand perception, conversion, and production quality all matter. Goal: produce a homepage that feels intentional, differentiated, and implementation-ready instead of a generic SaaS template. ## Workflow 1. Identify the homepage job: brand awareness, product education, lead conversion, hiring, investor trust, or enterprise credibility. 2. Define the first-screen promise: audience, pain, value, proof, and action. 3. Choose a visual direction before layout: editorial, luxury tech, industrial, playful product, data-rich, cinematic, or boutique studio. 4. Build a narrative sequence: promise -> proof -> product depth -> differentiation -> trust -> action. 5. Design the responsive behavior for hero, navigation, proof bands, media, and CTA priority. 6. Provide implementation notes: layout grid, component breakdown, motion intent, imagery treatment, and accessibility checks. ## Required output - A homepage concept with a clear positioning sentence. - A section-by-section structure with the purpose of each section. - Concrete visual direction: typography, color logic, spacing rhythm, imagery style, and motion. - CTA hierarchy and conversion path. - Mobile adaptation notes. - Risks or tradeoffs, especially around credibility, performance, and content gaps. ## Design rules - The first viewport must explain who this is for, why it matters, and what to do next. - Use one dominant hero idea, not a collage of unrelated cards. - Proof must appear before heavy feature explanation when trust is important. - Avoid flat feature grids unless the product category already has strong awareness. - Every section should change the visitor's understanding, not just decorate the page. - Prefer strong art direction over interchangeable gradients. ## Final checks - Can a first-time visitor repeat the value proposition after five seconds? - Does the page feel specific to the brand, not reusable for any startup? - Are proof, product, and CTA ordered according to user doubt? - Would a frontend engineer know what components and states to build?