high-end-visual-design

Generates premium agency-tier UI code with curated typography, layouts, and motion patterns.

Updated May 21, 2025
One-click install
npx skills add https://github.com/nielslataire/Group-LN --skill high-end-visual-design-nielslataire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/nielslataire/Group-LN/tree/main/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/nielslataire/Group-LN --skill high-end-visual-design-nielslataire

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic and cheap, relying on default fonts, flat cards, harsh shadows, and basic transitions. This Skill enforces a strict design system that produces high-end, agency-quality web interfaces instead of template-looking output. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans generic fonts (Inter, Roboto, Arial), heavy icons, 1px gray borders, harsh shadows, and linear transitions that make designs look cheap. - Creative Variance Engine: Selects from curated vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so every design is unique. - Component & Motion Mastery: Defines Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, magnetic hover physics, and GPU-safe scroll animations with custom cubic-bezier curves. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with glassmorphism, concentric rounded cards, spring-physics hover states, and responsive mobile collapse behavior. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glassmorphism aesthetic.

Frequently Asked Questions about high-end-visual-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated UI designs look less generic?▼

Apply a strict design system that bans default fonts like Inter and Roboto, replaces flat cards with nested Double-Bezel containers, and uses custom cubic-bezier transitions instead of linear easing. This Skill enforces all of these rules automatically when generating React or Tailwind code.

What fonts and icons should I use for premium web design?▼

Use premium typefaces like Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans instead of Inter or Roboto. For icons, choose ultra-light line sets such as Phosphor Light or Remix Line rather than thick-stroked Lucide or Material Icons.

Does this design approach work with Tailwind CSS and React?▼

Yes, all patterns are expressed in Tailwind utility classes and React component structures, including arbitrary values like rounded-[2rem] and custom cubic-bezier easings. Framer Motion's whileInView is recommended for scroll-triggered entry animations.

How do I make asymmetric layouts responsive on mobile?▼

Collapse all asymmetric grids to a single column below 768px with w-full, px-4, and py-8 spacing, and remove rotations or negative-margin overlaps. Use min-h-[100dvh] instead of h-screen to prevent iOS Safari viewport jumping.

Why do backdrop-blur effects cause mobile performance issues?▼

Applying backdrop-blur to scrolling containers forces continuous GPU repaints, causing severe frame drops on mobile. Restrict blur filters to fixed or sticky elements like navbars and overlays, and animate only transform and opacity properties.