aesthetic

Analyzes UI screenshots and generates improved designs using Gemini API and extracted design tokens.

Updated Aug 6, 2025
One-click install
npx skills add https://github.com/flosrn/.claude --skill aesthetic-flosrn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/flosrn/.claude/tree/main/skills/aesthetic
Command: npx skills add https://github.com/flosrn/.claude --skill aesthetic-flosrn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps users create and refine visually appealing user interfaces by leveraging AI for design analysis, generation, and iteration, ensuring high aesthetic quality.

Core Features & Use Cases

  • Design Improvement: Iteratively enhance existing UI designs based on AI analysis and feedback.
  • Inspiration Analysis: Extract design principles, color palettes, and typography from inspirational websites.
  • Image Generation: Create new design concepts and iterate on them until they meet aesthetic standards.
  • Use Case: You have a screenshot of a current app screen. Use this Skill to analyze its design, suggest improvements, generate a more modern version, and extract implementation specs.

Quick Start

Improve the design of the attached screenshot 'current-ui.png' by following the iterative design workflow.

Frequently Asked Questions about aesthetic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve UI design aesthetics using AI iteration?

To improve UI design aesthetics, this Skill analyzes visual inputs, scores current designs, generates modern alternatives, and iteratively refines them using the Gemini API for multimodal processing.

Can I extract design tokens and color palettes from a screenshot?

Yes, you can extract design tokens, color palettes, and typography from screenshot inputs by analyzing inspirational websites to capture and apply their underlying design principles.

How does AI-driven UI generation handle design quality assurance?

AI-driven UI generation handles quality assurance by scoring visual outputs against established design principles and iteratively refining the generated concepts until they meet high aesthetic standards.

Do I need the Gemini API to analyze and refine user interfaces?

Yes, you need the Gemini API integration because it provides the multimodal processing capabilities required to analyze visual inputs and generate iterative UI design improvements.

What is the best way to generate modern design alternatives from an existing app screen?

The best way to generate modern alternatives from an app screen is uploading the screenshot for AI analysis, which then suggests improvements, creates new concepts, and extracts implementation specs.