high-end-visual-design

Generates premium UI code with curated fonts, layouts, shadows, and spring-based animations.

1|Updated Jan 10, 2024
One-click install
npx skills add https://github.com/noemdb/cfla --skill high-end-visual-design-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/noemdb/cfla --skill high-end-visual-design-noemdb

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 an agency-grade design system so generated React, Tailwind, or HTML output reads as a polished, high-end product instead of a template. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto, Arial), generic borders, harsh drop shadows, and linear easing curves that make designs look cheap. - Variance Engine: Selects from texture archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so each output is visually distinct. - Component & Motion Rules: Defines Double-Bezel nested card architecture, button-in-button CTA patterns, staggered nav reveals, and cubic-bezier spring physics with GPU-safe transform/opacity animations. - Use Case: Ask for a SaaS landing page and receive a dark glassmorphic bento grid with floating pill navigation, magnetic hover buttons, and scroll-triggered fade-up reveals that collapse cleanly on mobile. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glass aesthetic and fluid animations.

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 constraint system that bans default fonts like Inter and Roboto, flat 1px borders, and linear transitions. This Skill enforces premium typefaces, nested card architecture, macro-whitespace, and spring-based cubic-bezier motion so output reads as custom agency work.

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 line icons like Phosphor Light or Remix Line. Inter, Roboto, Arial, Open Sans, Helvetica, Lucide, FontAwesome, and Material Icons are explicitly banned.

Does this skill work with Tailwind CSS and React?▼

Yes, the output targets React, Tailwind CSS, or plain HTML. Rules are expressed in Tailwind utility classes such as backdrop-blur-2xl, rounded-[2rem], and custom cubic-bezier easing, with Framer Motion whileInView suggested for scroll reveals.

How does the skill handle mobile responsive layouts?▼

Asymmetric layouts collapse to single-column stacks below 768px with w-full, px-4, and py-8 spacing. Rotations and overlaps are removed on mobile, and min-h-[100dvh] replaces h-screen to avoid iOS Safari viewport jumping.

Why should animations avoid backdrop-blur on scrolling content?▼

Applying backdrop-blur to scrolling containers forces continuous GPU repaints and causes severe mobile frame drops. The skill restricts blur to fixed or sticky elements like navbars and overlays, and animates only transform and opacity properties.