Does this skill require existing design mockups?

No, this skill is specifically designed to function as a designer who codes, allowing it to create high-quality UI/UX from scratch without needing Figma or Adobe XD files.

Can I use this to improve an existing website's look?

Yes, you can apply this skill to existing codebases to refactor layouts, improve spacing, and inject more personality into the interface.

How does this skill avoid the 'AI-generated' look?

It explicitly avoids overused fonts like Inter and Roboto, and rejects clichéd color schemes like purple-on-white gradients, opting instead for bold, intentional aesthetic choices.

Which frontend frameworks is this skill compatible with?

The skill focuses on CSS variables and core design principles, making it compatible with React, Vue, Svelte, or vanilla HTML/CSS projects.

Frontend UI/UX Designer

Name: Frontend UI/UX Designer
Author: Yeachan-Heo

byYeachan-Heo

•

2,142

Design Tools

Crafts high-impact, production-grade frontend interfaces with a focus on bold aesthetics and professional design intuition.

About

The Frontend UI/UX skill transforms Claude into a designer-developer hybrid that bridges the gap between raw code and polished visual experiences. It is specifically engineered to move beyond generic, 'AI-generated' design patterns by enforcing bold aesthetic directions—such as Brutalist, Luxury, or Retro-futuristic—and prioritizing distinctive typography and spatial asymmetry. This skill is ideal for developers who need to build memorable web interfaces from scratch without existing Figma mockups, ensuring every project has a unique atmospheric feel through intentional color palettes, motion, and layout constraints.

Key Features

Autonomous selection of distinctive aesthetic directions like Brutalist, Minimalist, or Luxury
Anti-pattern enforcement to eliminate clichéd 'AI slop' design elements
Advanced spatial composition using asymmetrical layouts and grid-breaking elements
High-impact CSS-driven motion and orchestrated micro-interactions
Curated typography management that avoids overused system fonts
2,142 GitHub stars

Use Cases

Refactoring generic Bootstrap or Tailwind components into a branded, premium interface
Generating a unique landing page layout without a designer's mockup
Adding personality and atmospheric visual details to an existing web application

About

Key Features

Autonomous selection of distinctive aesthetic directions like Brutalist, Minimalist, or Luxury
Anti-pattern enforcement to eliminate clichéd 'AI slop' design elements
Advanced spatial composition using asymmetrical layouts and grid-breaking elements
High-impact CSS-driven motion and orchestrated micro-interactions
Curated typography management that avoids overused system fonts
2,142 GitHub stars

Use Cases

Refactoring generic Bootstrap or Tailwind components into a branded, premium interface
Generating a unique landing page layout without a designer's mockup
Adding personality and atmospheric visual details to an existing web application