Does the output include code for specific frameworks?

Yes, you can request output for specific frameworks like Tailwind CSS, vanilla CSS custom properties, or CSS-in-JS styles.

Where are the style guides saved?

By default, the completed design system guides are written to the project as a markdown file in the .claude/docs/ directory.

What UI aesthetics can this skill generate guides for?

It supports any named aesthetic including Brutalist, Glassmorphism, Retro-futuristic, Swiss Modernist, Neumorphism, Minimalism, Cyberpunk, Material Design, and Vaporwave.

Can I combine two different design styles?

Absolutely. You can request hybrids, such as 'minimalism with brutalist shadows,' and the skill will blend the core properties of both styles.

How detailed are the design specifications?

The guides are exhaustive, providing exact hex or HSL values, font stacks, spacing in px/rem, and specific transition durations with timing functions to ensure zero ambiguity.

UI Aesthetic Style Guide Generator

Name: UI Aesthetic Style Guide Generator
Author: petekp

bypetekp

0•

デザインツール

Generates exhaustive, implementation-ready design systems and CSS specifications for any named UI aesthetic.

The Aesthetic Guide skill transforms Claude into a specialized UI design consultant capable of producing production-grade design documentation. By researching specific aesthetics—ranging from Swiss Modernism and Brutalism to Glassmorphism and Apple HIG—it generates comprehensive style guides that eliminate ambiguity for coding agents. Each guide includes exact CSS variables, HSL/Hex color palettes, precise typography scales, and detailed interactive component states (hover, active, focus), ensuring that frontend implementations remain perfectly faithful to the intended visual identity.

主な機能

01Ability to blend styles and create custom aesthetic hybrids or variants.

02Support for vanilla CSS, Tailwind CSS, and CSS-in-JS configurations.

03Standardized output schema for consistent, copy-pasteable design systems.

04Comprehensive mapping of interactive states and pseudo-classes for all components.

050 GitHub stars

06In-depth research of UI aesthetics including CSS values, fonts, and timing functions.

ユースケース

01Bridging the gap between high-level design concepts and technical CSS implementation for AI coding agents.

02Creating a 'Minimalist Swiss' style guide for a corporate dashboard including precise grid and typography rules.

03Generating a complete 'Dark Mode Cyberpunk' design system with neon glow effects and specific cubic-bezier curves.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petekp/agent-skills aesthetic-guide

For use in Claude.ai and ChatGPT

Download Skill