Engineer Awwwards-Tier UI/UX & Motion

High-End Visual Design is a frontend skill from the Leonxlnx/taste-skill repository for designing expensive, agency-grade interfaces with premium fonts, spatial rhythm, soft depth and fluid microinteractions. Its persona is a principal UI and UX architect and motion choreographer at Awwwards tier, engineering digital experiences that feel like a high-budget agency build. A Variance Mandate says never to generate the exact same layout or aesthetic twice in a row.

The skill is organized as directives. An Absolute Zero list of anti-patterns fails a design instantly: banned fonts (Inter, Roboto, Arial, Open Sans, Helvetica), thick-stroked standard icon sets, generic 1px gray borders and harsh dark drop shadows, edge-to-edge sticky navbars and symmetrical Bootstrap-style three-column grids, and linear or ease-in-out transitions. It assumes premium fonts such as Geist, Clash Display, PP Editorial New or Plus Jakarta Sans are available and prefers ultra-light line icons such as Phosphor Light or Remix Line.

A Creative Variance Engine tells the model to silently pick one vibe archetype and one layout archetype per prompt. The vibes are Ethereal Glass for SaaS, AI and tech (deep black, radial mesh gradients, heavy backdrop blur and hairline borders), Editorial Luxury for lifestyle, real estate and agency work (warm creams, variable serif headings, a subtle film-grain overlay) and Soft Structuralism for consumer, health and portfolio work (silver-grey or white backgrounds, bold grotesk type, very soft diffused shadows). The layouts are the Asymmetrical Bento, the Z-Axis Cascade and the Editorial Split, each with a defined mobile collapse.

Use it when the user wants a high-end agency, Awwwards-tier, Apple-like, Linear-like, luxury or polished visual design, for landing pages, portfolios, SaaS UIs, consumer product pages or app surfaces that need premium depth and motion, or when the design must avoid generic fonts, harsh shadows, static layouts, default navbars and ordinary grids.

Its limitations are that it is visual-design focused and does not replace brand strategy, conversion research, accessibility validation or production QA. Premium fonts, icon sets, images and motion libraries must exist in the project or be added intentionally, and luxury motion and heavy visual treatments should be avoided on constrained dashboards, regulated products or low-performance environments.

The input is a UI request or an interface to review; the skill's example asks to review an interface, identify the highest-impact design problems and propose an implementation-ready improvement. The output is React, Tailwind or HTML code produced through a fixed sequence: silent thought (roll the variance engine), scaffold (background texture, macro whitespace, large typography), architect (the Double-Bezel technique for cards, inputs and feature grids), choreograph (custom cubic-bezier transitions, staggered navigation reveals, button-in-button hover physics) and output.

Component rules include the Double-Bezel nested container with an outer shell and a smaller-radius inner core, pill buttons with a trailing icon nested in its own circular wrapper, generous section padding (py-24 to py-40) and small eyebrow tags before headings. Motion rules require custom cubic-bezier curves, a floating glass pill navbar with a hamburger that morphs into an X, a full-screen glass menu with staggered link reveals, magnetic hover physics and scroll entry animations using IntersectionObserver or Framer Motion whileInView instead of scroll listeners.

Performance guardrails: animate only transform and opacity, apply backdrop blur only to fixed or sticky elements, put grain overlays only on fixed pointer-events-none pseudo-elements, keep z-index for systemic layers, and use min-h-[100dvh] rather than h-screen. A final checklist confirms none of the banned patterns are present and that layouts collapse to a single column with w-full and px-4 below 768px.

It is for front-end designers and developers who want premium, motion-rich marketing pages and product surfaces and are willing to trade simplicity for polish.