What is 'AI slop' in UI design?

AI slop refers to generic, uninspired interfaces commonly generated by AI, such as overused purple-to-blue gradients on white backgrounds or indistinguishable card layouts.

Does this skill replace my existing design system?

No, it acts as an advisory layer that respects your project's design-dna.json or CSS tokens as the ultimate authority while improving decision-making within those constraints.

Can I use this for mobile development?

Yes, Frontend Aesthetics is optimized for web, Expo, and native iOS frontend contexts.

How does it handle typography?

It maps text to intentional semantic roles (Heading, Body, Meta) rather than using arbitrary sizes, ensuring alignment with your project's defined type ladder.

What happens if my project doesn't have a design-dna.json?

The skill will use its core aesthetic principles to push toward a cohesive and maintainable look, preparing the codebase for easier tokenization later.

Frontend Aesthetics

Name: Frontend Aesthetics
Author: adilkalam

byadilkalam

0•

디자인 도구

Enhances AI-generated user interfaces by applying intentional design principles and honoring project-specific design DNA.

This skill transforms Claude from a generic UI generator into a sophisticated design partner that avoids 'AI slop' and common template-like patterns. It works by layering global aesthetic principles—such as intentional typography, cohesive color palettes, and motion design—over a project's existing design system or design-dna.json file. Ideal for developers wanting to build premium, distinctive web and mobile interfaces that feel professionally designed rather than computer-generated, it ensures every UI decision is grounded in the project’s specific architectural constraints and tokens.

주요 기능

010 GitHub stars

02Eliminates generic 'AI slop' and template-like UI patterns

03Enforces project-specific design tokens and design-dna laws

04Implements intentional typography roles and semantic color scales

05Applies subtle motion and micro-interactions for state clarity

06Optimizes layout rhythm, vertical spacing, and visual depth

사용 사례

01Building premium dashboards that need to look distinctive rather than generic

02Refactoring legacy UI components to align with modern design systems

03Developing Expo or iOS apps that require strict brand consistency

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adilkalam/orca frontend-aesthetics

For use in Claude.ai and ChatGPT

Download Skill