premium-ui-ux-design

name	premium-ui-ux-design
description	Website-focused premium UI/UX layer for beautiful, pleasant, conversion-ready, internationally credible websites. Use before design-system, page-builder, visual-qa, and design-quality-score on premium or revenue-critical sites.

Premium UI/UX Design

Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com, [phone].

Use when

• A website must look premium enough to justify high-ticket pricing, trust, or serious commercial attention.
• Building lead-generation, ecommerce, product, portfolio, SaaS marketing, hospitality, education, healthcare, nonprofit, or enterprise websites.
• The site risks looking generic, templated, over-decorated, slow, hard to scan, or visually cheap.
• The website must make the owner's offer feel more valuable while also acting as proof of the developer's premium craft.

Required inputs

• Website strategy brief, target audience, offer, brand position, content inventory, photos/assets, and conversion goal.
• Any current design system, screenshots, competitor benchmarks, and performance/accessibility constraints.

Workflow

1. Define the website's business job: trust, conversion, sales support, application, booking, donation, product education, or authority.
2. Pick the visual voice that fits the buyer and offer: operational, editorial, luxury minimal, consumer polished, institutional, or local-premium.
3. Load premium-website-product when the brief needs premium positioning, content, SEO, stack, or agency proof before styling begins.
4. Build hierarchy from the conversion path before styling sections.
5. Create the design system using the premium playbook: visual principles, color, type, spacing, imagery, motion, charts/tables, and production polish.
6. Apply the premium website gate before page production and again after visual QA.
7. Record evidence in the project scorecard and design-quality report.

Quality standards

• First viewport immediately communicates brand/category, offer, credibility, and primary action.
• Layout is responsive, fast, accessible, and visually coherent across primary templates.
• Imagery shows the real product, place, person, proof, interface, or outcome whenever available.
• Color, typography, spacing, and motion are tokenized and commercially appropriate.
• Forms, pricing, service pages, product pages, and contact flows reduce anxiety and make the next step obvious.
• Data, testimonials, case studies, stats, and comparisons are presented with accurate and readable visual hierarchy.
• Simplicity is treated as premium: navigation, forms, copy blocks, state changes, and mobile flows remove buyer effort without hiding necessary proof.
• Every primary template scores at least 8/10 on the premium UI/UX gate and design-quality-score rubric.

Anti-patterns

• Landing pages that feel like generic AI output: vague gradients, blob backgrounds, decorative card piles, weak stock photos, and unsupported claims.
• Beautiful pages that do not explain the offer or move the user toward a business outcome.
• One-note color palettes, cramped mobile layouts, slow hero media, and inaccessible overlays.
• Using visual novelty where proof, clarity, and trust are required.

Outputs

• Premium website UX brief, visual direction, token plan, page-level quality notes, conversion path guidance, or gate report.

References

• references/premium-website-ui-ux-playbook.md - book-derived website design rules.
• references/premium-website-gate.md - scoring and blocking defects.
• ../premium-website-product/references/premium-website-market-asset-gate.md - website-as-premium-product, content, SEO, launch, stack, and agency proof gate.
• references/source-register.md - local EPUB sources used to build this skill.

World-class UX foundations (book-derived)

Required reading before kicking off a premium engagement:

• references/levy-four-tenets.md — Four-tenet framework (Business Strategy + Value Innovation + Validated User Research + Killer UX Design); Top-10 anti-patterns to reject in client briefs.
• references/enterprise-five-outcomes.md — Five mandatory outcomes (Useful / Easy / Efficient / Pleasing / Accessible) as a pre-launch gate. One No = no launch.
• references/pm-collaboration-rules.md — Fekeshazi 5+1 (5-10 min to explain, design as ongoing process, etc.) and the "don't hide important functions in menus" rule.

If a brief fails Levy's Top-10 check or omits any of the 5 outcomes, push back before scoping.