102.7K+Download
Skip to the usage guide
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
Download OpenDesignView usage guide
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

An opinionated visual-direction skill for React, Tailwind and HTML interfaces. It specifies typography, spacing, nested cards and motion while rejecting several common defaults. The source's "$150k agency" language is an aesthetic aspiration, not an assessed monetary value or quality guarantee.

It pairs one of three visual moods with one of three layout patterns, then asks for nested enclosures, trailing-icon buttons and generous whitespace. Mobile rules collapse asymmetric layouts below 768px. Its motion and blur examples are not entirely consistent with its own performance restrictions, so the finished implementation still needs review.

What it produces

  • UI code following the chosen mood and layout, including nested cards, custom motion and mobile layout rules; visual quality and performance must be checked on the actual page.
See the example prompt ↗

How It Works

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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

  • Exploratory SaaS, portfolio or editorial interfaces where a strong visual style and spacious layout are welcome.
  • Projects with flexibility to choose new fonts, icon styles, card structures and motion rather than preserve an existing design system.

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.

  1. 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.

  2. Never Repeat the Same Layout Twice

    The source asks the agent to vary combinations of layout and texture. That encourages variation, but cannot guarantee every output is unique.

  3. Use Only Premium Typography and Icons

    The source assumes fonts such as Geist, Clash Display or PP Editorial New are available and prefers light icon strokes. Verify the actual font files and usage rights; the skill does not supply them.

  4. Apply the Double-Bezel to All Major Components

    Never place premium cards or containers flatly.

  5. 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.

  6. Animate Only Transform and Opacity

    Its performance guardrail favors transform and opacity rather than layout properties. This reduces some layout work but does not guarantee smooth performance on every device.

  7. Restrict backdrop-blur to Fixed Elements Only

    Apply backdrop-blur exclusively to fixed or sticky elements like navbars and overlays.

  8. 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 for [SaaS product name] using the Ethereal Glass mood and an asymmetric feature-card layout. Use [approved content and assets], a floating navigation pill, eyebrow, headline and CTA with a nested trailing icon. Keep the mobile layout single-column below 768px, remove overlaps and use restrained transform/opacity motion. Show any font or asset dependency before relying on it.

Editorial starter example based on the source workflow; not a recorded run.

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)
  • Check generous desktop spacing while respecting the source's smaller mobile padding override below 768px.
  • Validate all transitions use custom cubic-bezier curves and no linear or ease-in-out easing is present
  • Inspect animation behavior and mobile performance; resolve the source's conflict between blur-based reveals and transform/opacity-only guidance, and provide usable reduced-motion behavior.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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

  1. Meta Information & Core DirectiveDefines the Vanguard_UI_Architect persona, $150k+ agency objective, and the Variance Mandate requiring unique outputs
  2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)Lists all banned fonts, icons, borders, shadows, layouts, and motion patterns that cause instant design failure
  3. THE CREATIVE VARIANCE ENGINESpecifies three Vibe Archetypes and three Layout Archetypes to combine for unique premium outputs with mobile collapse rules
  4. 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
  5. MOTION CHOREOGRAPHY (FLUID DYNAMICS)Defines custom cubic-bezier transitions, Fluid Island Nav with hamburger morph, magnetic button hover physics, and scroll interpolation animations
  6. PERFORMANCE GUARDRAILSRestricts animation to transform and opacity only, limits backdrop-blur to fixed elements, and enforces z-index discipline
  7. EXECUTION PROTOCOLProvides exact five-step sequence from silent archetype selection through scaffolding, architecture, choreography, to pixel-perfect output delivery
  8. 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 source describes visual patterns and suggests IntersectionObserver or Framer Motion for reveals. It does not bundle the selected fonts, icon assets or animation runtime.

Its blanket claims about scroll listeners and premium quality are design prescriptions, not measured results. Check the chosen implementation and dependencies in your project.

High End Visual Design

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

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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