How do I install the Aesthetic UI Engine skill?

Run npx skillmds@latest add learn-with-santosh/aesthetic-ui-engine in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Aesthetic UI Engine safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Aesthetic UI Engine?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Aesthetic UI Engine free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Aesthetic UI Engine?

learn-with-santosh (@learn-with-santosh) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Aesthetic UI Engine by learn-with-santosh

Name: Aesthetic UI Engine
Author: learn-with-santosh

Aesthetic UI Engine

Guides Claude to build stunning, premium, and modern web interfaces. Use this skill whenever the user asks for a UI design, a website, a component, or wants to make their web app look "premium," "professional," or "modern." This skill enforces high-end design principles like Glassmorphism, Dark Mode, sleek typography, and smooth animations.

File contents

Aesthetic UI Engine 🚀

This skill transforms basic web components into premium, state-of-the-art user interfaces. It enforces design principles that make web applications feel expensive, modern, and alive.

When to use this skill

Use this skill when:

Designing a new web application from scratch.
Refactoring an existing UI to look more "premium" or "professional."
Building individual components (buttons, cards, navbars) that need to "wow" the user.
Implementing dark mode or sophisticated color palettes.
Adding animations and micro-interactions.

Design Principles

1. The Glassmorphism Effect

Use background blur and subtle transparency to create depth.

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

2. Modern Typography

Avoid default browser fonts. Use high-quality Google Fonts like Inter, Outfit, or Poppins.

Headings: Semi-bold or Bold with tight letter-spacing.
Body: Regular with generous line-height (1.6+).

3. Sophisticated Color Palettes

Avoid flat primary colors (pure red, blue, green). Use curated HSL colors:

Dark Mode: Deep indigos (#0f172a), dark violets (#1e1b4b), or sleek blacks (#020617).
Accents: Vibrant gradients (e.g., linear-gradient(to right, #6366f1, #a855f7)).

4. Micro-interactions

Everything should feel alive. Add hover effects and smooth transitions.

.button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}

Output Format

Every UI design output must include:

1. Visual Specification

Color Palette: List hex codes and their usage.
Typography: Specify fonts and sizes.
Design Style: Describe the "vibe" (e.g., "Minimalist Dark Mode with Neon Accents").

2. Implementation (Code)

HTML: Clean, semantic structure.
CSS: Modern, utility-first (if requested) or structured Vanilla CSS.
JS: Only if needed for interactivity/animations.

3. Design Rational

Explain why these choices make the UI feel premium.

Example Frameworks

The "SaaS Hero" Section

Hook: Huge, bold heading with a gradient span.
Sub-hook: Muted text with 1.6 line height.
Primary CTA: Glowing button with a hover lift.
Secondary CTA: Ghost button with a subtle border.
Background: Radial gradient to create a "glow" behind the content.

The "Feature Card" Grid

Container: Glassmorphism cards.
Icon: Styled with a soft background glow.
Title: High contrast.
Description: Low contrast (muted).
Border: Subtle top-border glow on hover.

Safety & Accessibility

Ensure high contrast for readability (WCAG compliance).
Don't sacrifice usability for aesthetics.
Keep animations subtle (don't cause motion sickness).

Use this skill by describing the component or page you want to build, and I will apply these premium design patterns to it.

---name: aesthetic-ui-enginedescription: Guides Claude to build stunning, premium, and modern web interfaces. Use this skill whenever the user asks for a UI design, a website, a component, or wants to make their web app look "premium," "professional," or "modern." This skill enforces high-end design principles like Glassmorphism, Dark Mode, sleek typography, and smooth animations.---# Aesthetic UI Engine 🚀This skill transforms basic web components into premium, state-of-the-art user interfaces. It enforces design principles that make web applications feel expensive, modern, and alive.## When to use this skillUse this skill when:- Designing a new web application from scratch.- Refactoring an existing UI to look more "premium" or "professional."- Building individual components (buttons, cards, navbars) that need to "wow" the user.- Implementing dark mode or sophisticated color palettes.- Adding animations and micro-interactions.## Design Principles### 1. The Glassmorphism EffectUse background blur and subtle transparency to create depth.```css.glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;}```### 2. Modern TypographyAvoid default browser fonts. Use high-quality Google Fonts like **Inter**, **Outfit**, or **Poppins**.- **Headings**: Semi-bold or Bold with tight letter-spacing.- **Body**: Regular with generous line-height (1.6+).### 3. Sophisticated Color PalettesAvoid flat primary colors (pure red, blue, green). Use curated HSL colors:- **Dark Mode**: Deep indigos (#0f172a), dark violets (#1e1b4b), or sleek blacks (#020617).- **Accents**: Vibrant gradients (e.g., `linear-gradient(to right, #6366f1, #a855f7)`).### 4. Micro-interactionsEverything should feel alive. Add hover effects and smooth transitions.```css.button { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}.button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);}```## Output FormatEvery UI design output must include:### 1. Visual Specification- **Color Palette**: List hex codes and their usage.- **Typography**: Specify fonts and sizes.- **Design Style**: Describe the "vibe" (e.g., "Minimalist Dark Mode with Neon Accents").### 2. Implementation (Code)- **HTML**: Clean, semantic structure.- **CSS**: Modern, utility-first (if requested) or structured Vanilla CSS.- **JS**: Only if needed for interactivity/animations.### 3. Design RationalExplain *why* these choices make the UI feel premium.---## Example Frameworks### The "SaaS Hero" Section1. **Hook**: Huge, bold heading with a gradient span.2. **Sub-hook**: Muted text with 1.6 line height.3. **Primary CTA**: Glowing button with a hover lift.4. **Secondary CTA**: Ghost button with a subtle border.5. **Background**: Radial gradient to create a "glow" behind the content.### The "Feature Card" Grid1. **Container**: Glassmorphism cards.2. **Icon**: Styled with a soft background glow.3. **Title**: High contrast.4. **Description**: Low contrast (muted).5. **Border**: Subtle top-border glow on hover.---## Safety & Accessibility- Ensure high contrast for readability (WCAG compliance).- Don't sacrifice usability for aesthetics.- Keep animations subtle (don't cause motion sickness).Use this skill by describing the component or page you want to build, and I will apply these premium design patterns to it.

Frequently asked questions