high-end-visual-designby Leonxlnx

High End Visual Design Skill.

A Claude Code and Codex skill for UI design: teaches high-end agency detail: type, spacing, shadows, cards, and motion.

Web & UI

Leonxlnx/taste-skill · skills/soft-skill/SKILL.mdSKILL.md

--- name: high-end-visual-design description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS

Front matter and section headings read from the upstream file on 2026-09-14 · 10,545 characters in full

01 What it does

What the high-end-visual-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill teaches coding agents to produce $150k+ agency-level visual design by defining exact typographic choices, spatial rhythm, shadow techniques, card structures, and fluid motion patterns. It bans generic defaults (Inter, Roboto, thick-stroked icons, harsh shadows, standard easing) and enforces premium alternatives like Geist or Clash Display, ultra-light icons, and custom cubic-bezier transitions.

Every output must combine a unique Vibe Archetype (Ethereal Glass, Editorial Luxury, or Soft Structuralism) with a Layout Archetype (Asymmetrical Bento, Z-Axis Cascade, or Editorial Split) to prevent repetition. Components use nested Double-Bezel enclosures, Button-in-Button trailing icons, massive whitespace (py-24 to py-40), and scroll-interpolated entry animations. All motion simulates real-world physics via transform and opacity only, with strict performance guardrails for mobile.

What it produces

Flawless, pixel-perfect React/Tailwind/HTML code implementing the selected Vibe and Layout Archetypes with Double-Bezel component structures, custom cubic-bezier motion, and mobile-responsive collapse

See the example prompt ↗

How It Works

01
Roll the Variance Engine
Before writing code, the agent silently selects one Vibe Archetype and one Layout Archetype from predefined premium combinations based on the prompt's context to ensure uniquely tailored output.
02
Scaffold Background and Typography
Establish the chosen texture (OLED black with radial gradients, warm creams with noise overlay, or silver-grey with soft shadows) and set massive typography sizes with exaggerated macro-whitespace.
03
Architect Nested Component Structures
Build all major cards, inputs, and grids using the Double-Bezel technique: an outer shell with hairline border and padding wraps an inner core with its own background and mathematically calculated smaller radius.
04
Choreograph Fluid Motion
Inject custom cubic-bezier transitions for all state changes, staggered navigation reveals with translate-y and opacity shifts, and magnetic button hover physics with diagonal translation and scaling.
05
Apply Scroll Interpolation
Elements enter the viewport with a gentle fade-up animation (translate-y-16 blur-md opacity-0 resolving over 800ms+) using IntersectionObserver or Framer Motion's whileInView, never window scroll listeners.
06
Validate Against the Pre-Output Checklist
Evaluate the code against an 11-point matrix ensuring no banned patterns, correct archetype selection, Double-Bezel architecture, custom easing, mobile collapse, and GPU-safe animations before delivery.

02 Find your fit

When to Use the high-end-visual-design Skill

Use the high-end-visual-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Engineering $150k+ agency-level digital experiences for SaaS, AI, tech, lifestyle, real estate, consumer, health, or portfolio projects that require obsessive micro-interactions and cinematic spatial rhythm
Building interfaces that must exude haptic depth and flawless fluid motion with custom cubic-bezier transitions and scroll-interpolated entry animations

Know the Boundaries

Projects requiring Inter, Roboto, Arial, Open Sans, or Helvetica as the typography cannot use this skill
Designs needing standard thick-stroked Lucide, FontAwesome, or Material Icons are incompatible with this skill's ultra-light icon requirement
Interfaces with edge-to-edge sticky navbars glued to the top or symmetrical 3-column Bootstrap-style grids without massive whitespace gaps violate the layout constraints
Motion patterns using standard linear or ease-in-out transitions or instant state changes without interpolation are explicitly forbidden

What to Provide

Prompt context for archetype selectionThe user request should indicate the project type (SaaS, lifestyle, portfolio, etc.) so the agent can select the appropriate Vibe and Layout Archetype combination from the Variance Engine.

03 Inside the skill

