skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

high-end-visual-design

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

Updated Jun 30, 2026
Search Tags:#typography#React#landing page#animation#ui design#tailwind#glassmorphism
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill high-end-visual-design-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/high-end-visual-design
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill high-end-visual-design-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic and cheap due to default fonts, flat cards, harsh shadows, and basic transitions. This Skill enforces a strict design system that produces high-end, agency-quality web interfaces. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans generic fonts (Inter, Roboto), heavy icons, 1px gray borders, and linear transitions that make designs look templated. - Creative Variance Engine: Selects from 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 nav reveals, magnetic button hovers, and scroll-based entry animations with GPU-safe performance guardrails. - Use Case: Ask for a landing page for an AI SaaS product and receive React/Tailwind code with nested double-bezel cards, a floating glass navbar, 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 SaaS product 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 anti-pattern blocklist that bans default fonts like Inter and Roboto, generic 1px gray borders, harsh drop shadows, and linear transitions. Combine this with curated layout archetypes and spring-physics motion curves to produce distinctive premium interfaces.

What fonts and icons should I use for premium web design?▼

Use premium typefaces such as Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans instead of Inter or Roboto. For icons, choose ultra-light precise line sets like Phosphor Light or Remix Line rather than thick-stroked Lucide or Material Icons.

Does this design approach work on mobile viewports?▼

Yes, 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 should backdrop-blur not be applied to scrolling containers?▼

Applying backdrop-blur to scrolling content forces continuous GPU repaints and causes severe frame drops on mobile devices. Blur filters should only be applied to fixed or sticky elements like navbars and overlays.

What animation properties are safe for web performance?▼

Animate exclusively with transform and opacity, which are GPU-composited properties. Never animate top, left, width, or height, and use IntersectionObserver or Framer Motion whileInView instead of scroll event listeners for reveal animations.

Related Skills

Explore More Design & Creative Skills→
matteotittamatteotitta
29

linkedin-carousels

Generate LinkedIn carousel blueprints with slide copy, wireframes, and captions.

Community
Advanced
aaymanasraraaymanasrar

figma-implement-design

Convert Figma design files into React components with Tailwind CSS.

Community
Advanced
ojallingtonojallington

accessibility-auditor

Run Playwright-based accessibility, visual regression, and performance audits on a dashboard.

Community
Advanced
Sir-chawakornSir-chawakorn
33

screenshot-to-code

Convert UI screenshots and design mockups into HTML, CSS, and React components.

Community
Intermediate