How does this skill avoid the 'generic AI' look?

It specifically prohibits overused assets like the Inter font and standard purple gradients, instead mandating unique typographic pairings and bold, intentional aesthetic directions.

What design styles can this skill implement?

It can execute a wide range of styles including brutalist, luxury/refined, retro-futuristic, industrial, and editorial/magazine layouts.

Does it support animations and micro-interactions?

Yes, it prioritizes high-impact motion such as staggered reveals, scroll-triggered effects, and surprising hover states to create a delightful user experience.

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

Yes, the skill is framework-agnostic and can generate production-grade code for React (using Motion library), Vue, or vanilla HTML/CSS.

Frontend Design & Aesthetics

Name: Frontend Design & Aesthetics
Author: Delqhi

byDelqhi

•

设计工具

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

The Frontend Design skill transforms Claude into a high-end UI/UX engineer capable of producing 'unforgettable' web interfaces. It bypasses the common 'AI slop' aesthetic—characterized by overused fonts and predictable layouts—in favor of bold, intentional design directions such as brutalist, retro-futuristic, or refined minimalism. By focusing on sophisticated typography, unique spatial compositions, and high-impact motion, this skill ensures that generated components, pages, and applications feel hand-crafted, production-ready, and meticulously refined.

主要功能

01Aesthetic Directional Thinking (Minimalist to Maximalist)

02High-Impact Motion & CSS Micro-interactions

03Production-Grade Code Generation (React, Vue, HTML/CSS)

04Advanced Typography & Custom Font Pairing

05Non-Standard Spatial Layouts & Grid-Breaking Designs

061 GitHub stars

使用场景

01Creating bespoke web components with sophisticated textures and animations

02Developing high-end marketing landing pages with a unique editorial feel

03Building distinctive dashboard interfaces that stand out from generic templates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add delqhi/zoe-solar-accounting-ocr frontend-design

For use in Claude.ai and ChatGPT

Download Skill