How does it handle existing brand guidelines?

The skill studies your existing patterns and CSS variables to ensure new components blend seamlessly while still elevating the overall aesthetic.

Which frontend frameworks are supported?

It is framework-agnostic and works across all modern web technologies including React, Vue, Angular, and vanilla HTML/CSS/JS.

What makes this different from standard AI coding outputs?

It explicitly avoids generic defaults like 'Inter' fonts and purple gradients, choosing instead distinctive typography and unique layouts that feel human-designed.

Does this skill require design mockups to work?

No, it is specifically optimized to envision and create beautiful, cohesive interfaces from scratch based on your functional requirements.

Does it prioritize performance or just looks?

It balances both by prioritizing CSS-only animations and production-grade code while maintaining a high visual standard.

Frontend UI & UX Designer

Name: Frontend UI & UX Designer
Author: nikhillinit

bynikhillinit

0•

デザインツール

Crafts visually stunning, high-fidelity frontend interfaces with a focus on bold aesthetics and production-grade code.

This skill transforms Claude into a designer-turned-developer capable of creating sophisticated user interfaces even without provided mockups. It moves beyond generic layouts to implement opinionated, memorable designs using distinctive typography, cohesive color palettes, and high-impact motion. By prioritizing aesthetic intentionality—ranging from minimal to maximalist—the skill ensures that web applications are not just functional, but emotionally engaging and meticulously refined, ensuring every pixel contributes to a cohesive brand story.

主な機能

01Integration of atmospheric visual details like noise textures and gradient meshes

02Custom typography pairing and sophisticated color palette design

030 GitHub stars

04Complex spatial layouts involving asymmetry and grid-breaking elements

05Opinionated aesthetic direction selection (Minimalist to Maximalist)

06Advanced CSS orchestration and motion library implementation

ユースケース

01Implementing sophisticated micro-interactions and scroll-triggered animations to improve user engagement.

02Refactoring a functional but generic dashboard into a polished, luxury-tier user interface.

03Generating a high-impact landing page from a basic feature description without design files.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nikhillinit/updog_restore frontend-ui-ux

For use in Claude.ai and ChatGPT

主な機能

01Integration of atmospheric visual details like noise textures and gradient meshes

02Custom typography pairing and sophisticated color palette design

030 GitHub stars

04Complex spatial layouts involving asymmetry and grid-breaking elements

05Opinionated aesthetic direction selection (Minimalist to Maximalist)

06Advanced CSS orchestration and motion library implementation

ユースケース

01Implementing sophisticated micro-interactions and scroll-triggered animations to improve user engagement.

02Refactoring a functional but generic dashboard into a polished, luxury-tier user interface.

03Generating a high-impact landing page from a basic feature description without design files.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nikhillinit/updog_restore frontend-ui-ux

For use in Claude.ai and ChatGPT