Which frontend frameworks are supported by this skill?

It is framework-agnostic and can generate high-quality code for React, Vue, Svelte, or vanilla HTML/CSS/JS depending on your project requirements.

How does the Frontend Design skill avoid the 'AI-generated' look?

The skill specifically avoids generic defaults like Inter or Arial fonts and standard purple gradients. Instead, it utilizes distinctive typography, asymmetrical layouts, and custom textures to create a hand-crafted, professional aesthetic.

Does it include animations and motion design?

Absolutely. It prioritizes CSS-only animations for lightness and uses libraries like Framer Motion for React to create sophisticated, high-impact micro-interactions.

Can I request specific design styles like Brutalism or Minimalism?

Yes. The skill is designed to interpret creative directions and commit fully to a specific aesthetic, whether it's industrial, playful, luxury, or any other bold design language.

Frontend Design

Name: Frontend Design
Author: phrazzld

byphrazzld

•

Design Tools

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

The Frontend Design skill is engineered to transform Claude into a high-end UI/UX developer capable of producing unique, memorable web interfaces. It moves beyond standard component libraries and 'AI slop' by prioritizing bold typographic choices, intentional motion design, and non-traditional spatial compositions. Whether you need a brutally minimalist landing page or a maximalist, interactive application, this skill ensures that every output is production-ready, accessible, and visually striking, with a clear and cohesive aesthetic point-of-view.

Key Features

012 GitHub stars

02Creates complex, grid-breaking layouts and unexpected spatial compositions

03Eliminates generic AI aesthetics through bold, intentional design directions

04Integrates high-impact motion design and sophisticated CSS micro-interactions

05Implements advanced typography using distinctive and characterful font pairings

06Generates production-grade code across React, Vue, and vanilla HTML/CSS stacks

Use Cases

01Prototyping complex web applications that demand a specific aesthetic like Brutalism or Retro-futurism

02Developing interactive UI components with custom textures, shadows, and animations

03Building high-fidelity landing pages that require a unique, premium brand identity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config frontend-design

For use in Claude.ai and ChatGPT

Download Skill