How does this skill avoid generic AI designs?

It explicitly rejects common defaults like Inter or Arial fonts and predictable color gradients in favor of bold, intentional design choices and sophisticated spatial layouts.

Is the generated code optimized for performance?

Yes, the skill prioritizes CSS-only solutions for animations where possible and maintains high standards for code efficiency and accessibility.

What design styles can I request?

You can request almost any aesthetic, including minimalist, maximalist, industrial, playful, editorial, or art deco, and the skill will execute it with precision.

Can it work with different frameworks?

Yes, it is designed to generate production-ready code for various stacks including HTML/CSS/JS, React, and Vue.

Frontend Design Pro

Name: Frontend Design Pro
Author: Delqhi

byDelqhi

0•

Herramientas de Diseño

Generates high-fidelity, production-grade web interfaces with distinctive aesthetics that transcend generic AI-generated designs.

This skill empowers Claude to move beyond standard component templates by implementing sophisticated design thinking and bold aesthetic choices. It focuses on creating unforgettable user interfaces through intentional typography selection, creative spatial layouts, and advanced CSS techniques like gradient meshes and motion effects. Whether building a minimalist portfolio or a maximalist dashboard, this skill ensures the output is cohesive, polished, and functionally robust, specifically avoiding common "AI aesthetics" like system fonts and repetitive purple gradients in favor of characterful, context-aware design.

Características Principales

01Custom Aesthetic Direction: Choose from styles like Brutalist, Retro-futuristic, or Luxury.

020 GitHub stars

03Visual Depth: Integration of noise textures, glassmorphism, and custom geometric patterns.

04Spatial Composition: Dynamic layouts using grid-breaking elements and intentional asymmetry.

05Advanced Typography: Implementation of characterful font pairings beyond standard system fonts.

06Sophisticated Motion & Effects: High-impact CSS animations and scroll-triggered reveals.

Casos de Uso

01Developing complex web application dashboards with specific thematic requirements.

02Creating custom, interactive UI components that stand out from standard component libraries.

03Building high-end marketing landing pages that require a unique brand 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