What tools does this skill integrate with?

It works seamlessly with chrome-devtools for capturing screenshots, ai-multimodal for visual analysis, and ui-styling for implementing designs with Tailwind CSS.

Can this skill help with accessibility?

Yes, the 'RIGHT' stage of the framework focuses specifically on WCAG standards, component architecture, and ensuring beauty never compromises functionality.

Is this skill only for creating images?

No, while it can generate design images for inspiration, its primary purpose is to provide the guidelines and documentation necessary to build functional, high-end web interfaces.

How does the Aesthetic skill ensure professional design quality?

It uses an iterative workflow where AI evaluates its own output against human-centric aesthetic standards, requiring a quality score of 7/10 or higher before proceeding.

Aesthetic Design & UI/UX

Name: Aesthetic Design & UI/UX
Author: nordeim

bynordeim

0•

设计工具

Creates high-end, visually stunning user interfaces by applying systematic design principles and iterative AI-driven refinement.

The Aesthetic skill provides a comprehensive framework for building professional-grade digital interfaces, moving beyond basic layouts to achieve peak visual quality. It leverages a structured four-stage approach—Beautiful (aesthetics), Right (functionality), Satisfying (micro-interactions), and Peak (storytelling)—to ensure designs are not only visually appealing but also accessible and engaging. By integrating browser automation for inspiration analysis and multimodal AI for iterative refinement, this skill helps developers bridge the gap between technical implementation and high-level design artistry while maintaining rigorous standards for typography, color theory, and visual hierarchy.

主要功能

01Iterative design image generation with objective aesthetic quality scoring (1-10)

02Comprehensive guidance on typography systems, color psychology, and grid layouts

03Automated inspiration analysis from sites like Dribbble and Mobbin using chrome-devtools

04Standardized templates for design system documentation and visual storytelling

05Four-stage design framework: Beautiful, Right, Satisfying, and Peak

060 GitHub stars

使用场景

01Transforming low-fidelity concepts into polished, production-ready frontend interfaces

02Extracting specific design tokens and style guides from existing web inspiration

03Implementing complex micro-interactions and animations that enhance user satisfaction

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nordeim/prompt-engineering aesthetic

For use in Claude.ai and ChatGPT

主要功能

01Iterative design image generation with objective aesthetic quality scoring (1-10)

02Comprehensive guidance on typography systems, color psychology, and grid layouts

03Automated inspiration analysis from sites like Dribbble and Mobbin using chrome-devtools

04Standardized templates for design system documentation and visual storytelling

05Four-stage design framework: Beautiful, Right, Satisfying, and Peak

060 GitHub stars

使用场景

01Transforming low-fidelity concepts into polished, production-ready frontend interfaces

02Extracting specific design tokens and style guides from existing web inspiration

03Implementing complex micro-interactions and animations that enhance user satisfaction