What frameworks are supported by this skill?

It provides implementation guidelines for standard HTML/CSS/JS, React (using Framer Motion), and Vue, ensuring high-quality output across various tech stacks.

Does this skill help with animations?

Yes, it focuses on high-impact motion design, including staggered reveals, scroll triggers, and sophisticated micro-interactions to create a premium feel.

How does this skill avoid generic AI designs?

It explicitly bans the use of default fonts like Inter or Roboto and generic layouts, instead forcing a commitment to a specific, bold aesthetic tone before coding begins.

Can I use this for production-level applications?

Absolutely. The skill is designed to produce production-grade code that considers technical requirements, performance, and maintainability alongside aesthetics.

Designing Frontend

Name: Designing Frontend
Author: sumik5

bysumik5

•

Design Tools

Generates distinctive, production-ready frontend interfaces using advanced design thinking to avoid generic AI aesthetics.

The Designing Frontend skill transforms how Claude approaches UI development by moving away from 'AI slop'—generic, predictable layouts and system fonts. It guides the AI to commit to bold aesthetic directions like Brutalism, Minimalism, or Retro-futurism, ensuring every interface is memorable and polished. By prioritizing unique typography, sophisticated spatial compositions, and high-impact motion design, this skill enables the creation of web components and applications that meet professional-grade design standards.

Key Features

01High-impact motion design guidelines using CSS animations or Framer Motion

02Intentional aesthetic tone selection to ensure brand-aligned design directions

03Advanced typography pairing and sophisticated custom color palette generation

041 GitHub stars

05Avoidance of generic 'AI slop' patterns such as default system fonts and predictable layouts

06Technical implementation strategies for HTML/CSS, React, and Vue stacks

Use Cases

01Building unique UI components that stand out from standard off-the-shelf libraries

02Refactoring generic web interfaces into polished, high-fidelity production designs

03Rapidly prototyping web applications with specific aesthetic constraints like Luxury or Industrial

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sumik5/dotfiles designing-frontend

For use in Claude.ai and ChatGPT

Download Skill