What is 'AI slop' and how does this skill avoid it?

AI slop refers to generic, templated designs common in AI output. This skill avoids it by using unique typography, asymmetric layouts, and specific brand context instead of defaults.

Can I use this for production-ready applications?

Absolutely. The skill is specifically tuned to generate production-grade code that is accessible, performant, and visually striking.

Why does the skill require context before designing?

Design is only effective when it serves a specific audience. Gathering context on brand personality and use cases ensures the resulting code is intentional and functional.

Does this skill support modern CSS features?

Yes, it utilizes modern CSS such as OKLCH color functions, clamp() for fluid typography, and container queries for component-level responsiveness.

Frontend Design

Name: Frontend Design
Author: Moliboy5000

byMoliboy5000

0•

디자인 도구

Creates distinctive, production-grade frontend interfaces with high-quality aesthetics that avoid generic AI-generated styles.

The Frontend Design skill transforms Claude into a sophisticated UI/UX engineer capable of generating memorable, production-ready web interfaces. By enforcing a rigorous context-gathering protocol and adhering to professional design principles, it ensures every component and layout has a clear aesthetic point-of-view. The skill prioritizes advanced typography, modern CSS color functions like OKLCH, and fluid spatial layouts while intentionally avoiding common 'AI slop' patterns such as overused gradients, generic card grids, and uninspired system fonts.

주요 기능

01Strict context-gathering protocol for audience-specific brand personality

02Perceptually uniform color palettes using modern CSS functions like OKLCH

03Component-level responsiveness powered by CSS container queries

040 GitHub stars

05Advanced typography systems with fluid scaling and unique pairings

06Sophisticated motion design using exponential easing and performance-first transitions

사용 사례

01Generating custom UI component libraries that stand out from standard frameworks

02Building high-end marketing landing pages that require a unique brand identity

03Developing complex dashboard interfaces with clear visual hierarchy and refined UX

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moliboy5000/.claude frontend-design

For use in Claude.ai and ChatGPT

주요 기능

01Strict context-gathering protocol for audience-specific brand personality

02Perceptually uniform color palettes using modern CSS functions like OKLCH

03Component-level responsiveness powered by CSS container queries

040 GitHub stars

05Advanced typography systems with fluid scaling and unique pairings

06Sophisticated motion design using exponential easing and performance-first transitions

사용 사례

01Generating custom UI component libraries that stand out from standard frameworks

02Building high-end marketing landing pages that require a unique brand identity

03Developing complex dashboard interfaces with clear visual hierarchy and refined UX

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moliboy5000/.claude frontend-design

For use in Claude.ai and ChatGPT