# Website Homepage Design Pro

> Use when designing a premium branded homepage, 官网首页, company website, product website, or high-end corporate front page. Pro version focused on strategic positioning, visual direction, section narrative, conversion paths, responsive polish, and implementation-ready design details.

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