Can I use my own design tokens with this skill?

Yes. If a design.json file exists in your repository, the skill will automatically use it as the source of truth for colors, typography, spacing, and component styles.

Does it include support for animations?

Yes, it prioritizes high-impact motion design, focusing on CSS-only animations for performance or libraries like Framer Motion for React components.

How does this skill avoid generic AI designs?

It follows a 'Bold Aesthetic' philosophy, intentionally choosing specific design directions like 'retro-futuristic' or 'editorial' and strictly avoiding overused fonts like Roboto or standard purple-gradient color schemes.

Which frontend frameworks are supported?

The skill is framework-agnostic and can implement high-quality code in React, Vue, Svelte, or vanilla HTML/CSS/JS depending on your project's technical constraints.

Frontend Design

Name: Frontend Design
Author: adeonir

byadeonir

•

Design Tools

Creates distinctive, production-grade frontend interfaces with high design quality while avoiding generic AI aesthetics.

About

The Frontend Design skill empowers Claude to build highly polished, visually striking web interfaces that stand out from typical AI-generated layouts. By emphasizing intentional aesthetic directions—ranging from brutalist and maximalist to refined luxury—it guides the generation of production-ready components and applications with meticulous attention to typography, motion, and spatial composition. It integrates seamlessly with design tokens via a design.json file to ensure brand consistency across various modern frameworks like React, Vue, and Svelte.

Key Features

Creates non-traditional spatial compositions including asymmetrical layouts and grid-breaking elements
Implements advanced CSS motion and staggered animations for high-impact micro-interactions
Prioritizes sophisticated typography using distinctive font pairings and variable weights
Generates bold, intentional aesthetic directions to eliminate generic 'AI slop' patterns
Supports design token synchronization through design.json for consistent brand styling
6 GitHub stars

Use Cases

Building a unique marketing landing page that requires a specific, memorable visual identity
Prototyping creative web applications that demand high-end motion design and complex layouts
Developing a production-grade component library with refined typography and custom textures

About

Key Features

Creates non-traditional spatial compositions including asymmetrical layouts and grid-breaking elements
Implements advanced CSS motion and staggered animations for high-impact micro-interactions
Prioritizes sophisticated typography using distinctive font pairings and variable weights
Generates bold, intentional aesthetic directions to eliminate generic 'AI slop' patterns
Supports design token synchronization through design.json for consistent brand styling
6 GitHub stars

Use Cases

Building a unique marketing landing page that requires a specific, memorable visual identity
Prototyping creative web applications that demand high-end motion design and complex layouts
Developing a production-grade component library with refined typography and custom textures