What is the high-end visual design skill?
High-end visual design is a SKILL.md in the taste-skill repository, stored in the soft-skill folder. It tells your AI coding agent to pick one vibe and one layout archetype, build cards as nested shells, use custom easing, and avoid a ban list of fonts, icons, borders and shadows that read as cheap.
High-end visual design is the install name of the soft-skill folder in the leonxlnx/taste-skill repository. Its SKILL.md is a single file of design rules that aims at calm, polished, expensive-feeling pages: soft contrast, a lot of whitespace, premium fonts and spring-style motion.
The file is written as a directive to the agent, with a named persona, a list of automatic failures and an execution sequence. Most examples use Tailwind class names, and the output it asks for is React, Tailwind or HTML.
What changes in your agent's output
- The agent rolls one vibe archetype and one layout archetype before it writes code, so two pages in a row should not share a look.
- Cards and containers become two layers: an outer shell with a hairline ring and a large radius, and an inner core with its own highlight and a smaller concentric radius.
- Primary buttons are full pills, and a trailing arrow sits in its own small circle instead of next to the label.
- Sections get macro-whitespace, with
py-24topy-40padding, and headings get a tiny pill-shaped eyebrow tag. - Every element enters on scroll with a heavy fade-up, and transitions use custom cubic-bezier curves instead of
linearorease-in-out.
Who the high-end visual design skill is for
Best for
- Landing pages, SaaS marketing sites, portfolios and agency-style pages where polish is the goal.
- Teams whose agent output keeps coming back with Inter, thick icons, gray borders and a symmetrical three-column grid.
- Developers who work in React and Tailwind and want a motion and depth recipe they can paste in.
Not for
- Dense tools. The rules center on whitespace and large radii, and say nothing about tables or data-heavy screens. For a hard, data-first look, see industrial-brutalist-ui.
- Quiet editorial product UI. minimalist-skill covers that direction with a more restrained palette.
- Fixing a page that already exists. redesign-existing-projects audits first and then edits.
Use it with UiChemy
This skill produces front-end code, so it suits a site you deploy yourself. To land an AI-built page in WordPress, UiChemy AI to WordPress imports an existing AI build, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install High-End Visual Design Skill: Agency-Grade UI
git clone https://github.com/leonxlnx/taste-skill.gitClone the repository
Run
git clone https://github.com/leonxlnx/taste-skill.git.Copy the skill folder
Copy
skills/soft-skillinto the folder where your agent loads skills, for one project or globally. The folder is named soft-skill, while the frontmatter name is high-end-visual-design.Make sure the fonts exist
The skill assumes premium fonts such as Geist, Clash Display, PP Editorial New or Plus Jakarta Sans are available. Load them in your project first.
Ask for UI work
Request a landing page or a hero section. The agent should state a vibe and a layout archetype before writing code.
Check that it loaded
Ask for a pricing section. Cards should have an outer shell and an inner core, buttons should be pills with a nested arrow circle, and no Inter, linear transition or sticky edge-to-edge navbar should appear.
Key features
- Absolute zero ban listBanned: Inter, Roboto, Arial, Open Sans and Helvetica, thick-stroked Lucide, FontAwesome and Material icons, generic 1px gray borders, harsh shadows, edge-to-edge sticky navbars and linear or ease-in-out transitions.
- Creative variance engineThe agent picks one of three vibes, Ethereal Glass, Editorial Luxury or Soft Structuralism, and one of three layouts: Asymmetrical Bento, Z-Axis Cascade or Editorial Split.
- Double-bezel cardsCards are built as an outer shell with a hairline ring, a small padding and a large radius, wrapped around an inner core whose radius is calculated to stay concentric.
- Button-in-button patternPrimary buttons are
rounded-fullpills. A trailing arrow icon is nested in its own circular wrapper, flush with the button's right padding. - Spatial rhythmSection padding doubles to
py-24topy-40, and headings are preceded by a tiny uppercase eyebrow pill with wide letter spacing. - Fluid island navThe navbar is a floating glass pill detached from the top. The hamburger morphs into an X, and the opened menu is a full-screen blurred overlay with staggered link reveals.
- Magnetic hover physicsButtons scale down slightly when pressed, and the inner icon circle shifts diagonally and scales up on hover.
- Scroll entry animationElements fade up with blur over 800ms or more, driven by IntersectionObserver or Framer Motion
whileInView. A scroll event listener is ruled out. - Performance guardrailsAnimate only transform and opacity. Use
backdrop-bluronly on fixed or sticky elements, put grain on fixedpointer-events-nonelayers, and reserve z-index for systemic layers. - Mobile override and checklistBelow 768px, layouts collapse to
w-fullwithpx-4. Full-height sections usemin-h-[100dvh], and an 11-point pre-output checklist is the last filter.
Frequently asked questions
What is the high-end visual design skill?
It is a SKILL.md in the taste-skill repository that tells an AI coding agent how to build pages that look expensive. It defines a ban list, three vibes, three layouts, nested card shells, pill buttons, custom easing and scroll animation, then ends with a checklist the agent runs before output.
How do I install high-end visual design?
Clone leonxlnx/taste-skill and copy the skills/soft-skill folder into the place your agent reads skills from. The folder name is soft-skill, but the skill's own name field is high-end-visual-design, which is the name the README lists as its install name.
Which AI coding agents can use it?
The README presents taste-skill as portable Agent Skills for tools such as Codex, Cursor and Claude Code, and says you can paste a SKILL.md into ChatGPT or Codex conversations. It does not publish a per-agent compatibility table, so check how your agent loads skill folders.
Which fonts does high-end visual design ban?
It bans Inter, Roboto, Arial, Open Sans and Helvetica. It suggests premium alternatives such as Geist, Clash Display, PP Editorial New and Plus Jakarta Sans, and it assumes you have them available in the project.
How is it different from design-taste-frontend?
Both live in the same repository. design-taste-frontend is the default skill that reads the brief and sets three dials. High-end visual design commits to a polished, soft, premium direction with specific component recipes like double-bezel cards.
Does it require Tailwind or React?
The rules are written with Tailwind class names such as rounded-[2rem] and py-24, and the execution step asks for React, Tailwind or HTML code. Other stacks can follow the same ideas, but the examples will need translating.
What license does the skill use?
The taste-skill repository uses the MIT license, as GitHub shows. The install count of 400K on this page comes from a third-party skills listing and is not stated in the repository.