high-end-visual-design

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

1|Updated May 10, 2026
One-click install
npx skills add https://github.com/Tgoldi/claude-skills --skill high-end-visual-design-tgoldi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/Tgoldi/claude-skills/tree/main/high-end-visual-design
Command: npx skills add https://github.com/Tgoldi/claude-skills --skill high-end-visual-design-tgoldi

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 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. - Motion Choreography: Defines spring-physics cubic-bezier transitions, staggered nav 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 navbar, button-in-button CTAs, and fluid scroll animations that read as a premium agency build. ## Quick Start Ask the AI to design a landing page or UI component and request that it apply the high-end visual design guidelines for a premium agency look.

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 curated typography, nested card architecture, macro-whitespace, and spring-physics motion to produce agency-tier output.

What fonts and icons does this design system use?

It bans Inter, Roboto, Arial, Open Sans, and Helvetica in favor of premium fonts like Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans. Icons must be ultra-light line sets such as Phosphor Light or Remix Line, not Lucide or Material Icons.

Does this design approach work with Tailwind CSS and React?

Yes, the guidelines are written directly in Tailwind utility classes and React patterns, including backdrop-blur, custom cubic-bezier transitions, and Framer Motion whileInView for scroll reveals. Plain HTML/CSS output is also supported.

How does the design handle mobile responsiveness?

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

Why do backdrop-blur effects cause mobile performance issues?

Applying backdrop-blur to scrolling containers forces continuous GPU repaints and severe frame drops on mobile. The guidelines restrict blur to fixed or sticky elements like navbars and overlays, and animate only transform and opacity properties.