skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

high-end-visual-design

Generates premium UI code with curated typography, spacing, shadows, and motion patterns.

Updated Mar 4, 2026
Search Tags:#typography#landing page#react#design system#animation#ui design#tailwind
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill high-end-visual-design-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/gmolike/Claude-Template --skill high-end-visual-design-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic because they default to common fonts, flat borders, harsh shadows, and basic transitions. This Skill enforces a strict design system that produces agency-tier web interfaces instead of template-looking output. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto), generic borders, harsh shadows, and linear transitions that make designs look cheap. - Variance Engine: Selects from curated vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so each design is unique. - Component & Motion Rules: Defines Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, and cubic-bezier spring physics, plus GPU-safe performance guardrails. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with glassmorphism, concentric rounded cards, magnetic button hovers, and scroll-triggered fade-up animations. ## Quick Start Ask the AI to design a landing page or dashboard UI and it will apply the premium design system automatically.

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, generous whitespace, and spring-physics motion to produce agency-tier output.

What fonts and icons does this design system use?▼

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

Does this design approach work with Tailwind CSS?▼

Yes, all rules are expressed in Tailwind utility classes such as backdrop-blur-2xl, rounded-[2rem], and custom cubic-bezier easings. The output targets React/Tailwind/HTML code directly.

How does the design handle mobile responsiveness?▼

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.

What animation performance rules does it enforce?▼

Animations use only transform and opacity, never layout-triggering properties like width or top. Backdrop-blur is restricted to fixed or sticky elements, and scroll reveals use IntersectionObserver or Framer Motion instead of scroll event listeners.

Related Skills

Explore More Design & Creative Skills→
TranVanTienDatTranVanTienDat

frontend-design

Generate production-quality frontend interfaces with distinctive typography, color, layout, and motion design.

Community
Advanced
Borg93Borg93

convert-web-app

Convert existing web applications into hybrid MCP Apps.

Community
Advanced
MediaAskeyDOJOMediaAskeyDOJO

ui-visual-validator

Detects unintended UI visual differences and validates WCAG accessibility standards.

Community
Advanced
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate