| 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, +256 784 464178.
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
- Define the website's business job: trust, conversion, sales support, application, booking, donation, product education, or authority.
- Pick the visual voice that fits the buyer and offer: operational, editorial, luxury minimal, consumer polished, institutional, or local-premium.
- Load
premium-website-product when the brief needs premium positioning, content, SEO, stack, or agency proof before styling begins.
- Build hierarchy from the conversion path before styling sections.
- Create the design system using the premium playbook: visual principles, color, type, spacing, imagery, motion, charts/tables, and production polish.
- Apply the premium website gate before page production and again after visual QA.
- 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/enterprise-website-ux-playbook.md - enterprise website stakeholder, proof, navigation, trust, and Africa-calibrated UX rules.references/mobile-dashboard-website-patterns.md - mobile navigation, first-visit guidance, dashboard/proof presentation, and mobile quality checks.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.
