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.

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

01Creates non-traditional spatial compositions including asymmetrical layouts and grid-breaking elements

02Implements advanced CSS motion and staggered animations for high-impact micro-interactions

03Prioritizes sophisticated typography using distinctive font pairings and variable weights

04Generates bold, intentional aesthetic directions to eliminate generic 'AI slop' patterns

05Supports design token synchronization through design.json for consistent brand styling

066 GitHub stars

Use Cases

01Building a unique marketing landing page that requires a specific, memorable visual identity

02Prototyping creative web applications that demand high-end motion design and complex layouts

03Developing a production-grade component library with refined typography and custom textures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adeonir/claude-code-extras frontend-design

For use in Claude.ai and ChatGPT

Download Skill