high-end-visual-design

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

Updated Oct 7, 2022
One-click install
npx skills add https://github.com/tamagusko/linux-cfg --skill high-end-visual-design-tamagusko
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/tamagusko/linux-cfg/tree/main/dotfiles/claude/skills/high-end-visual-design
Command: npx skills add https://github.com/tamagusko/linux-cfg --skill high-end-visual-design-tamagusko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic because they default to common fonts, flat cards, 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, Arial), 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 no two outputs look alike. - Component & Motion Patterns: Defines Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, and cubic-bezier spring physics, with GPU-safe animation and mobile collapse rules. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with glassmorphism cards, staggered entry animations, and responsive fallbacks instead of a generic Bootstrap-style grid. ## 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 websites 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 archetypes, nested card structures, macro-whitespace, and spring-physics motion to produce agency-level output.

What fonts and icons does this design skill use?

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

Does the generated UI code work on mobile devices?

Yes. All asymmetric layouts collapse to single-column stacks below 768px with w-full and px-4 spacing. It also mandates min-h-[100dvh] instead of h-screen to prevent iOS Safari viewport jumping, and removes rotations and overlaps on small screens.

Which frameworks does the generated code support?

The output targets React, Tailwind CSS, and plain HTML. Scroll animations use IntersectionObserver or Framer Motion's whileInView rather than scroll event listeners to avoid performance issues.

Why does backdrop-blur cause performance problems in web animations?

Backdrop-blur on scrolling containers forces continuous GPU repaints and causes mobile frame drops. This Skill restricts blur to fixed or sticky elements like navbars and overlays, and animates only transform and opacity properties.