| 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
-
Define the design thesis
- State the audience, page job, and premium direction in one paragraph.
-
Choose layout direction
- Editorial split, asymmetrical bento, object-led hero, product walkthrough, case-study narrative, or dense operator dashboard.
-
Define visual system
- Palette
- Type roles
- Spacing rhythm
- Components
- Motion principles
-
Build the page structure
- Hero
- Proof or demo
- Use cases
- Process or workflow
- CTA
- FAQ or trust block when needed
-
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.
