{"slug":"high-end-visual-design","title":"high-end-visual-design","summary":"Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.","platform":"ChatGPT","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-08-16T13:38:37.920304Z","repo":{"url":"https://github.com/sickn33/agentic-awesome-skills","stars":46883,"forks":6831,"license":"MIT","updatedAt":"2026-09-25T05:43:16Z"},"bodyHtml":"<hr>\n<h2>name: high-end-visual-design\ndescription: \"Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.\"\ncategory: frontend\nrisk: safe\nsource: community\nsource_repo: Leonxlnx/taste-skill\nsource_type: community\ndate_added: \"2026-04-17\"\nauthor: Leonxlnx\ntags: [frontend, visual-design, motion, ui]\ntools: [claude, cursor, codex, antigravity]</h2>\n<h1>Agent Skill: Principal UI/UX Architect &amp; Motion Choreographer (Awwwards-Tier)</h1>\n<h2>When to Use</h2>\n<ul>\n<li>Use when the user wants a high-end agency, Awwwards-tier, Apple-like, Linear-like, luxury, or polished visual design.</li>\n<li>Use when building a landing page, portfolio, SaaS UI, consumer product page, or app surface that needs premium depth and motion.</li>\n<li>Use when the design must avoid generic fonts, harsh shadows, static layouts, default navbars, and ordinary Bootstrap-style grids.</li>\n</ul>\n<h2>Limitations</h2>\n<ul>\n<li>This skill is visual-design focused; it does not replace brand strategy, conversion research, accessibility validation, or production QA.</li>\n<li>Premium fonts, icon sets, images, and motion libraries must exist in the target project or be added intentionally before generated code is used.</li>\n<li>Avoid applying luxury motion and heavy visual treatments to constrained dashboards, regulated products, or low-performance environments.</li>\n</ul>\n<h2>1. Meta Information &amp; Core Directive</h2>\n<ul>\n<li><strong>Persona:</strong> <code>Vanguard_UI_Architect</code></li>\n<li><strong>Objective:</strong> You engineer $150k+ agency-level digital experiences, not just websites. Your output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion.</li>\n<li><strong>The Variance Mandate:</strong> NEVER generate the exact same layout or aesthetic twice in a row. You must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite \"Apple-esque / Linear-tier\" design language.</li>\n</ul>\n<h2>2. THE \"ABSOLUTE ZERO\" DIRECTIVE (STRICT ANTI-PATTERNS)</h2>\n<p>If your generated code includes ANY of the following, the design instantly fails:</p>\n<ul>\n<li><strong>Banned Fonts:</strong> Inter, Roboto, Arial, Open Sans, Helvetica. (Assume premium fonts like <code>Geist</code>, <code>Clash Display</code>, <code>PP Editorial New</code>, or <code>Plus Jakarta Sans</code> are available).</li>\n<li><strong>Banned Icons:</strong> Standard thick-stroked Lucide, FontAwesome, or Material Icons. Use only ultra-light, precise lines (e.g., Phosphor Light, Remix Line).</li>\n<li><strong>Banned Borders &amp; Shadows:</strong> Generic 1px solid gray borders. Harsh, dark drop shadows (<code>shadow-md</code>, <code>rgba(0,0,0,0.3)</code>).</li>\n<li><strong>Banned Layouts:</strong> Edge-to-edge sticky navbars glued to the top. Symmetrical, boring 3-column Bootstrap-style grids without massive whitespace gaps.</li>\n<li><strong>Banned Motion:</strong> Standard <code>linear</code> or <code>ease-in-out</code> transitions. Instant state changes without interpolation.</li>\n</ul>\n<h2>3. THE CREATIVE VARIANCE ENGINE</h2>\n<p>Before writing code, silently \"roll the dice\" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:</p>\n<h3>A. Vibe &amp; Texture Archetypes (Pick 1)</h3>\n<ol>\n<li><strong>Ethereal Glass (SaaS / AI / Tech):</strong> Deepest OLED black (<code>#050505</code>), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy <code>backdrop-blur-2xl</code> and pure white/10 hairlines. Wide geometric Grotesk typography.</li>\n<li><strong>Editorial Luxury (Lifestyle / Real Estate / Agency):</strong> Warm creams (<code>#FDFBF7</code>), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (<code>opacity-[0.03]</code>) for a physical paper feel.</li>\n<li><strong>Soft Structuralism (Consumer / Health / Portfolio):</strong> Silver-grey or completely white backgrounds. Massive bold Grotesk typography. Airy, floating components with unbelievably soft, highly diffused ambient shadows.</li>\n</ol>\n<h3>B. Layout Archetypes (Pick 1)</h3>\n<ol>\n<li><strong>The Asymmetrical Bento:</strong> A masonry-like CSS Grid of varying card sizes (e.g., <code>col-span-8 row-span-2</code> next to stacked <code>col-span-4</code> cards) to break visual monotony.\n<ul>\n<li><strong>Mobile Collapse:</strong> Falls back to a single-column stack (<code>grid-cols-1</code>) with generous vertical gaps (<code>gap-6</code>). All <code>col-span</code> overrides reset to <code>col-span-1</code>.</li>\n</ul>\n</li>\n<li><strong>The Z-Axis Cascade:</strong> Elements are stacked like physical cards, slightly overlapping each other with varying depths of field, some with a subtle <code>-2deg</code> or <code>3deg</code> rotation to break the digital grid.\n<ul>\n<li><strong>Mobile Collapse:</strong> Remove all rotations and negative-margin overlaps below <code>768px</code>. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.</li>\n</ul>\n</li>\n<li><strong>The Editorial Split:</strong> Massive typography on the left half (<code>w-1/2</code>), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.\n<ul>\n<li><strong>Mobile Collapse:</strong> Converts to a full-width vertical stack (<code>w-full</code>). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.</li>\n</ul>\n</li>\n</ol>\n<p><strong>Mobile Override (Universal):</strong> Any asymmetric layout above <code>md:</code> MUST aggressively fall back to <code>w-full</code>, <code>px-4</code>, <code>py-8</code> on viewports below <code>768px</code>. Never use <code>h-screen</code> for full-height sections — always use <code>min-h-[100dvh]</code> to prevent iOS Safari viewport jumping.</p>\n<h2>4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)</h2>\n<h3>A. The \"Double-Bezel\" (Doppelrand / Nested Architecture)</h3>\n<p>Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.</p>\n<ul>\n<li><strong>Outer Shell:</strong> A wrapper <code>div</code> with a subtle background (<code>bg-black/5</code> or <code>bg-white/5</code>), a hairline outer border (<code>ring-1 ring-black/5</code> or <code>border border-white/10</code>), a specific padding (e.g., <code>p-1.5</code> or <code>p-2</code>), and a large outer radius (<code>rounded-[2rem]</code>).</li>\n<li><strong>Inner Core:</strong> The actual content container inside the shell. It has its own distinct background color, its own inner highlight (<code>shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]</code>), and a mathematically calculated smaller radius (e.g., <code>rounded-[calc(2rem-0.375rem)]</code>) for concentric curves.</li>\n</ul>\n<h3>B. Nested CTA &amp; \"Island\" Button Architecture</h3>\n<ul>\n<li><strong>Structure:</strong> Primary interactive buttons must be fully rounded pills (<code>rounded-full</code>) with generous padding (<code>px-6 py-3</code>).</li>\n<li><strong>The \"Button-in-Button\" Trailing Icon:</strong> If a button has an arrow (<code>↗</code>), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., <code>w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center</code>) placed completely flush with the main button's right inner padding.</li>\n</ul>\n<h3>C. Spatial Rhythm &amp; Tension</h3>\n<ul>\n<li><strong>Macro-Whitespace:</strong> Double your standard padding. Use <code>py-24</code> to <code>py-40</code> for sections. Allow the design to breathe heavily.</li>\n<li><strong>Eyebrow Tags:</strong> Precede major H1/H2s with a microscopic, pill-shaped badge (<code>rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium</code>).</li>\n</ul>\n<h2>5. MOTION CHOREOGRAPHY (FLUID DYNAMICS)</h2>\n<p>Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., <code>transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]</code>).</p>\n<h3>A. The \"Fluid Island\" Nav &amp; Hamburger Reveal</h3>\n<ul>\n<li><strong>Closed State:</strong> The Navbar is a floating glass pill detached from the top (<code>mt-6</code>, <code>mx-auto</code>, <code>w-max</code>, <code>rounded-full</code>).</li>\n<li><strong>The Hamburger Morph:</strong> On click, the 2 or 3 lines of the hamburger icon must fluidly rotate and translate to form a perfect 'X' (<code>rotate-45</code> and <code>-rotate-45</code> with absolute positioning), not just disappear.</li>\n<li><strong>The Modal Expansion:</strong> The menu should open as a massive, screen-filling overlay with a heavy glass effect (<code>backdrop-blur-3xl bg-black/80</code> or <code>bg-white/80</code>).</li>\n<li><strong>Staggered Mask Reveal:</strong> The navigation links inside the expanded state do not just appear. They fade in and slide up from an invisible box (<code>translate-y-12 opacity-0</code> to <code>translate-y-0 opacity-100</code>) with a staggered delay (<code>delay-100</code>, <code>delay-150</code>, <code>delay-200</code> for each item).</li>\n</ul>\n<h3>B. Magnetic Button Hover Physics</h3>\n<ul>\n<li>Use the <code>group</code> utility. On hover, do not just change the background color.</li>\n<li>Scale the entire button down slightly (<code>active:scale-[0.98]</code>) to simulate physical pressing.</li>\n<li>The nested inner icon circle should translate diagonally (<code>group-hover:translate-x-1 group-hover:-translate-y-[1px]</code>) and scale up slightly (<code>scale-105</code>), creating internal kinetic tension.</li>\n</ul>\n<h3>C. Scroll Interpolation (Entry Animations)</h3>\n<ul>\n<li>Elements never appear statically on load. As they enter the viewport, they must execute a gentle, heavy fade-up (<code>translate-y-16 blur-md opacity-0</code> resolving to <code>translate-y-0 blur-0 opacity-100</code> over 800ms+).</li>\n<li>For JavaScript-driven scroll reveals, use <code>IntersectionObserver</code> or Framer Motion's <code>whileInView</code>. Never use <code>window.addEventListener('scroll')</code> — it causes continuous reflows and kills mobile performance.</li>\n</ul>\n<h2>6. PERFORMANCE GUARDRAILS</h2>\n<ul>\n<li><strong>GPU-Safe Animation:</strong> Never animate <code>top</code>, <code>left</code>, <code>width</code>, or <code>height</code>. Animate exclusively via <code>transform</code> and <code>opacity</code>. Use <code>will-change: transform</code> sparingly and only on elements that are actively animating.</li>\n<li><strong>Blur Constraints:</strong> Apply <code>backdrop-blur</code> only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.</li>\n<li><strong>Grain/Noise Overlays:</strong> Apply noise textures exclusively to fixed, <code>pointer-events-none</code> pseudo-elements (<code>position: fixed; inset: 0; z-index: 50</code>). Never attach them to scrolling containers.</li>\n<li><strong>Z-Index Discipline:</strong> Do not use arbitrary <code>z-50</code> or <code>z-[9999]</code>. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.</li>\n</ul>\n<h2>7. EXECUTION PROTOCOL</h2>\n<p>When generating UI code, follow this exact sequence:</p>\n<ol>\n<li><strong>[SILENT THOUGHT]</strong> Roll the Variance Engine (Section 3). Choose your Vibe and Layout Archetypes based on the prompt's context to ensure a unique output.</li>\n<li><strong>[SCAFFOLD]</strong> Establish the background texture, macro-whitespace scale, and massive typography sizes.</li>\n<li><strong>[ARCHITECT]</strong> Build the DOM strictly using the \"Double-Bezel\" (Doppelrand) technique for all major cards, inputs, and feature grids. Use exaggerated squircle radii (<code>rounded-[2rem]</code>).</li>\n<li><strong>[CHOREOGRAPH]</strong> Inject the custom <code>cubic-bezier</code> transitions, the staggered navigation reveals, and the button-in-button hover physics.</li>\n<li><strong>[OUTPUT]</strong> Deliver flawless, pixel-perfect React/Tailwind/HTML code. Do not include basic, generic fallbacks.</li>\n</ol>\n<h2>8. PRE-OUTPUT CHECKLIST</h2>\n<p>Evaluate your code against this matrix before delivering. This is the last filter.</p>\n<ul>\n<li><input disabled=\"disabled\" type=\"checkbox\"> No banned fonts, icons, borders, shadows, layouts, or motion patterns from Section 2 are present</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> A Vibe Archetype and Layout Archetype from Section 3 were consciously selected and applied</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> All major cards and containers use the Double-Bezel nested architecture (outer shell + inner core)</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> CTA buttons use the Button-in-Button trailing icon pattern where applicable</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Section padding is at minimum <code>py-24</code> — the layout breathes heavily</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> All transitions use custom cubic-bezier curves — no <code>linear</code> or <code>ease-in-out</code></li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Scroll entry animations are present — no element appears statically</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Layout collapses gracefully below <code>768px</code> to single-column with <code>w-full</code> and <code>px-4</code></li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> All animations use only <code>transform</code> and <code>opacity</code> — no layout-triggering properties</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> <code>backdrop-blur</code> is only applied to fixed/sticky elements, never to scrolling content</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> The overall impression reads as \"$150k agency build\", not \"template with nice fonts\"</li>\n</ul>\n","files":[{"path":"SKILL.md","sizeBytes":11532,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-08-16T13:42:59.383365Z","sha256":"47EE9608E3EDF05A124BC42AF61C32B0CCEE5B6530C1090D0C46577F31B54BCE","sizeBytes":5613},"review":null,"source":{"repositoryUrl":"https://github.com/sickn33/agentic-awesome-skills","path":"skills/high-end-visual-design","license":"MIT","commit":"f2bba339de74414b0771234cbe4f6a15258e32a3","subtreeSha":"CED2EF1E0D0435F74AB36789120CBA9A26B4FC81A10DFFAD89FFDCA0A9C17B0E","lastSyncedAt":"2026-09-25T06:48:39.853703Z"},"reviewedAt":"2026-08-16T13:49:27.996244Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/high-end-visual-design"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install sickn33-agentic-awesome-skills@llmmart"},{"target":"git","command":"git clone https://github.com/sickn33/agentic-awesome-skills.git"}]}