premium-ui-design

name	premium-ui-design
description	Generate premium landing page, hero section, portfolio, product page, event page, or brand presentation UI direction and implementation-ready structure.

Premium UI Design

Use this skill when a page needs to look deliberate, premium, and differentiated rather than like a generic template.

What To Clarify First

• Page type: landing page, hero section, portfolio, product page, event page, brand page, or case study
• Audience and conversion goal
• Brand personality
• Existing copy, assets, logo, colors, screenshots, or examples
• Build target: HTML, React, Tailwind, static page, design brief, or prompt for another builder

Design Principles

• Start from the subject, not decoration.
• Use typography, spacing, hierarchy, and motion as the main premium signals.
• Avoid generic SaaS patterns unless they fit the brand.
• Pick one visual signature and keep the rest disciplined.
• Make the first viewport immediately useful: clear subject, clear offer, clear next action.

Workflow

1. Define the design thesis

   • State the audience, page job, and premium direction in one paragraph.

2. Choose layout direction

   • Editorial split, asymmetrical bento, object-led hero, product walkthrough, case-study narrative, or dense operator dashboard.

3. Define visual system

   • Palette
   • Type roles
   • Spacing rhythm
   • Components
   • Motion principles

4. Build the page structure

   • Hero
   • Proof or demo
   • Use cases
   • Process or workflow
   • CTA
   • FAQ or trust block when needed

5. Produce implementation guidance

   • Provide HTML/Tailwind/React structure if requested.
   • Include responsive behavior and interaction notes.

Output Format

Return:

• Design thesis
• Visual direction
• Section structure
• Component list
• Copy notes
• Motion notes
• Implementation-ready HTML/Tailwind/React outline when requested

Quality Bar

The output should give a builder enough specificity to create a page without guessing. If assets are missing, propose placeholders that are semantically accurate, not decorative filler.