What makes this skill different from standard AI frontend generation?

It explicitly avoids 'AI slop' by rejecting generic fonts and predictable layouts, instead focusing on bold, intentional design directions like brutalism, minimalism, or retro-futurism.

How does it handle typography and styling?

It moves away from overused system fonts like Inter and Arial, opting for characterful font pairings and cohesive color palettes using CSS variables for consistency.

Which frameworks does this skill support?

It is framework-agnostic, capable of generating high-quality code in HTML/CSS/JS, React, Vue, and other modern frontend frameworks.

Can I use this for production-grade projects?

Yes, the skill focuses on generating functional, refined, and production-ready code with meticulous attention to detail and technical constraints.

Frontend Design

Name: Frontend Design
Author: Delqhi

byDelqhi

0•

Herramientas de Diseño

Creates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through bold design thinking and meticulous implementation.

The Frontend Design skill empowers Claude to move beyond standard component templates and create high-end, memorable web interfaces. By prioritizing specific aesthetic directions—ranging from brutalist to luxury—and focusing on unique typography, motion, and spatial composition, this skill ensures that generated code feels intentionally designed rather than mass-produced. It is ideal for developers looking to build polished landing pages, distinctive UI components, and creative web applications that stand out with professional-grade CSS, HTML, and framework-specific implementations.

Características Principales

010 GitHub stars

02Generates production-grade, functional code for web components and applications

03Utilizes complex backgrounds, textures, and depth effects for visual character

04Adds sophisticated motion design and CSS-driven micro-interactions

05Avoids generic 'AI slop' by enforcing unique, intentional aesthetic directions

06Implements advanced typography and creative, non-traditional layout patterns

Casos de Uso

01Creating interactive, visually striking components for a creative portfolio

02Building a high-conversion marketing page with a unique editorial aesthetic

03Developing a distinctive design system for a niche web application

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