skills.rest
cloudofgeorge
cloudofgeorgeCOMMUNITY
Explore all skills by this author →
Website𝕏@cloudofgeorgeGitHub

high-end-visual-design

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

Updated May 11, 2026
Search Tags:#typography#landing page#web design#animation#ui design#tailwind#glassmorphism
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill high-end-visual-design-cloudofgeorge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/design/high-end-visual-design
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill high-end-visual-design-cloudofgeorge

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 instant 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. - 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 CTAs, 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 glassmorphic cards, staggered scroll-reveal animations, magnetic button hovers, and responsive mobile collapse below 768px. ## 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 websites look less generic?▼

Apply a strict anti-pattern list that bans default fonts like Inter and Roboto, generic 1px gray borders, harsh drop shadows, and linear transitions. Combine curated vibe and layout archetypes with nested card structures and spring-based motion to produce distinctive, premium output.

How to create glassmorphism cards with Tailwind CSS?▼

Use the Double-Bezel technique: an outer shell with bg-white/5, a hairline ring, padding, and a large radius like rounded-[2rem], wrapping an inner core with its own background and inset highlight shadow. Add backdrop-blur only to fixed or sticky elements, never scrolling containers.

What fonts work best for premium web design?▼

Premium interfaces use distinctive typefaces like Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans instead of overused defaults like Inter, Roboto, or Arial. Pair wide geometric Grotesks for tech products or high-contrast variable Serifs for editorial luxury aesthetics.

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

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

How do I animate elements on scroll without hurting performance?▼

Use IntersectionObserver or Framer Motion's whileInView to trigger fade-up entry animations instead of window scroll event listeners, which cause continuous reflows. Animate only transform and opacity with custom cubic-bezier curves over 800ms or more.

Related Skills

Explore More Design & Creative Skills→
TranVanTienDatTranVanTienDat

frontend-design

Generate production-quality frontend interfaces with distinctive typography, color, layout, and motion design.

Community
Advanced
thkim2015thkim2015

moai-platform-deployment

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

Community
Advanced
coreyonecoreyone
1

design-usability-rules

Audit interfaces against Nielsen Norman usability heuristics and accessibility rules.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate