| schemaVersion | 2026-04-11T00:00:00.000Z |
| skillId | frontend/website-homepage-design-pro |
| name | website-homepage-design-pro |
| displayName | Website Homepage Design PRO |
| description | 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. |
| aliases | ["website-homepage-design-pro","Website Homepage Design PRO","websitehomepagedesignpro","官网首页","高端官网","品牌首页","企业官网","产品官网","首页设计","website","landing","premium homepage","官网","首页","主页","企业官网首页"] |
| version | 0.1.0 |
| sourceHash | sha256:fb2f7922811f6125f36e2cb770d34b259e9cb5bb6f82f97175fec7d6b2fc87c8 |
| domain | frontend |
| departmentTags | ["frontend-platform"] |
| sceneTags | ["design","homepage"] |
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?
