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.

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

01Autonomous selection of distinctive aesthetic directions like Brutalist, Minimalist, or Luxury

02Anti-pattern enforcement to eliminate clichéd 'AI slop' design elements

03Advanced spatial composition using asymmetrical layouts and grid-breaking elements

04High-impact CSS-driven motion and orchestrated micro-interactions

05Curated typography management that avoids overused system fonts

062,142 GitHub stars

Use Cases

01Refactoring generic Bootstrap or Tailwind components into a branded, premium interface

02Generating a unique landing page layout without a designer's mockup

03Adding personality and atmospheric visual details to an existing web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yeachan-heo/oh-my-claudecode frontend-ui-ux

For use in Claude.ai and ChatGPT

Download Skill