What frontend frameworks are supported?

The skill is framework-agnostic but provides specific implementation guidance for HTML/CSS, React (using Motion), and Vue.

Does it support custom branding?

Yes, it uses design thinking to interpret your specific context and audience to create a tailored aesthetic that matches your brand's tone.

Is the generated code production-ready?

Yes, the skill focuses on delivering functional, high-quality code with meticulous attention to detail, performance, and technical constraints.

How does this skill avoid generic AI looks?

It enforces specific, bold aesthetic directions like brutalism, retro-futurism, or minimalism and explicitly forbids overused fonts like Inter and standard purple-gradient themes.

Can I use this for complex web applications?

Absolutely. It is designed to handle everything from individual bespoke web components to full-scale applications and immersive, high-impact landing pages.

Frontend Design Pro

Name: Frontend Design Pro
Author: Delqhi

byDelqhi

디자인 도구

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

소개

This skill empowers Claude to move beyond standard component libraries and 'AI slop' by applying professional design thinking to frontend development. It guides the creation of visually striking, memorable web interfaces using specific aesthetic directions—ranging from brutalist to luxury—while prioritizing unique typography, sophisticated color palettes, and intentional motion design. Ideal for developers looking to build polished, bespoke web components or full-page applications that feel genuinely designed rather than procedurally generated, ensuring every project has a unique, intentional point of view.

주요 기능

Eliminates generic 'AI aesthetics' through intentional, bold design choices and unique styling.
Implements production-grade code for React, Vue, or vanilla HTML/CSS/JS environments.
Constructs unique spatial layouts including asymmetry, grid-breaking elements, and depth textures.
Curates distinctive typography pairings and sophisticated, cohesive color palettes using CSS variables.
Integrates advanced motion design and micro-interactions using CSS and modern animation libraries.
0 GitHub stars

사용 사례

Building a high-end marketing landing page with a unique editorial or brutalist aesthetic.
Prototyping immersive web experiences with complex animations and non-standard spatial layouts.
Creating a custom, branded component library that deviates from standard UI framework defaults.

소개

주요 기능

Eliminates generic 'AI aesthetics' through intentional, bold design choices and unique styling.
Implements production-grade code for React, Vue, or vanilla HTML/CSS/JS environments.
Constructs unique spatial layouts including asymmetry, grid-breaking elements, and depth textures.
Curates distinctive typography pairings and sophisticated, cohesive color palettes using CSS variables.
Integrates advanced motion design and micro-interactions using CSS and modern animation libraries.
0 GitHub stars

사용 사례

Building a high-end marketing landing page with a unique editorial or brutalist aesthetic.
Prototyping immersive web experiences with complex animations and non-standard spatial layouts.
Creating a custom, branded component library that deviates from standard UI framework defaults.