Which CSS frameworks are supported?

The skill is optimized for Tailwind CSS, CSS Modules, and animation libraries like Framer Motion or GSAP.

Does it include icon recommendations?

It recommends modern, lightweight icon sets like Lucide React and Remix Icon while specifically advising against outdated libraries for better performance.

How does this differ from standard AI-generated code?

Unlike generic outputs, this skill enforces specific aesthetic directions like Neo-Brutalism and provides detailed motion/typography guidance to avoid the 'AI slop' look.

Can I use it to refactor my existing UI?

Yes, you can provide existing code snippets and use the skill to transform them into specific professional styles such as Minimalist or Cyberpunk.

UI Design Core

Name: UI Design Core
Author: Protagonistss

byProtagonistss

디자인 도구

Generates high-end, production-grade UI components and layouts while intentionally avoiding generic AI design patterns.

소개

UI Design Core is a specialized Claude Code skill designed to elevate frontend development by implementing sophisticated design systems and unique aesthetic directions. It moves beyond standard, repetitive AI-generated looks by applying principles like Brutalism, Glassmorphism, and editorial layouts, ensuring that code output features refined typography, motion-rich interactions, and purposeful depth. It provides developers with immediate access to professional-grade styling strategies, anti-pattern checks, and modern tech stack recommendations including Tailwind CSS and Framer Motion to create interfaces that stand out.

주요 기능

Typography & Motion Optimization (Cubic-bezier curves and professional font pairing)
Anti-Pattern Prevention (Eliminates generic gradients and boring shadows)
0 GitHub stars
Instant Layout Refactoring (Converts basic skeletons into high-impact visuals)
Advanced Aesthetic Direction (Brutalism, Glassmorphism, Neo-Brutalism, Editorial)
Modern Tech Stack Integration (Tailwind CSS, Framer Motion, and Lucide Icons)

사용 사례

Refactoring existing generic UI components into premium, editorial-style interfaces.
Rapidly prototyping a high-conversion landing page with a distinct visual identity.
Enforcing design consistency and professional UX patterns across a new web application.

소개

주요 기능

Typography & Motion Optimization (Cubic-bezier curves and professional font pairing)
Anti-Pattern Prevention (Eliminates generic gradients and boring shadows)
0 GitHub stars
Instant Layout Refactoring (Converts basic skeletons into high-impact visuals)
Advanced Aesthetic Direction (Brutalism, Glassmorphism, Neo-Brutalism, Editorial)
Modern Tech Stack Integration (Tailwind CSS, Framer Motion, and Lucide Icons)

사용 사례

Refactoring existing generic UI components into premium, editorial-style interfaces.
Rapidly prototyping a high-conversion landing page with a distinct visual identity.
Enforcing design consistency and professional UX patterns across a new web application.