high-end-visual-design

Enforce premium UI and motion design constraints for web app components.

Updated Feb 24, 2026

Search Tags:#design systems #tailwind css #ui design #responsive layout #motion choreography #ux architecture #premium web styling

Ready to run

npx skills add https://github.com/FrekiManagarm/dunlo --skill high-end-visual-design-frekimanagarm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/FrekiManagarm/dunlo/tree/main/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/FrekiManagarm/dunlo --skill high-end-visual-design-frekimanagarm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents AI-generated interfaces from looking generic, cheap, or templated by enforcing premium agency-grade typography, spacing, shadows, component geometry, and motion principles.

Core Features & Use Cases

Premium visual language enforcement: Defines exact font choices (excluding common defaults), icon style constraints, and outlaw patterns like harsh borders and harsh/dark shadows.
Double-Bezel component architecture: Recommends nested outer/inner shells so cards and containers feel machined, glass-like, and physically grounded.
Fluid motion choreography: Requires GPU-safe motion using transform/opacity, custom cubic-bezier easing, staggered reveals, and spring-like interaction physics.

Quick Start

Ask the AI to design a landing page section for your product using the high-end-visual-design ruleset while following the Double-Bezel architecture and fluid motion requirements.

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 avoid generic looking UI in Tailwind CSS landing pages?▼

To avoid generic looking UI in Tailwind CSS landing pages, apply strict design constraints like banned default fonts and harsh shadows, replacing them with custom typography and Double-Bezel component geometry for a machined, premium aesthetic.

What is Double-Bezel component architecture for web apps?▼

Double-Bezel component architecture is a UI design pattern using nested outer and inner shells for cards and containers. This approach makes components feel physically grounded and glass-like, avoiding cheap, flat templated layouts.

How do I add premium motion choreography to responsive layouts?▼

Add premium motion choreography to responsive layouts by enforcing GPU-safe transform and opacity animations. Use custom cubic-bezier easing, staggered reveals via IntersectionObserver, and spring-like interaction physics for fluid entry animations.

Does premium web styling work with mobile-safe layout collapse below 768px?▼

Yes, premium web styling enforces mobile-safe layout collapse below 768px. The design ruleset ensures that advanced component geometry, nested shells, and motion choreography adapt smoothly across all states and breakpoints.

Why does my AI generated UI look cheap and how do I fix it?▼

AI generated UI looks cheap due to default styling patterns and generic layouts. Fix it by enforcing premium agency-grade typography, spacing, and Double-Bezel shadows, while outlawing harsh borders and dark shadows.

What are the limitations of using strict design constraints for feature sections?▼

Strict design constraints for feature sections limit layout flexibility by banning default fonts, icons, and generic shadows. You must adhere to Double-Bezel geometry and GPU-safe motion, which requires precise implementation to avoid breaking responsive breakpoints.