high-end-visual-design

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

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

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 alike. - Motion Choreography: Defines spring-physics cubic-bezier transitions, staggered navigation reveals, magnetic button hovers, and scroll-based 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, massive typography, 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 harsh shadows. This Skill enforces premium typography, nested card architecture, generous whitespace, and physics-based motion to produce agency-quality output.

What fonts and layouts create a high-end website design?

Premium designs use fonts like Geist, Clash Display, or PP Editorial New paired with asymmetric layouts such as bento grids, overlapping Z-axis cascades, or editorial splits. Macro-whitespace of py-24 or more and eyebrow tags above headings complete the look.

Does this design approach work with Tailwind CSS and React?

Yes, the Skill outputs React, Tailwind, or HTML code using Tailwind utility classes for all styling. It references Tailwind-specific patterns like backdrop-blur-2xl, rounded-[2rem], custom cubic-bezier easings, and group-hover interactions.

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.

Why do AI-generated websites look cheap or template-like?

They rely on defaults: system fonts, symmetric three-column grids, edge-to-edge navbars, instant state changes, and linear transitions. Blocking these patterns and requiring curated archetypes, nested card shells, and staggered motion removes the generic appearance.