frontend-aesthetics

Guide typography, color, motion, and interactions for distinctive frontend aesthetics.

27|16|Updated Oct 20, 2025

Search Tags:#typography #design #frontend #ui-ux #color-palette #ai-slop

Ready to run

npx skills add https://github.com/bejranonda/LLM-Autonomous-Agent-Plugin-for-Claude --skill frontend-aesthetics-bejranonda

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-aesthetics
Source: https://github.com/bejranonda/LLM-Autonomous-Agent-Plugin-for-Claude/tree/main/skills/frontend-aesthetics
Command: npx skills add https://github.com/bejranonda/LLM-Autonomous-Agent-Plugin-for-Claude --skill frontend-aesthetics-bejranonda

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides contextual design guidance to avoid generic AI-generated aesthetics, helping teams craft distinctive typography, color, motion, and layouts for polished user interfaces.

Core Features & Use Cases

Avoid AI Slop: Principles to resist default AI-generated visuals like generic fonts and gradients.
Distinctive Typography & Color Pairings: Contextual recommendations for typography and color decisions without fixed values.
Motion & Interaction Guidance: Thoughtful motion and micro-interactions guidance that enhances UX.
Use Case: Apply these principles when designing dashboards, marketing sites, or product experiences to achieve a distinctive look.

Quick Start

Ask for design guidance to craft a distinctive UI for a new dashboard, for example: "Create a distinctive typography palette and motion plan for a fintech dashboard."

Frequently Asked Questions about frontend-aesthetics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I avoid generic AI-generated UI design in my frontend?▼

Avoid AI-generated UI by applying contextual design principles for distinctive typography, color palettes, and motion. This Skill guides you through deliberate aesthetic choices—avoiding default fonts and gradients—to create polished, recognizable interfaces for dashboards, marketing sites, and product UIs.

What's the best way to choose typography and color pairings for a distinctive design system?▼

Select typography and color pairings contextually rather than using hard-coded defaults. This Skill provides reusable guidance tailored to your product type and audience, ensuring recommendations scale across your design system without relying on generic AI aesthetics.

How do I add motion and micro-interactions that enhance UX without feeling overdone?▼

Motion and interaction guidance depend on your product context. This Skill teaches principles for thoughtful micro-interactions that improve usability while maintaining a cohesive feel—avoiding both bland defaults and gratuitous effects.

Can I use this guidance for frontend dashboards and marketing sites together?▼

Yes. This Skill applies to multiple modern frontend contexts—dashboards, marketing sites, and product UIs—providing context-sensitive design guidance that adapts to each use case rather than prescribing one-size-fits-all aesthetics.

What makes contextual design guidance better than following standard UI frameworks?▼

Contextual guidance avoids hard-coded design values by teaching principles that scale with your product's needs. Unlike static frameworks, it emphasizes distinctive aesthetics tailored to your specific frontend context—helping you escape default, AI-generated looks.