Does this skill require design mockups to work?

No, this skill is specifically designed to craft stunning UI/UX even in the absence of design mockups by following established aesthetic directions and design principles.

What kind of motion does it implement?

It focuses on high-impact moments and well-orchestrated page loads using CSS-only solutions where possible to ensure performance and quality.

How does it avoid the 'generic AI look'?

The skill explicitly bans anti-patterns like system fonts (Inter, Roboto) and cliched color schemes (purple gradients on white), favoring distinctive typography and cohesive, bold palettes.

Can this skill be used with any frontend framework?

Yes, while it focuses on CSS and design principles, its output is adaptable to various technical constraints and modern web frameworks.

Creative Frontend Design & UX

Name: Creative Frontend Design & UX
Author: mikev10

bymikev10

0•

设计工具

Transforms basic code into visually stunning, high-impact user interfaces using bold aesthetic principles and advanced spatial layouts.

This skill empowers Claude to act as a designer-turned-developer, bridging the gap between functional code and elite visual presentation. It moves beyond generic 'AI-generated' looks by enforcing strict aesthetic guidelines that prioritize unique typography, sophisticated color palettes, and unconventional spatial compositions. Whether building from scratch or refactoring existing code, it ensures every interface has a memorable 'feel' through high-impact motion, atmospheric textures, and grid-breaking layouts, all without requiring pre-existing design mockups.

主要功能

01Implementation of distinctive typography and cohesive, non-generic color palettes

020 GitHub stars

03Selection of bold aesthetic directions ranging from Brutalist to Retro-futuristic

04Creation of unconventional spatial layouts using asymmetry and grid-breaking elements

05Orchestration of high-impact motion and CSS-only micro-interactions

06Advanced visual styling including gradient meshes, noise textures, and layered transparencies

使用场景

01Generating a high-end landing page for a new project when no design assets are available

02Implementing a unique brand identity for a technical product that needs to stand out from competitors

03Refactoring a generic 'Bootstrap-style' interface into a refined, editorial-grade experience

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mikev10/olympus frontend-ui-ux

For use in Claude.ai and ChatGPT

Download Skill