skills.rest
shirulot
shirulotCOMMUNITY
Explore all skills by this author →
GitHub

aesthetic

Analyzes screenshots and generates design guideline documents for UI/UX workflows.

Updated Jul 6, 2026
Search Tags:#storytelling#ui-ux#design-system#micro-interactions#visual-hierarchy#ai-design
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill aesthetic-shirulot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/shirulot/codex-skill/tree/main/aesthetic
Command: npx skills add https://github.com/shirulot/codex-skill --skill aesthetic-shirulot

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the challenge of creating high-quality, professional-grade user interfaces by bridging the gap between abstract design principles and concrete implementation.

Core Features & Use Cases

  • Inspiration Analysis: Extract design patterns, typography, and color systems from top-tier inspiration sites like Dribbble and Mobbin.
  • Iterative Design Generation: Use AI-multimodal workflows to generate and refine design images until they meet professional aesthetic standards.
  • Design Documentation: Generate comprehensive design guidelines and storytelling narratives to ensure consistency across development.

Quick Start

Use the aesthetic skill to analyze the design style of the provided screenshot and generate a corresponding design guideline document.

Frequently Asked Questions about aesthetic

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

FAQPage Schema
How do I extract design patterns and color systems from UI screenshots?▼

To generate UI design guidelines, analyze a provided screenshot to extract its design style, then use iterative AI-multimodal workflows to produce a comprehensive design documentation file ensuring development consistency.

Can I use AI to iteratively refine and generate user interface designs?▼

Yes, you can use AI-multimodal workflows to iteratively generate and refine design images. This process applies visual hierarchy and micro-interaction planning until the user interface meets professional aesthetic standards.

What is the best way to document a design system for storytelling-driven UI/UX?▼

The best way to document storytelling-driven UI/UX is to generate comprehensive design guidelines and narratives outlining visual hierarchy and micro-interactions, ensuring consistent implementation and narrative context across development.

Does this design workflow require specific web development tools?▼

The workflow integrates with multimodal AI and web development tools to ensure accessible, narrative-driven outcomes. It uses a systematic framework to bridge abstract design principles and concrete implementation without strict platform dependencies.

How do I plan micro-interactions and visual hierarchy for a functional UI?▼

Plan micro-interactions and visual hierarchy by applying a systematic framework that supports UI/UX workflows through iterative generation and inspiration analysis, ensuring aesthetically pleasing and functional user interface outcomes.

Related Skills

Explore More Design & Creative Skills→
samhvw8samhvw8
10

aesthetic

Analyze design inspiration and implement visual design principles for UI aesthetics.

Community
Advanced
giosuetedeschi-specgiosuetedeschi-spec

scroll-experience

Architect scroll-driven animations and parallax storytelling for web interfaces.

Community
Intermediate
kevinnguyen271090kevinnguyen271090
15

aesthetic

Apply design principles to create UI/UX interfaces with generated images and micro-interactions.

Community
Basic
tametotameto

ui-designer

Design UI/UX interfaces with design tokens for color, typography, and spacing.

Community
Advanced