Rules the high-end-visual-design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Ban All Generic Defaults
Never use Inter, Roboto, Arial, Open Sans, Helvetica, thick-stroked Lucide or Material Icons, 1px solid gray borders, harsh drop shadows (shadow-md, rgba(0,0,0,0.3)), edge-to-edge sticky navbars, symmetrical Bootstrap grids, or linear/ease-in-out transitions.
Never Repeat the Same Layout Twice
The agent must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite design language, ensuring no two outputs look identical.
Use Only Premium Typography and Icons
Assume Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans are available for fonts. Use only ultra-light, precise icon lines like Phosphor Light or Remix Line.
Apply the Double-Bezel to All Major Components
Never place premium cards or containers flatly.
Double Standard Padding for macro-whitespace
Use py-24 to py-40 for section padding to allow the design to breathe heavily. Standard padding is insufficient for premium feel.
Animate Only Transform and Opacity
Never animate top, left, width, or height as they trigger layout recalculations. Exclusively use transform and opacity for GPU-accelerated, performance-safe motion.
Restrict backdrop-blur to Fixed Elements Only
Apply backdrop-blur exclusively to fixed or sticky elements like navbars and overlays.
Collapse All Asymmetric Layouts Below 768px
Any asymmetric layout above md: breakpoint must aggressively fall back to w-full, px-4, py-8 on viewports below 768px.

04 Put it to work

Install high-end-visual-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add high-end-visual-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

Generic skills CLI form for skills/soft-skill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Verify no banned fonts (Inter, Roboto, Arial, Open Sans, Helvetica), icons (thick-stroked Lucide, FontAwesome, Material), borders (1px solid gray), shadows (shadow-md, harsh drop shadows), layouts (edge-to-edge sticky navbars, symmetrical grids), or motion patterns (linear, ease-in-out) are present
Confirm a Vibe Archetype (Ethereal Glass, Editorial Luxury, or Soft Structuralism) and Layout Archetype (Asymmetrical Bento, Z-Axis Cascade, or Editorial Split) were consciously selected and applied
Check all major cards and containers use the Double-Bezel nested architecture with outer shell (hairline border, padding, large radius) wrapping inner core (distinct background, smaller calculated radius)
Ensure section padding is at minimum py-24 and the layout breathes with exaggerated macro-whitespace
Validate all transitions use custom cubic-bezier curves and no linear or ease-in-out easing is present
Confirm scroll entry animations are present so no element appears statically, and all animations use only transform and opacity without animating layout-triggering properties like top, left, width, or height

In OpenDesign import high-end-visual-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill file: skills/soft-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License: MIT From LICENSE.
Repository stars: 86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for high-end-visual-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Meta Information & Core DirectiveDefines the Vanguard_UI_Architect persona, $150k+ agency objective, and the Variance Mandate requiring unique outputs
THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)Lists all banned fonts, icons, borders, shadows, layouts, and motion patterns that cause instant design failure
THE CREATIVE VARIANCE ENGINESpecifies three Vibe Archetypes and three Layout Archetypes to combine for unique premium outputs with mobile collapse rules
HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)Details the Double-Bezel nested architecture, Button-in-Button trailing icon pattern, and macro-whitespace spatial rhythm with eyebrow tags
MOTION CHOREOGRAPHY (FLUID DYNAMICS)Defines custom cubic-bezier transitions, Fluid Island Nav with hamburger morph, magnetic button hover physics, and scroll interpolation animations
PERFORMANCE GUARDRAILSRestricts animation to transform and opacity only, limits backdrop-blur to fixed elements, and enforces z-index discipline
EXECUTION PROTOCOLProvides exact five-step sequence from silent archetype selection through scaffolding, architecture, choreography, to pixel-perfect output delivery
PRE-OUTPUT CHECKLISTLists eleven mandatory validation checks against banned patterns, archetype application, Double-Bezel architecture, motion quality, mobile collapse, and performance

The Skill's Own Description

“Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.”

Front-matter description from SKILL.md. The full file is about 10,545 characters. Read the full file on GitHub.

06 Before you install

Questions About the high-end-visual-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does this skill include any JavaScript libraries or frameworks?

The skill focuses on visual design patterns and recommends using IntersectionObserver or Framer Motion's whileInView for scroll reveals, but does not include or install these libraries.

It explicitly instructs never to use window.addEventListener('scroll') as it causes continuous reflows and kills mobile performance. You need to provide the animation libraries yourself.

High End Visual Design

Run high-end-visual-design on a Real UI Design Task.

Download OpenDesign, import high-end-visual-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill high-end-visual-design

What the high-end-visual-design Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the high-end-visual-design Skill

Good Fit

Know the Boundaries

What to Provide

Rules the high-end-visual-design Skill Gives Claude Code and Codex

Ban All Generic Defaults

Never Repeat the Same Layout Twice

Use Only Premium Typography and Icons

Apply the Double-Bezel to All Major Components

Double Standard Padding for macro-whitespace

Animate Only Transform and Opacity

Restrict backdrop-blur to Fixed Elements Only

Collapse All Asymmetric Layouts Below 768px