high-end-visual-design

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

3|Updated Apr 25, 2026
One-click install
npx skills add https://github.com/cherishwins/npsi-site --skill high-end-visual-design-cherishwins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/cherishwins/npsi-site/tree/main/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/cherishwins/npsi-site --skill high-end-visual-design-cherishwins

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic, relying on default fonts, flat cards, harsh shadows, and instant transitions. This Skill enforces an agency-grade design system so generated websites feel polished and distinctive instead of templated. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto, Arial), generic borders, harsh shadows, and linear transitions that make AI designs look cheap. - Variance Engine: Selects from texture archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so no two outputs look alike. - Component & Motion Patterns: Provides Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, and cubic-bezier spring motion with GPU-safe animation rules. - Use Case: Ask for a landing page for a SaaS product and receive Tailwind/React code with a floating glass navbar, bento grid, scroll-triggered fade-up reveals, and mobile collapse behavior below 768px. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glass aesthetic and smooth scroll animations.

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 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 encodes those rules as a checklist enforced before output.

What fonts and icons does this design skill use?▼

It assumes premium fonts such as Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans, and ultra-light icon sets like Phosphor Light or Remix Line. Inter, Roboto, Arial, Open Sans, Helvetica, Lucide, FontAwesome, and Material Icons are explicitly banned.

Does this skill work with Tailwind CSS and React?▼

Yes, the output targets Tailwind utility classes and React components, with plain HTML also supported. Patterns like backdrop-blur, grid col-spans, and group-hover transitions are expressed directly in Tailwind syntax.

How does the skill handle mobile responsive layouts?▼

Asymmetric layouts collapse to a single-column stack below 768px with w-full and px-4 spacing. Rotations and overlaps are removed on mobile, and min-h-[100dvh] replaces h-screen to avoid iOS Safari viewport jumping.

Why does backdrop-blur cause performance issues on mobile?▼

Backdrop blur on scrolling containers forces continuous GPU repaints, causing frame drops on mobile devices. This Skill restricts backdrop-blur to fixed or sticky elements like navbars and overlays, and animates only transform and opacity.