Does it prioritize performance and accessibility?

Yes, the skill focuses on 'production-grade' code, which includes technical constraints like performance optimization and accessibility alongside high-end visual design.

What kind of visual styles can I request?

You can request a wide variety of styles including minimalist, maximalist, industrial, organic, playful, or editorial, ensuring every generation is unique to its context.

How does this skill avoid the 'AI look'?

It specifically avoids generic fonts like Inter or Arial and predictable color schemes, instead opting for bold, intentional design directions like brutalism, retro-futurism, or luxury aesthetics.

Can I use this with React or Vue?

Yes, the skill is framework-agnostic and provides implementation guidance for HTML/CSS/JS, React (including Motion libraries), Vue, and other modern frontend frameworks.

Does it support advanced CSS techniques?

Absolutely. It utilizes CSS variables, gradient meshes, noise textures, layered transparencies, and complex animations to create depth and atmosphere.

Frontend Design

Name: Frontend Design
Author: Delqhi

byDelqhi

デザインツール

Generates high-quality, distinctive frontend interfaces that prioritize intentional design and avoid generic AI-generated aesthetics.

概要

This skill empowers Claude to act as a high-end creative technologist, moving beyond cookie-cutter web layouts to produce production-grade, visually striking frontend code. It emphasizes bold aesthetic directions—ranging from brutalist to luxury—and focuses on meticulous details like distinctive typography, sophisticated color palettes, and complex spatial compositions. By applying this skill, developers can generate components and applications that feel genuinely designed rather than procedurally generated, ensuring every interface has a memorable and context-specific character.

主な機能

Advanced typography pairing and distinctive font selection
Grid-breaking and asymmetrical spatial layouts for memorable user experiences
High-fidelity UI component generation with intentional aesthetic directions
Sophisticated motion design and micro-interactions using modern libraries
Implementation of complex CSS effects, textures, and gradient meshes
0 GitHub stars

ユースケース

Developing creative portfolios or editorial-style web applications with high visual impact
Building a unique landing page that needs to stand out from competitors
Creating a brand-consistent component library with specific visual identity

概要

主な機能

Advanced typography pairing and distinctive font selection
Grid-breaking and asymmetrical spatial layouts for memorable user experiences
High-fidelity UI component generation with intentional aesthetic directions
Sophisticated motion design and micro-interactions using modern libraries
Implementation of complex CSS effects, textures, and gradient meshes
0 GitHub stars

ユースケース

Developing creative portfolios or editorial-style web applications with high visual impact
Building a unique landing page that needs to stand out from competitors
Creating a brand-consistent component library with specific visual identity