Website Homepage Design
Use this skill for branded homepages where first impression, positioning, and trust are the main jobs.
Goal: make the brand memorable in one screen, explain the offer quickly, and guide visitors into the right next step.
Homepage model
Default sequence:
- Hero: brand, value proposition, CTA, dominant visual
- Credibility: proof, customers, metrics, or press
- Capabilities: what the product or company does best
- Product or service depth: workflow, differentiators, or featured work
- Trust block: testimonial, case study, security, or social proof
- Final CTA: contact, start, book, or explore
Hero rules
- The brand or product name must be unmistakable.
- Use one visual anchor only: image, scene, device render, or typographic composition.
- Keep headline length short enough to scan in one glance.
- CTA should appear as soon as the value proposition lands.
- Avoid a dashboard collage unless the product itself is the visual story.
Section rules
- Each section gets one message and one visual idea.
- Put proof before detailed explanation when trust is the blocker.
- Use featured examples or use cases instead of generic feature grids when possible.
- Keep page rhythm varied: full-bleed section, compressed proof band, narrative detail block.
- Footer should close with action, orientation, and essential navigation only.
Navigation and responsive behavior
- Global nav should reflect the real information architecture, not every possible link.
- Sticky headers must not steal too much viewport from the hero.
- On mobile, collapse complexity fast and keep the first CTA reachable.
- Do not let decorative media push the headline or CTA below the fold.
Reject these failures
- Hero cards, stat strips, and logo clouds all fighting in the first viewport
- Brand buried under oversized headline copy
- Generic SaaS sections repeated without narrative progress
- Placeholder stock imagery that weakens credibility
- Multiple accent colors with no brand logic
Final checks
- Is the brand unmistakable in the first viewport?
- Can a first-time visitor explain what the company does after one scroll?
- Does the homepage move from promise to proof to action cleanly?
1---2name: website-homepage-design3description: Use when the task is to design a branded homepage, 官网首页, company website, startup homepage, product website, or corporate front page. Focus on brand hierarchy, hero composition, proof sequencing, section rhythm, and clear conversion paths.4---56# Website Homepage Design78Use this skill for branded homepages where first impression, positioning, and trust are the main jobs.910Goal: make the brand memorable in one screen, explain the offer quickly, and guide visitors into the right next step.1112## Homepage model1314Default sequence:15161. Hero: brand, value proposition, CTA, dominant visual172. Credibility: proof, customers, metrics, or press183. Capabilities: what the product or company does best194. Product or service depth: workflow, differentiators, or featured work205. Trust block: testimonial, case study, security, or social proof216. Final CTA: contact, start, book, or explore2223## Hero rules2425- The brand or product name must be unmistakable.26- Use one visual anchor only: image, scene, device render, or typographic composition.27- Keep headline length short enough to scan in one glance.28- CTA should appear as soon as the value proposition lands.29- Avoid a dashboard collage unless the product itself is the visual story.3031## Section rules3233- Each section gets one message and one visual idea.34- Put proof before detailed explanation when trust is the blocker.35- Use featured examples or use cases instead of generic feature grids when possible.36- Keep page rhythm varied: full-bleed section, compressed proof band, narrative detail block.37- Footer should close with action, orientation, and essential navigation only.3839## Navigation and responsive behavior4041- Global nav should reflect the real information architecture, not every possible link.42- Sticky headers must not steal too much viewport from the hero.43- On mobile, collapse complexity fast and keep the first CTA reachable.44- Do not let decorative media push the headline or CTA below the fold.4546## Reject these failures4748- Hero cards, stat strips, and logo clouds all fighting in the first viewport49- Brand buried under oversized headline copy50- Generic SaaS sections repeated without narrative progress51- Placeholder stock imagery that weakens credibility52- Multiple accent colors with no brand logic5354## Final checks5556- Is the brand unmistakable in the first viewport?57- Can a first-time visitor explain what the company does after one scroll?58- Does the homepage move from promise to proof to action cleanly?
mr-q526