How does this skill avoid the 'AI slop' aesthetic?

It intentionally avoids overused fonts like Inter and generic color schemes, instead opting for bold, intentional typography and unique spatial compositions that feel handcrafted.

Can I use this for complex data dashboards?

Yes, it excels at creating functional, high-density interfaces that maintain a clear aesthetic point-of-view while handling complex data visualizations.

Which frontend frameworks are supported?

The skill generates production-grade code for HTML/CSS, React, Vue, and other modern frameworks, prioritizing libraries like Framer Motion for React animations.

Can it help with existing UI components?

Absolutely. You can use it to restyle or 'beautify' existing components by applying its sophisticated design principles and refined styling techniques.

Does the skill prioritize performance and accessibility?

Yes, it balances bold visual choices with technical constraints, ensuring that generated code is performant, functional, and accessible.

Frontend Design

Name: Frontend Design
Author: BbgnsurfTech

byBbgnsurfTech

•

デザインツール

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

概要

The Frontend Design skill empowers Claude to generate high-end web components, landing pages, and full applications that look professionally designed rather than AI-generated. By prioritizing bold aesthetic directions—ranging from brutalist to luxury refined—this skill focuses on sophisticated typography, unique spatial compositions, and advanced CSS techniques. It guides Claude to move beyond 'safe' design choices, implementing real working code with exceptional attention to detail, texture, and motion, ensuring every interface is memorable and contextually appropriate.

主な機能

High-impact motion design and micro-interactions using CSS and Motion libraries
Advanced spatial layouts including grid-breaking and asymmetric design
3 GitHub stars
Custom visual depth through grain overlays, gradient meshes, and noise textures
Sophisticated typography selection and font pairing recommendations
Production-grade code generation for React, Vue, and vanilla HTML/CSS

ユースケース

Building a unique landing page that stands out from standard corporate SaaS templates
Beautifying existing UI layouts with professional-grade textures, shadows, and animations
Creating highly stylized React components for creative portfolios or premium dashboards

概要

主な機能

High-impact motion design and micro-interactions using CSS and Motion libraries
Advanced spatial layouts including grid-breaking and asymmetric design
3 GitHub stars
Custom visual depth through grain overlays, gradient meshes, and noise textures
Sophisticated typography selection and font pairing recommendations
Production-grade code generation for React, Vue, and vanilla HTML/CSS

ユースケース

Building a unique landing page that stands out from standard corporate SaaS templates
Beautifying existing UI layouts with professional-grade textures, shadows, and animations
Creating highly stylized React components for creative portfolios or premium dashboards