mr-q526 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
- Identify the homepage job: brand awareness, product education, lead conversion, hiring, investor trust, or enterprise credibility.
- Define the first-screen promise: audience, pain, value, proof, and action.
- Choose a visual direction before layout: editorial, luxury tech, industrial, playful product, data-rich, cinematic, or boutique studio.
- Build a narrative sequence: promise -> proof -> product depth -> differentiation -> trust -> action.
- Design the responsive behavior for hero, navigation, proof bands, media, and CTA priority.
- 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?