Can this skill generate code for specific frameworks?

Yes, it can generate production-grade code for HTML/CSS, React, Vue, and other modern frontend frameworks based on your requirements.

How does this skill avoid 'AI slop' aesthetics?

It explicitly avoids common defaults like the Inter font or generic purple gradients, instead choosing bold, intentional styles like brutalism, luxury, or retro-futurism.

Does it include accessibility considerations?

Yes, the skill emphasizes production-grade code which includes maintaining technical constraints like performance, responsiveness, and accessibility.

Can I specify a particular design style?

Absolutely. You can request specific aesthetics such as brutally minimal, maximalist chaos, or organic/natural to guide the creative direction.

Frontend Design

Name: Frontend Design
Author: phulin

byphulin

0•

デザインツール

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

The Frontend Design skill empowers Claude to move beyond standard boilerplate components by implementing bold, intentional aesthetic directions. It focuses on meticulous typography, unique spatial compositions, and high-impact motion design to create unforgettable web interfaces. Whether building a minimalist landing page or a complex maximalist dashboard, this skill ensures that every element—from color palettes and noise textures to grid-breaking layouts—is executed with production-grade precision and a cohesive visual point-of-view that avoids common 'AI slop' aesthetics.

主な機能

01Production-Ready Code: Delivers clean, functional code for React, Vue, or vanilla HTML/CSS.

02Atmospheric Visuals: Incorporates gradient meshes, noise textures, and layered transparencies for depth.

03Dynamic Motion & Micro-interactions: Implements high-impact CSS and Motion library animations for delightful UX.

04Anti-Generic AI Design: Explicitly avoids overused fonts like Inter and standard purple-gradient palettes.

05Advanced Typography: Curates unique font pairings and characterful display types for specific brand contexts.

060 GitHub stars

ユースケース

01Building a high-end marketing landing page that requires a unique, magazine-style layout.

02Prototyping a visually striking portfolio site with custom cursors and complex scroll-triggered effects.

03Developing a distinctive component library that deviates from standard Material or Bootstrap patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phulin/oy2 frontend-design

For use in Claude.ai and ChatGPT

Download Skill