How does this skill differ from standard Claude coding responses?

This skill specifically instructs Claude to avoid 'AI slop'—common patterns like system fonts and predictable gradients—and instead use bold, intentional design principles used by professional designers.

Which frontend frameworks are supported by this skill?

The skill is framework-agnostic and can generate high-quality code for React, Vue, Svelte, or vanilla HTML/CSS/JS based on your technical constraints.

Does it prioritize performance and accessibility?

Yes. While the skill focuses on high-end aesthetics, it maintains a commitment to technical requirements, including performance optimization and accessibility standards.

Can I request specific design styles like Brutalism or Minimalism?

Yes, the skill is designed to interpret specific aesthetic directions and will adjust typography, spacing, and motion to match the requested tone perfectly.

Frontend Design

Name: Frontend Design
Author: BbgnsurfTech

byBbgnsurfTech

•

デザインツール

Generates distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics through bold design choices.

The Frontend Design skill empowers Claude to act as a high-end UI/UX developer, creating bespoke web interfaces that feel handcrafted rather than procedurally generated. It guides the model to commit to specific aesthetic directions—such as brutalist, luxury, or retro-futuristic—while prioritizing unique typography, advanced CSS motion, and unconventional spatial layouts. By focusing on intentionality and precision, this skill helps developers build memorable, production-ready components in React, Vue, or vanilla HTML/CSS that stand out from the typical 'AI-generated' look.

主な機能

01Production-grade code generation for modern frameworks like React and Vue

02Curation of unique typography and characterful font pairings

03Creative spatial compositions including asymmetric and grid-breaking layouts

04Atmospheric visual details like noise textures, gradient meshes, and custom cursors

05Implementation of advanced motion design using CSS and libraries like Framer Motion

063 GitHub stars

ユースケース

01Developing custom UI component libraries with a cohesive and bold aesthetic point-of-view

02Prototyping experimental web interfaces that utilize complex animations and depth

03Building high-impact landing pages that require a specific, non-generic brand identity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bbgnsurftech/claude-skills-collection frontend-design

For use in Claude.ai and ChatGPT

Download Skill