How does this skill differ from standard AI-generated UI?

This skill is explicitly programmed to avoid 'generic' AI patterns like system fonts and predictable layouts, focusing instead on bold, intentional design directions like Brutalism, Minimalism, or Editorial styles.

What frameworks are supported by the Frontend Design skill?

It can generate code for various environments including React, Vue, and standard HTML/CSS/JS, frequently incorporating modern libraries like Framer Motion for high-quality interactions.

Can I request a specific design tone or style?

Yes. You can specify a tone such as 'Industrial', 'Playful', 'Luxury', or 'Cyberpunk', and the skill will adapt typography, spacing, and effects to match that vision.

Does the generated code follow best practices?

Absolutely. While prioritizing aesthetics, the skill maintains a focus on technical constraints including performance, accessibility, and clean code structure.

Frontend Design Architect

Name: Frontend Design Architect
Author: eyepyon

byeyepyon

•

Design Tools

Creates distinctive, production-grade frontend interfaces by prioritizing creative design thinking and sophisticated UI implementations.

The Frontend Design skill empowers Claude to move beyond generic AI-generated aesthetics by focusing on unique typography, bold color palettes, and custom motion design. It guides the creation of production-grade web components, landing pages, and dashboards that prioritize intentional design choices like asymmetrical layouts and textural depth. Whether you are building a minimalist portfolio or a maximalist dashboard, this skill ensures that every UI element is refined, accessible, and visually memorable, resulting in code that feels handcrafted rather than templated.

Key Features

01Advanced Typography & Color: Curates distinctive font pairings and high-impact color palettes using CSS variables for consistency.

02Intentional Aesthetic Direction: Selects specific visual styles like Brutalist, Retro-future, or Luxury to avoid generic UI patterns.

03Multi-framework Implementation: Generates clean, production-ready code in React, Vue, or standard HTML/CSS/JS.

04Creative Layout Engineering: Utilizes non-traditional grids, overlapping elements, and negative space to create memorable interfaces.

05Custom Motion Design: Implements sophisticated animations and micro-interactions using CSS and motion libraries like Framer Motion.

061 GitHub stars

Use Cases

01Building high-conversion landing pages with a unique, brand-specific visual identity.

02Refactoring existing web interfaces to improve visual hierarchy, typography, and overall user experience.

03Developing custom React component libraries with complex animations and refined styling.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add eyepyon/car frontend-design

For use in Claude.ai and ChatGPT

Download Skill