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

0•

디자인 도구

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.

주요 기능

01Advanced typography pairing and distinctive font selection

02Grid-breaking and asymmetrical spatial layouts for memorable user experiences

03High-fidelity UI component generation with intentional aesthetic directions

04Sophisticated motion design and micro-interactions using modern libraries

05Implementation of complex CSS effects, textures, and gradient meshes

060 GitHub stars

사용 사례

01Developing creative portfolios or editorial-style web applications with high visual impact

02Building a unique landing page that needs to stand out from competitors

03Creating a brand-consistent component library with specific visual identity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add delqhi/singularity-code frontend-design

For use in Claude.ai and ChatGPT

Download Skill