skills.rest
AvaTar-ArTs
AvaTar-ArTsCOMMUNITY
Explore all skills by this author →
GitHub

high-end-visual-design

Generates premium agency-tier UI code with curated typography, spacing, and motion rules.

Updated Jul 10, 2026
Search Tags:#typography#landing page#web design#animation#ui design#tailwind#glassmorphism
One-click install
npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill high-end-visual-design-avatar-arts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/AvaTar-ArTs/.Agent-skills/tree/main/skills/taste-skill/skills/soft-skill
Command: npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill high-end-visual-design-avatar-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic because they default to common 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 default fonts (Inter, Roboto, Arial), generic 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 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 animation rules. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with glassmorphism cards, staggered scroll reveals, magnetic button hovers, 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, generic 1px borders, and linear transitions. This Skill enforces premium typography, nested card architecture, macro-whitespace, and spring-physics motion to produce agency-tier output.

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, the design rules are expressed directly in Tailwind utility classes and React component patterns. It covers backdrop-blur glass effects, custom cubic-bezier transitions, grid-based bento layouts, and Framer Motion whileInView scroll animations.

How do I animate UI elements without hurting mobile performance?▼

Animate only transform and opacity properties, never top, left, width, or height, to avoid layout reflows. Apply backdrop-blur only to fixed or sticky elements, and use IntersectionObserver instead of scroll event listeners for reveal animations.

Why do asymmetric layouts break on mobile screens?▼

Overlapping elements and rotations cause touch-target conflicts below 768px. The Skill mandates collapsing all asymmetric layouts to single-column stacks with w-full and px-4, and using min-h-[100dvh] instead of h-screen to prevent iOS Safari viewport jumping.

Related Skills

Explore More Design & Creative Skills→
alykay1522alykay1522

copywriting

Generate marketing copy for homepages, landing pages, and product pages.

Community
Intermediate
thkim2015thkim2015

moai-platform-deployment

Deploy and host applications on Vercel, Railway, and Convex platforms.

Community
Advanced
coreyonecoreyone
1

a11y-debugging

Audit web pages for WCAG AA accessibility violations using Lighthouse and browser accessibility trees.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate