high-end-visual-design

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

Updated Sep 16, 2026
One-click install
npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill high-end-visual-design-pt-perkasa-pilar-utama
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/PT-Perkasa-Pilar-Utama/axentra/tree/main/.claude/skills/high-end-visual-design
Command: npx skills add https://github.com/PT-Perkasa-Pilar-Utama/axentra --skill high-end-visual-design-pt-perkasa-pilar-utama

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 common defaults like Inter/Roboto fonts, 1px gray borders, harsh drop shadows, and linear transitions that make designs look generic. - 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 alike. - Motion Choreography: Defines spring-physics cubic-bezier transitions, staggered navigation reveals, magnetic button hovers, and scroll-triggered entry animations with GPU-safe performance guardrails. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with nested double-bezel cards, a floating glass pill navbar, button-in-button CTAs, and fluid scroll animations that read as a premium agency build. ## Quick Start Use the high-end-visual-design skill to build a 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, all patterns are expressed in Tailwind utility classes and React components, including backdrop-blur glass effects, rounded-2rem squircle radii, and group-hover button physics. Framer Motion's whileInView or IntersectionObserver handles scroll reveals.

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

Animate only transform and opacity properties, never top, left, width, or height. Apply backdrop-blur only to fixed or sticky elements, use IntersectionObserver instead of scroll listeners, and use min-h-[100dvh] instead of h-screen to avoid iOS viewport issues.

What are the limitations of prompt-based UI design generation?▼

The Skill assumes premium fonts like Geist or Clash Display are available in the project, which may require separate font loading setup. It also targets modern browsers supporting backdrop-blur and CSS grid, so legacy browser support is not addressed.