Can I use this for specific frameworks like React or Vue?

Yes, it generates production-grade code compatible with modern frameworks, utilizing specific libraries like Framer Motion for React when appropriate.

How does this skill avoid 'AI slop' aesthetics?

It explicitly rejects overused defaults like the Inter font and predictable purple gradients, instead opting for distinctive typography, intentional color palettes, and unconventional layouts.

What design styles can this skill implement?

It can execute a wide range of directions including Brutalist, Retro-futuristic, Editorial, Luxury, and Minimalist, depending on your project requirements.

Does it focus on performance and accessibility?

While prioritizing aesthetics, the skill is designed to produce production-grade code that maintains technical standards for performance and functional reliability.

Frontend Design Engine

Name: Frontend Design Engine
Author: jjeremycai

byjjeremycai

0•

디자인 도구

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

The Frontend Design skill transforms Claude into a sophisticated UI/UX engineer capable of building memorable, polished web interfaces. By moving beyond standard component libraries and 'AI slop' aesthetics, this skill implements intentional design directions—ranging from brutalist and maximalist to refined minimalism. It focuses on advanced typography pairing, unconventional spatial compositions, and sophisticated motion design to ensure every generated component or application feels professionally designed and unique to its specific context.

주요 기능

01Advanced typography selection using characterful display and body font pairings

02Complex visual texturing using gradient meshes, grain overlays, and noise textures

03Creative spatial compositions including grid-breaking layouts and asymmetric flows

04Anti-generic design logic that avoids overused system fonts and standard layouts

05High-impact motion design utilizing CSS animations and React Motion libraries

060 GitHub stars

사용 사례

01Creating polished web application prototypes that require a distinctive brand identity

02Developing high-end marketing landing pages with unique editorial aesthetics

03Building creative portfolio sites with sophisticated micro-interactions and transitions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jjeremycai/claudekit frontend-design

For use in Claude.ai and ChatGPT

Download Skill