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

0•

Design Tools

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.

Key Features

01Eliminates generic 'AI aesthetics' through intentional, bold design choices and unique styling.

02Implements production-grade code for React, Vue, or vanilla HTML/CSS/JS environments.

03Constructs unique spatial layouts including asymmetry, grid-breaking elements, and depth textures.

04Curates distinctive typography pairings and sophisticated, cohesive color palettes using CSS variables.

05Integrates advanced motion design and micro-interactions using CSS and modern animation libraries.

060 GitHub stars

Use Cases

01Building a high-end marketing landing page with a unique editorial or brutalist aesthetic.

02Prototyping immersive web experiences with complex animations and non-standard spatial layouts.

03Creating a custom, branded component library that deviates from standard UI framework defaults.

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