# Website Homepage Design

> 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.

- Skill: `mr-q526/website-homepage-design` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add mr-q526/website-homepage-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mr-q526/website-homepage-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: mr-q526 (https://skillmd.com/u/mr-q526)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mr-q526/website-homepage-design

---


# 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:

1. Hero: brand, value proposition, CTA, dominant visual
2. Credibility: proof, customers, metrics, or press
3. Capabilities: what the product or company does best
4. Product or service depth: workflow, differentiators, or featured work
5. Trust block: testimonial, case study, security, or social proof
6. 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?