high-end-visual-design

Generates premium agency-tier UI code with curated typography, nested card architecture, and physics-based motion.

Updated Jun 11, 2026
One-click install
npx skills add https://github.com/dylinmat/design-skills-plugin --skill high-end-visual-design-dylinmat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/dylinmat/design-skills-plugin/tree/main/plugins/design/skills/high-end-visual-design
Command: npx skills add https://github.com/dylinmat/design-skills-plugin --skill high-end-visual-design-dylinmat

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 frontend code instead of template-looking output. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans common defaults like Inter/Roboto fonts, 1px gray borders, harsh drop shadows, and linear easing that make designs look cheap. - Variance Engine: Selects from curated vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so no two outputs look identical. - Component & Motion Mastery: Defines Double-Bezel nested card architecture, button-in-button CTA patterns, staggered nav reveals, and cubic-bezier spring physics, with GPU-safe performance guardrails. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with mesh gradients, glassmorphic floating nav, scroll-triggered fade-up animations, and mobile-responsive collapse behavior. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glassmorphic 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 anti-pattern ruleset that bans default fonts like Inter and Roboto, generic 1px borders, harsh shadows, and linear transitions. Combine curated vibe and layout archetypes with nested card architecture and spring-based motion to produce distinctive, premium output.

How to build glassmorphism landing pages with Tailwind CSS?

Use a deep black background with radial mesh gradients, cards with backdrop-blur-2xl and white/10 hairline borders, and a floating pill navbar detached from the top. Restrict backdrop-blur to fixed or sticky elements only to avoid mobile GPU repaints.

What fonts and icons work 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 scroll animation hurt mobile performance?

It can if implemented incorrectly. Animate only transform and opacity, never top, left, width, or height, and use IntersectionObserver or Framer Motion's whileInView instead of scroll event listeners to avoid continuous reflows.

Why do full-height sections break on iOS Safari?

Using h-screen causes viewport jumping on iOS Safari because the browser chrome changes the viewport height dynamically. Use min-h-[100dvh] instead, which tracks the dynamic viewport height correctly.